:root {
    --ink: #08131f;
    --panel: #12263d;
    --line: rgba(242, 193, 77, .35);
    --text: #1b140d;
    --ivory: #f7f1e6;
    --ivory-2: #efe4d2;
    --sea: #f0c14a;
    --brass: #f0c14a;
    --brass-2: #a97832;
    --gold-ink: #8a5a10;
    --felt-1: #1f9a5c;
    --felt-2: #0a4a30;
    --mute: #d9cbb6;
    --danger: #d4654e;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    min-height: 100%;
    display: grid;
    place-items: center;
    background: radial-gradient(900px 640px at 50% 0%, #1a3358 0%, #070d16 68%);
    color: var(--ivory);
    font-family: Outfit, sans-serif;
    padding: 18px 12px;
  }
  button, input { font: inherit; color: inherit; }
  button { cursor: pointer; }
  .phone {
    width: min(390px, 100%);
    height: min(844px, calc(100dvh - 24px));
    border-radius: 32px;
    overflow: hidden;
    background:
      radial-gradient(420px 200px at 100% 0%, rgba(242, 193, 77, .18), transparent 50%),
      linear-gradient(180deg, #122844 0%, #0a1626 100%);
    color: var(--ivory);
    box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(242,193,77,.28);
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .screen {
    flex: 1;
    min-height: 0;
    display: none;
    flex-direction: column;
  }
  .screen.on { display: flex; }
  .scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px 18px 12px;
  }
  .scroll::-webkit-scrollbar { width: 0; }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
  }
  .hello { margin: 0; color: var(--mute); font-size: 13px; }
  .hello b {
    display: block;
    color: white;
    font-family: Fraunces, serif;
    font-size: 28px;
    font-weight: 560;
    line-height: 1.05;
    margin-top: 2px;
  }
  .avatar, .ava {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #f6d78a, #c4892e);
    color: #3a2508;
    border: 1px solid rgba(255,255,255,.45);
    font-family: Fraunces, serif;
    font-size: 18px;
    flex: none;
  }
  .avatar { cursor: pointer; }

  .hero, .card, .row, .stat, .friend, .field, .rank {
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), transparent 46%),
      var(--panel);
    border: 1px solid rgba(242,193,77,.34);
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(0,0,0,.28);
    color: var(--ivory);
  }
  .hero {
    width: 100%;
    text-align: left;
    padding: 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    overflow: hidden;
    background:
      radial-gradient(rgba(255,255,255,.07) .6px, transparent .8px) 0 0 / 7px 7px,
      radial-gradient(220px 120px at 100% 0%, rgba(242,193,77,.55), transparent 58%),
      linear-gradient(155deg, #183a62 0%, #0d233e 58%, #081220 100%);
    margin-bottom: 10px;
  }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
  .hero strong { font-family: Fraunces, serif; font-size: 30px; font-weight: 560; }
  .hero-chain, .hero-showcase { display: flex; align-items: center; gap: 4px; flex: none; }
  .hero span, .hero strong { color: white; }
  .meta { color: var(--mute); font-size: 13px; }
  .card small, .row .meta, .friend .meta, .rank .meta { color: #cbbda8; }
  .hero span { color: rgba(255,255,255,.92); font-size: 13px; }
  .hero strong, .card b {
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin: 4px 0 2px;
  }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .card {
    text-align: left;
    padding: 16px;
  }
  .card b { font-size: 16px; }
  .with-tile { position: relative; }
  .card.with-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
  }
  .card.with-tile::before,
  .match.with-tile::before {
    content: "";
    width: 22px;
    height: 40px;
    border-radius: 4px;
    background:
      linear-gradient(#1b1712, #1b1712) center / 12px 1px no-repeat,
      radial-gradient(circle at 50% 22%, #2eb6ea 1.7px, transparent 1.9px),
      radial-gradient(circle at 32% 78%, #f0b02a 1.5px, transparent 1.7px),
      radial-gradient(circle at 68% 78%, #e23d86 1.5px, transparent 1.7px),
      linear-gradient(180deg, #fffaf3, #e7dcc6);
    border: 1px solid #cbb892;
    box-shadow: 0 8px 12px rgba(0,0,0,.28);
  }
  .card.with-tile::before { grid-row: 1 / span 2; }
  .card.with-tile b, .card.with-tile small { grid-column: 2; }
  .card.with-tile b { margin: 0 0 2px; }
  .match.with-tile { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; }

  /* Symmetrical 2x2 Menu Grid */
  .menu-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 6px;
  }
  .menu-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), transparent 46%),
      var(--panel);
    border: 1px solid rgba(242,193,77,.34);
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(0,0,0,.32);
    color: var(--ivory);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 126px;
    text-align: left;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    cursor: pointer;
  }
  .menu-card:active { transform: scale(0.97); }
  .menu-card .card-ico { margin-bottom: 10px; }
  .menu-card b {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 3px;
    color: #fff;
  }
  .menu-card small {
    display: block;
    font-size: 11.5px;
    color: #c9bcab;
    line-height: 1.2;
  }
  .card-ico {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  }
  .card-ico .ico-svg {
    width: 24px;
    height: 24px;
  }
  .card-ico-private {
    background: radial-gradient(circle at 35% 35%, rgba(240,193,74,0.3) 0%, rgba(18, 38, 64, 0.95) 100%);
    border-color: rgba(240, 193, 74, 0.55);
  }
  .card-ico-friends {
    background: radial-gradient(circle at 35% 35%, rgba(74, 222, 128, 0.3) 0%, rgba(10, 45, 28, 0.95) 100%);
    border-color: rgba(74, 222, 128, 0.55);
  }
  .card-ico-rank {
    background: radial-gradient(circle at 35% 35%, rgba(240, 193, 74, 0.4) 0%, rgba(55, 35, 10, 0.95) 100%);
    border-color: rgba(240, 193, 74, 0.65);
  }
  .card-ico-shop {
    background: radial-gradient(circle at 35% 35%, rgba(244, 114, 182, 0.35) 0%, rgba(50, 12, 32, 0.95) 100%);
    border-color: rgba(244, 114, 182, 0.55);
  }
  .section {
    margin: 18px 0 8px;
    color: var(--mute);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    width: 100%;
    text-align: left;
    color: var(--ivory);
  }
  .match b { font-weight: 600; color: var(--ivory); }
  .pill {
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(46, 184, 110, .18);
    color: #b6f0cc;
    font-size: 12px;
  }
  .pill.off { background: rgba(255,255,255,.08); color: #cbbda8; }

  .top-actions { display: flex; align-items: center; gap: 8px; }
  .lang {
    display: flex;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(6, 12, 20, .4);
  }
  .lang button {
    border: 0;
    background: transparent;
    color: var(--mute);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
  }
  .lang button.on { background: var(--brass); color: #2a1c08; }
  .wide { width: 100%; margin-top: 10px; }
  .people-switch { margin: 2px 0 14px; }
  .people-switch .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 76px;
  }
  .people-switch .card b { font-size: 15px; line-height: 1.2; }
  .people-switch .card.on {
    border-color: var(--brass);
    background:
      linear-gradient(180deg, rgba(242,193,77,.2), rgba(242,193,77,.05)),
      #18344f;
  }
  .rank {
    width: 100%;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
  }
  .rank.me { border-color: var(--brass); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
  .puesto {
    font-family: Fraunces, serif;
    font-size: 22px;
    color: var(--brass);
    text-align: center;
  }
  .rank .who { min-width: 0; }
  .rank .who b { display: block; font-weight: 600; }
  .rank .pts { text-align: right; }
  .rank .pts b { display: block; font-family: Fraunces, serif; font-size: 20px; font-weight: 560; }
  .rank .pts .meta { display: block; }
  .tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: 8px 6px 12px;
    border-top: 1px solid var(--line);
    background: #08131f;
  }
  .tabs button {
    border: 0;
    background: transparent;
    color: var(--mute);
    font-size: 9px;
    padding: 6px 1px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    text-align: center;
    line-height: 1.15;
    cursor: pointer;
  }
  .tabs button.on { color: var(--brass); }
  .ico { width: 22px; height: 18px; }

  .back {
    border: 0;
    background: transparent;
    color: var(--sea);
    padding: 0;
    font-size: 14px;
    cursor: pointer;
  }
  .screen-header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 6px;
    padding-top: 2px;
  }
  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(240, 193, 74, 0.09);
    border: 1px solid rgba(240, 193, 74, 0.32);
    border-radius: 999px;
    color: var(--brass);
    padding: 6px 14px 6px 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 8px;
    user-select: none;
  }
  .back-btn:hover {
    background: rgba(240, 193, 74, 0.22);
    border-color: rgba(240, 193, 74, 0.65);
    color: #fff;
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(240, 193, 74, 0.25);
  }
  .back-btn:active {
    transform: scale(0.96);
  }
  .back-btn .back-arrow-ico {
    width: 17px;
    height: 17px;
    stroke-width: 2.5;
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .back-btn:hover .back-arrow-ico {
    transform: translateX(-2px);
  }
  .mesa-header-controls .back-btn-mesa {
    margin-bottom: 0;
  }
  .perfil-top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 2px 0 14px;
  }
  .perfil-top-bar .back-btn {
    justify-self: start;
    margin-bottom: 0;
  }
  .perfil-top-bar .perfil-page-title {
    margin: 0;
    text-align: center;
    white-space: nowrap;
  }
  .perfil-top-spacer {
    width: 100%;
  }
  h1.page {
    font-family: Fraunces, serif;
    font-size: 32px;
    font-weight: 560;
    margin: 8px 0 4px;
  }
  .lede { margin: 0 0 16px; color: var(--mute); }

  .choices { display: flex; gap: 8px; flex-wrap: wrap; }
  .choices button, .ghost {
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    padding: 8px 12px;
    color: var(--ivory);
  }
  .choices button.on {
    background: var(--brass);
    color: #2a1c08;
    border-color: transparent;
    font-weight: 600;
  }
  .go {
    margin-top: 16px;
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f6d27a, #e2a83a);
    color: #3a2508;
    font-weight: 600;
    font-size: 17px;
  }
  .go::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: sheen 3.6s ease-in-out infinite;
  }
  .codebox {
    margin-top: 14px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .codebox > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .codebox b {
    font-family: Fraunces, serif;
    letter-spacing: .18em;
    font-size: 22px;
  }

  /* NUEVO PERFIL FIEL A LA TABLET ORIGINAL */
  .perfil-scroll {
    padding-bottom: 90px;
  }
  .perfil-page-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 4px 0 16px;
    letter-spacing: -0.01em;
  }

  /* Tarjeta Hero Perfil */
  .perfil-hero-card {
    background: linear-gradient(180deg, rgba(22, 32, 50, 0.95) 0%, rgba(14, 22, 36, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 22px 18px 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    margin-bottom: 12px;
  }

  .perfil-avatar-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
  }
  .perfil-avatar-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c00 0%, #e65100 100%);
    border: 3.5px solid #00e5ff;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-family: inherit;
  }
  .perfil-avatar-edit-btn {
    position: absolute;
    bottom: 2px;
    left: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #00e5ff;
    color: #0b1329;
    border: 2px solid #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .perfil-avatar-edit-btn:hover {
    transform: scale(1.1);
  }
  .perfil-avatar-mmr-badge {
    position: absolute;
    bottom: -4px;
    right: -10px;
    background: #f59e0b;
    color: #0f172a;
    font-size: 12.5px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.45);
    border: 2px solid #0f172a;
  }

  .perfil-user-name {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.01em;
  }
  .perfil-matches-count {
    color: #f59e0b;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  /* Progress Bar */
  .perfil-level-box {
    margin-top: 18px;
  }
  .perfil-level-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .perfil-level-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
  }
  .perfil-level-fill {
    height: 100%;
    background: linear-gradient(90deg, #06b6d4 0%, #00e5ff 100%);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.65);
  }

  /* Acciones de cambio de nombre y correo verificado */
  .perfil-action-links-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px;
  }
  .perfil-action-btn.green-link {
    background: transparent;
    border: none;
    color: #10b981;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    transition: opacity 0.15s ease;
  }
  .perfil-action-btn.green-link:hover {
    opacity: 0.85;
  }
  .perfil-verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
    font-size: 13.5px;
    font-weight: 500;
  }

  /* Tarjetas de Estadísticas */
  .perfil-card {
    background: linear-gradient(180deg, rgba(22, 32, 50, 0.95) 0%, rgba(14, 22, 36, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 16px 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
  }

  .perfil-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
  }
  .perfil-stat-col {
    position: relative;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .perfil-stat-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: rgba(255, 255, 255, 0.07);
  }
  .perfil-stat-ico {
    margin-bottom: 6px;
  }
  .perfil-stat-ico.amber { color: #f59e0b; }
  .perfil-stat-ico.cyan { color: #00e5ff; }
  .perfil-stat-ico.emerald { color: #10b981; }
  .perfil-stat-ico.purple { color: #a855f7; }
  .perfil-stat-ico.flame { color: #00e5ff; }

  .perfil-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 3px;
    font-family: inherit;
  }
  .perfil-stat-label {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
  }

  /* Píldoras de Abandono */
  .perfil-abandon-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .perfil-pill {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .perfil-pill .pill-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 500;
  }
  .perfil-pill.win-abandon .pill-left svg { color: #06b6d4; }
  .perfil-pill.lost-abandon .pill-left svg { color: #ef4444; }

  .pill-badge-num {
    font-size: 13px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    font-family: inherit;
  }
  .pill-badge-num.cyan {
    background: rgba(6, 182, 212, 0.2);
    color: #00e5ff;
  }
  .pill-badge-num.red {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
  }

  .perfil-abandon-note {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    margin-top: 10px;
    line-height: 1.35;
    padding: 0 4px;
  }

  /* Enlaces de Acción */
  .perfil-nav-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
  }
  .perfil-menu-link {
    background: transparent;
    border: none;
    color: #10b981;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    transition: opacity 0.15s ease;
  }
  .perfil-menu-link:hover { opacity: 0.85; }

  /* Configuración de la cuenta y juego */
  .perfil-settings {
    margin: 4px 0 20px;
    background: rgba(20, 28, 44, 0.85);
    border: 1px solid rgba(240, 193, 74, 0.3);
    border-radius: 18px;
    padding: 4px 16px;
  }
  .perfil-settings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
  }
  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .perfil-settings-title + .settings-row { border-top: 0; }
  .settings-text { min-width: 0; }
  .settings-text b { display: block; font-size: 14px; font-weight: 600; color: #f1f5f9; }
  .settings-text small { display: block; margin-top: 2px; font-size: 11.5px; color: #94a3b8; }

  .settings-lang {
    display: inline-flex;
    flex: none;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .settings-lang button {
    border: 0;
    border-radius: 999px;
    padding: 6px 11px;
    background: transparent;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 600;
    transition: background .2s, color .2s;
  }
  .settings-lang button.on { background: rgba(240,193,74,.18); color: var(--brass); box-shadow: inset 0 0 0 1px rgba(240,193,74,.45); }

  .settings-switch {
    position: relative;
    flex: none;
    width: 48px; height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    transition: background .2s, border-color .2s;
  }
  .settings-switch span {
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transition: transform .22s ease, background .2s;
  }
  .settings-switch[aria-checked="true"] {
    background: linear-gradient(180deg, #f6d78a, var(--brass) 55%, #c4892e);
    border-color: transparent;
  }
  .settings-switch[aria-checked="true"] span { transform: translateX(20px); background: #fff; }
  .settings-switch:focus-visible, .settings-lang button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

  /* Botones de Cuenta */
  .perfil-account-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
  }
  .perfil-btn-logout {
    width: 100%;
    padding: 13px 20px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.7);
    border-radius: 999px;
    color: #ef4444;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .perfil-btn-logout:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: #ef4444;
  }
  .perfil-link-delete {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    transition: opacity 0.15s ease;
  }
  .perfil-link-delete:hover { opacity: 0.85; }

  /* Sección de Personalización Plegable */
  .perfil-custom-section {
    margin-top: 22px;
    background: rgba(20, 28, 44, 0.85);
    border: 1px solid rgba(240, 193, 74, 0.3);
    border-radius: 18px;
    overflow: hidden;
  }
  .perfil-custom-header {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
  }
  .perfil-custom-header .custom-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
  }
  .perfil-custom-header .chevron-ico {
    transition: transform 0.25s ease;
    color: #94a3b8;
  }
  .perfil-custom-header.open .chevron-ico {
    transform: rotate(180deg);
  }
  .perfil-custom-body {
    padding: 0 14px 16px;
    display: none;
  }
  .perfil-custom-body.open {
    display: block;
  }
  .custom-subtitle {
    font-size: 12.5px;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 8px;
  }
  .field {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .field span { color: #cbbda8; font-size: 13px; display: block; }
  .search {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(242,193,77,.35);
    background: #0e2034;
    color: var(--ivory);
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .friend {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    text-align: left;
  }
  .friend .who { flex: 1; }
  .friend b { display: block; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c587; display: inline-block; margin-right: 6px; }
  .dot.off { background: #c3b8a8; }
  .invite {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(242,193,77,.16);
    color: var(--brass);
  }
  /* ── Amigos Screen ── */
  .amigos-block { margin-bottom: 6px; }
  .amigos-empty {
    font-size: 12.5px;
    color: #94a3b8;
    margin: 4px 0 8px;
    padding: 12px 14px;
    border: 1px dashed rgba(242,193,77,.2);
    border-radius: 14px;
    text-align: center;
  }
  .add-friend-box {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .add-friend-box input {
    flex: 1;
    border-radius: 14px;
    border: 1px solid rgba(242,193,77,.35);
    background: #0e2034;
    color: var(--ivory);
    padding: 12px 14px;
    font: inherit;
  }
  .add-friend-box input::placeholder { color: #6e7f95; }
  .add-friend-box input:focus { outline: none; border-color: rgba(242,193,77,.7); }
  .btn-add-friend {
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    background: var(--brass);
    color: #2a1c08;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
  }
  .btn-add-friend:active { opacity: .8; }

  .amigos-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 18px 0 8px;
  }
  .amigos-section-label .badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 7px;
    vertical-align: middle;
  }

  .friend-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 8px;
    text-align: left;
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), transparent 46%),
      var(--panel);
    border: 1px solid rgba(242,193,77,.2);
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    cursor: pointer;
    transition: border-color .15s, transform .12s;
  }
  .friend-card:active { transform: scale(0.98); }
  .friend-card:hover { border-color: rgba(242,193,77,.45); }

  .friend-card .fc-ava {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(180deg, #f6d78a, #c4892e);
    color: #3a2508;
    display: grid; place-items: center;
    font-family: Fraunces, serif;
    font-size: 18px;
    flex: none;
    position: relative;
  }
  .friend-card .fc-ava .fc-status-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 2px solid #0d1f35;
  }
  .fc-status-dot.online  { background: #4ade80; }
  .fc-status-dot.ingame  { background: #f0c14a; }
  .fc-status-dot.offline { background: #6b7280; }

  .friend-card .fc-info { flex: 1; min-width: 0; }
  .friend-card .fc-info b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .friend-card .fc-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    min-width: 0;
  }
  .friend-card .fc-name-row b { min-width: 0; max-width: 100%; }
  .fc-rating {
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brass);
    white-space: nowrap;
  }
  .friend-card .fc-info .fc-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .fc-meta .fc-game-badge {
    background: rgba(240,193,74,.15);
    color: var(--brass);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(240,193,74,.35);
  }

  .friend-card .fc-actions {
    display: flex;
    gap: 6px;
    flex: none;
  }
  .fc-btn {
    border: 0;
    border-radius: 10px;
    padding: 7px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .12s;
    white-space: nowrap;
  }
  .fc-btn:active { transform: scale(0.95); opacity: .85; }
  .fc-btn:disabled { opacity: .4; cursor: default; transform: none; }
  .fc-btn.invite  { background: rgba(240,193,74,.18); color: var(--brass); border: 1px solid rgba(240,193,74,.35); }
  .fc-btn.reto    { background: rgba(74,222,128,.14); color: #4ade80;      border: 1px solid rgba(74,222,128,.35); }
  .fc-btn.unirse  { background: rgba(240,193,74,.25); color: #fff;          border: 1px solid rgba(240,193,74,.5); }
  .fc-btn.accept  { background: rgba(74,222,128,.18); color: #4ade80;       border: 1px solid rgba(74,222,128,.4); }
  .fc-btn.decline { background: rgba(212,101,78,.14); color: #f87171;       border: 1px solid rgba(212,101,78,.35); }

  /* Mini quick-profile modal */
  .qp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6,12,20,.72);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-end;
    z-index: 50;
  }
  .qp-overlay.on { display: flex; }
  .qp-sheet {
    width: 100%;
    background: linear-gradient(180deg, #162844 0%, #0a1626 100%);
    border-top: 1px solid rgba(242,193,77,.35);
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 32px;
    box-shadow: 0 -16px 40px rgba(0,0,0,.55);
    animation: slideUp .25s ease;
    max-height: 88%;
    overflow-y: auto;
  }
  @keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .qp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .qp-ava {
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(180deg, #f6d78a, #c4892e);
    color: #3a2508;
    display: grid; place-items: center;
    font-family: Fraunces, serif;
    font-size: 24px;
    flex: none;
    position: relative;
  }
  .qp-ava .qp-status-dot {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2.5px solid #0d1f35;
  }
  .qp-info { flex: 1; }
  .qp-info b { display: block; font-size: 18px; font-weight: 700; color: #fff; }
  .qp-info span { font-size: 12.5px; color: #94a3b8; }
  .qp-close {
    border: 0; background: rgba(255,255,255,.08);
    width: 32px; height: 32px; border-radius: 50%;
    color: #94a3b8; font-size: 18px;
    display: grid; place-items: center;
    cursor: pointer; flex: none;
  }
  .qp-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px;
    margin-bottom: 16px;
  }
  .qp-stat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
  }
  .qp-stat b { display: block; font-size: 16px; white-space: nowrap; font-weight: 800; color: #fff; font-family: Fraunces, serif; }
  .qp-stat span { font-size: 10.5px; color: #94a3b8; margin-top: 2px; display: block; }
  .qp-history-label {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mute); margin-bottom: 8px;
  }
  .qp-history-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: #cbd5e1; margin-bottom: 4px;
  }
  .qp-history-row .qp-win  { color: #4ade80; font-weight: 700; }
  .qp-history-row .qp-lose { color: #f87171; font-weight: 700; }
  .qp-recent-label { margin-top: 14px; }
  .qp-recent-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: #cbd5e1;
    padding: 7px 10px;
    margin-bottom: 4px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
  }
  .qp-recent-rival { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qp-recent-result { font-weight: 700; }
  .qp-recent-result.qp-win  { color: #4ade80; }
  .qp-recent-result.qp-lose { color: #f87171; }
  .qp-recent-score { font-family: Fraunces, serif; color: #fff; min-width: 52px; text-align: right; }
  .qp-actions { display: flex; gap: 8px; margin-top: 16px; }
  .qp-actions .fc-btn { flex: 1; padding: 12px; font-size: 13.5px; border-radius: 14px; text-align: center; }


  .brand-showcase {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin: 4px 0 12px;
    background:
      radial-gradient(140px 80px at 15% 50%, rgba(249, 115, 22, 0.32), transparent 70%),
      radial-gradient(180px 70px at 85% 0%, rgba(240, 193, 74, 0.22), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%),
      #0d1d32;
    border-radius: 20px;
    border: 1px solid rgba(240, 193, 74, 0.45);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
    position: relative;
    overflow: hidden;
  }
  .brand-showcase::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
    animation: shineSweep 6s infinite ease-in-out;
    pointer-events: none;
  }
  @keyframes shineSweep {
    0%, 70% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .brand-badge-box {
    position: relative;
    width: 62px;
    height: 62px;
    flex: none;
  }
  .brand-badge-box::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 19px;
    background: radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.6) 0%, rgba(239, 68, 68, 0.3) 55%, transparent 75%);
    filter: blur(6px);
    z-index: 0;
    pointer-events: none;
    animation: flamePulse 3.2s infinite ease-in-out alternate;
  }
  @keyframes flamePulse {
    0% { transform: scale(0.94); opacity: 0.65; }
    100% { transform: scale(1.12); opacity: 1; }
  }
  .brand-logo-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.65),
      0 0 16px rgba(249, 115, 22, 0.45),
      0 0 0 1.5px rgba(240, 193, 74, 0.85);
    display: block;
    transition: transform 0.25s ease;
  }
  .brand-showcase:hover .brand-logo-img {
    transform: scale(1.04) rotate(-2deg);
  }
  .brand-titles { flex: 1; min-width: 0; }
  .brand-badge-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--brass);
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .brand-main-title {
    font-family: Fraunces, serif;
    font-size: 21.5px;
    font-weight: 640;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 15%, #ffd68a 50%, #f0c14a 80%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .025em;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  }
  .brand-edition {
    display: block;
    font-size: 11px;
    color: #c9bcab;
    margin-top: 2px;
  }

  /* mesa */
  .mesa-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px 14px 0;
  }
  .who-line { display: flex; align-items: center; gap: 8px; }
  .who-line.me { justify-content: flex-end; }
  .who-line b { display: block; font-size: 14px; }
  .who-line em { font-style: normal; color: var(--mute); font-size: 12px; }
  .mini {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: white;
    color: var(--text);
    border: 1px solid var(--line);
    font-family: Fraunces, serif;
    font-weight: 600;
  }
  .mini.live { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 4px var(--brass); }
  .goal { text-align: center; color: var(--mute); font-size: 12px; }
  .goal strong { display: block; color: white; font-family: Fraunces, serif; font-size: 20px; font-weight: 560; }
  .scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px 18px 8px;
    font-family: Fraunces, serif;
    font-size: 28px;
    letter-spacing: .04em;
  }
  .scores span:last-child { text-align: right; }

  /* Luxury Felt & Wood Table with Multi-Color Support */
  .felt {
    flex: 1;
    margin: 0 10px;
    border-radius: 28px;
    position: relative;
    color: #f4fff8;
    background:
      radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 1px) 0 0 / 6px 6px,
      radial-gradient(ellipse 70% 60% at 50% 48%, #1f4d80 0%, #102d4e 58%, #071526 100%);
    border: 2px solid rgba(240, 193, 74, 0.45);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 0 60px rgba(0, 0, 0, 0.65),
      0 14px 34px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transition: background 0.3s ease;
  }
  body.felt-blue .felt {
    background:
      radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 1px) 0 0 / 6px 6px,
      radial-gradient(ellipse 70% 60% at 50% 48%, #1f4d80 0%, #102d4e 58%, #071526 100%);
  }
  body.felt-green .felt {
    background:
      radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 1px) 0 0 / 6px 6px,
      radial-gradient(ellipse 70% 60% at 50% 48%, rgba(28, 140, 82, 0.95) 0%, rgba(10, 75, 42, 0.98) 58%, #042214 100%);
  }
  body.felt-red .felt {
    background:
      radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 1px) 0 0 / 6px 6px,
      radial-gradient(ellipse 70% 60% at 50% 48%, #781c32 0%, #4a0f1e 58%, #24050e 100%);
  }
  body.felt-dark .felt {
    background:
      radial-gradient(rgba(255,255,255,0.06) 0.8px, transparent 1px) 0 0 / 6px 6px,
      radial-gradient(ellipse 70% 60% at 50% 48%, #282d38 0%, #151820 58%, #08090d 100%);
  }
  .opp { display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 12px; font-size: 13px; }
  
  /* Opponent 3D Domino Backs with Gold Seal */
  .backs { display: flex; }
  .backs .back {
    width: 28px;
    height: 42px;
    margin-left: -12px;
    border-radius: 6px;
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 235, 170, 0.35) 0%, transparent 60%),
      linear-gradient(145deg, #fff2c4 0%, #f7cf5a 25%, #d8961d 60%, #9e6005 100%);
    border: 1px solid rgba(255, 235, 170, 0.7);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 240, 0.95),
      inset 0 -1px 1px rgba(80, 40, 0, 0.45),
      0 1px 0 #b37a18,
      0 2px 0 #8a5304,
      0 4px 8px rgba(0, 0, 0, 0.5);
    position: relative;
    display: grid;
    place-items: center;
    transition: transform 0.2s ease;
  }
  .backs .back:first-child { margin-left: 0; }
  .backs .back .back-crest {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff1b0 0%, #e5b035 45%, #8c5b0d 85%);
    border: 1px solid rgba(90, 55, 5, 0.4);
    box-shadow: inset 0 0.5px 0.5px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.4);
    opacity: 0.9;
    display: block;
  }
  .chain-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
  .chain { display: flex; align-items: center; gap: 3px; }
  .hint { text-align: center; color: rgba(255,255,255,.8); font-size: 13px; padding-bottom: 10px; font-weight: 500; }
  
  /* Wooden Rack for Player Hand */
  .hand-zone {
    background:
      linear-gradient(180deg, rgba(25, 16, 9, 0.98) 0%, #160c05 18%, #291508 50%, #180a03 85%, #0d0502 100%);
    border-top: 2px solid #b88636;
    box-shadow:
      0 -8px 24px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 240, 190, 0.35);
    padding: 8px 0 14px;
    position: relative;
  }
  .hand-zone::before {
    content: "";
    position: absolute;
    top: 0; left: 24px; right: 24px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 74, 0.8) 50%, transparent 100%);
  }
  .hand-label {
    display: flex; justify-content: space-between;
    padding: 0 18px 6px; color: var(--mute); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  }
  .hand {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 18px 12px;
    perspective: 500px;
  }
  .hand::-webkit-scrollbar { height: 0; }
  .hand .tile {
    transform: rotateX(6deg) translateY(-2px);
    transform-origin: bottom center;
  }
  .hand .tile:hover, .hand .tile.playable:hover {
    transform: rotateX(0deg) translateY(-10px) scale(1.04);
    z-index: 10;
  }

  /* 3D PRO DOMINO TILES */
  /* PRO ORO CALIENTE 24K & ZAFIRO 3D DOMINO TILES (Faithfully matching pro.jpg) */
  .tile {
    position: relative;
    background: linear-gradient(145deg, #fff3cf 0%, #fad575 16%, #e5a428 42%, #b57011 75%, #7a4603 100%);
    border-radius: 9px;
    display: flex;
    flex: none;
    box-sizing: border-box;
    border: 1px solid rgba(255, 238, 175, 0.65);
    /* 3D Chamfered Edge + Multi-layered Metallic Extrusion + Cast Shadow on Table */
    box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 240, 0.95),
      inset 1.5px 0 2px rgba(255, 245, 190, 0.8),
      inset -1.5px 0 2.5px rgba(80, 40, 0, 0.5),
      inset 0 -2px 3px rgba(60, 25, 0, 0.6),
      0 1px 0 #cf9426,
      0 2px 0 #b57c15,
      0 3px 0 #966107,
      0 4px 0 #764903,
      0 5px 1px rgba(0, 0, 0, 0.28),
      0 8px 18px rgba(0, 0, 0, 0.55),
      0 16px 28px rgba(0, 0, 0, 0.35);
    transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.16s ease;
  }
  .tile::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 8px;
    background: linear-gradient(125deg, rgba(255, 248, 220, 0.45) 0%, rgba(255, 230, 150, 0.12) 30%, transparent 60%);
    pointer-events: none;
    z-index: 2;
  }
  .tile.v { width: 54px; height: 98px; flex-direction: column; }
  .tile.h { width: 60px; height: 34px; flex-direction: row; }
  .tile.d { width: 34px; height: 60px; flex-direction: column; }
  .tile .face {
    all: unset;
    display: flex;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }
  .tile.v .face, .tile.d .face { flex-direction: column; }
  .tile.h .face { flex-direction: row; }

  /* Recessed Dark Horizontal Slot (as in pro.jpg) */
  .seam {
    position: relative;
    background: linear-gradient(180deg, #160e03 0%, #2e1c05 50%, #120a01 100%);
    box-shadow: 0 1px 0 rgba(255, 235, 170, 0.8), inset 0 1px 1.5px rgba(0, 0, 0, 0.9);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
  .tile.v .seam, .tile.d .seam { height: 2.5px; margin: 0 4px; }
  .tile.h .seam { width: 2.5px; margin: 4px 0; }
  
  .spinner {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffeaa7 30%, #f3cb52 55%, #b47a18 85%, #593902 100%);
    box-shadow:
      0 1.5px 3px rgba(0, 0, 0, 0.75),
      0 0 1px rgba(0,0,0,0.85),
      inset 0 1px 1px rgba(255, 255, 255, 0.95);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }
  .spinner.mini { width: 4.5px; height: 4.5px; }

  .half {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 4px;
    position: relative;
    z-index: 1;
  }

  /* Deep Concave Jewel Pips with Gold Specular Bounce (as in pro.jpg) */
  .pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    justify-self: center;
    align-self: center;
    position: relative;
    background: radial-gradient(circle at 48% 45%, #182e4e 0%, #0d1c31 52%, #050a12 100%);
    box-shadow:
      0 1px 1px rgba(255, 230, 130, 0.85),        /* Bottom golden specular rim reflection */
      inset 0 2px 2.5px rgba(0, 0, 0, 0.98),       /* Deep inner drop shadow (spherical cup) */
      inset 0 -1.2px 2px rgba(240, 185, 55, 0.7); /* Curved specular bounce light inside cavity */
  }
  .pip::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1.5px;
    width: 2.5px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    filter: blur(0.2px);
    pointer-events: none;
  }

  /* 3D VIBRANT JEWEL COLORED PIPS (1 to 9) */
  .pip.pip-1 {
    background: radial-gradient(circle at 45% 40%, #67e8f9 0%, #06b6d4 55%, #0e4c63 100%) !important;
    box-shadow: 0 0.8px 1px rgba(6, 182, 212, 0.65), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(6, 182, 212, 0.7) !important;
  }
  .pip.pip-2 {
    background: radial-gradient(circle at 45% 40%, #86efac 0%, #22c55e 55%, #14532d 100%) !important;
    box-shadow: 0 0.8px 1px rgba(34, 197, 94, 0.65), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(34, 197, 94, 0.7) !important;
  }
  .pip.pip-3 {
    background: radial-gradient(circle at 45% 40%, #fca5a5 0%, #ef4444 55%, #7f1d1d 100%) !important;
    box-shadow: 0 0.8px 1px rgba(239, 68, 68, 0.65), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(239, 68, 68, 0.7) !important;
  }
  .pip.pip-4 {
    background: radial-gradient(circle at 45% 40%, #d8b4fe 0%, #a855f7 55%, #581c87 100%) !important;
    box-shadow: 0 0.8px 1px rgba(168, 85, 247, 0.65), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(168, 85, 247, 0.7) !important;
  }
  .pip.pip-5 {
    background: radial-gradient(circle at 45% 40%, #93c5fd 0%, #3b82f6 55%, #1e3a8a 100%) !important;
    box-shadow: 0 0.8px 1px rgba(59, 130, 246, 0.65), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(59, 130, 246, 0.7) !important;
  }
  .pip.pip-6 {
    background: radial-gradient(circle at 45% 40%, #fde047 0%, #f59e0b 55%, #78350f 100%) !important;
    box-shadow: 0 0.8px 1px rgba(245, 158, 11, 0.75), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(245, 158, 11, 0.7) !important;
  }
  .pip.pip-7 {
    background: radial-gradient(circle at 45% 40%, #f9a8d4 0%, #ec4899 55%, #701a75 100%) !important;
    box-shadow: 0 0.8px 1px rgba(236, 72, 153, 0.65), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(236, 72, 153, 0.7) !important;
  }
  .pip.pip-8 {
    background: radial-gradient(circle at 45% 40%, #5eead4 0%, #14b8a6 55%, #134e4a 100%) !important;
    box-shadow: 0 0.8px 1px rgba(20, 184, 166, 0.65), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(20, 184, 166, 0.7) !important;
  }
  .pip.pip-9 {
    background: radial-gradient(circle at 45% 40%, #fda4af 0%, #e11d48 55%, #4c0519 100%) !important;
    box-shadow: 0 0.8px 1px rgba(225, 29, 72, 0.75), inset 0 1.6px 2.2px rgba(0, 0, 0, 0.95), inset 0 -1.2px 1.5px rgba(225, 29, 72, 0.7) !important;
  }

  .hand.dealing .tile { animation: deal .45s ease both; }
  .hand .tile:nth-child(2) { animation-delay: .04s; }
  .hand .tile:nth-child(3) { animation-delay: .08s; }
  .hand .tile:nth-child(4) { animation-delay: .12s; }
  .hand .tile:nth-child(5) { animation-delay: .16s; }
  .hand .tile:nth-child(6) { animation-delay: .2s; }
  .hand .tile:nth-child(7) { animation-delay: .24s; }
  .hand .tile:nth-child(8) { animation-delay: .28s; }
  .hand .tile:nth-child(9) { animation-delay: .32s; }
  .chain .tile.fresh { animation: drop .4s ease both; }

  .tile.playable {
    animation: offer 1.4s ease-in-out infinite;
    box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 240, 0.95),
      0 1px 0 #cf9426,
      0 2px 0 #b57c15,
      0 3px 0 #966107,
      0 0 0 2.5px #f0c14a,
      0 0 20px rgba(240, 193, 74, 0.85),
      0 14px 26px rgba(0, 0, 0, 0.6);
    transform: translateY(-5px);
    cursor: pointer;
  }
  .tile.playable:active {
    transform: translateY(-1px) scale(0.98);
  }
  .tile.locked { opacity: .35; filter: grayscale(0.4); }
  .tile.locked .face { cursor: default; }

  /* Skins */
  body.skin-classic .tile {
    background: linear-gradient(150deg, #ffffff 0%, #faf6ee 25%, #f4ece0 65%, #e8dcce 92%, #d7c7b5 100%);
    border-color: rgba(195, 175, 145, 0.45);
    box-shadow:
      inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
      0 1px 0 #d9cca8, 0 2px 0 #cfbe95, 0 3px 0 #bfab7e,
      0 8px 18px rgba(0, 0, 0, 0.42);
  }
  body.skin-classic .tile .pip {
    background: #12151c !important;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 1.5px 2px rgba(0, 0, 0, 0.85);
  }
  /* Skins: Obsidiana Negra, Mármol Imperial, Salón Joya */
  body.skin-obsidian .tile {
    background: linear-gradient(150deg, #2a2d36 0%, #1a1c22 30%, #101217 70%, #08090c 100%);
    border-color: rgba(240, 193, 74, 0.4);
    box-shadow:
      inset 0 1.5px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.8),
      0 1px 0 #1c1e24,
      0 2px 0 #14151a,
      0 3px 0 #0d0e12,
      0 8px 18px rgba(0, 0, 0, 0.6);
  }
  body.skin-obsidian .tile .seam {
    background: linear-gradient(180deg, rgba(240, 193, 74, 0.5), rgba(15, 15, 15, 0.9));
    box-shadow: 0 1px 0 rgba(240, 193, 74, 0.3);
  }
  body.skin-obsidian .tile .pip {
    background: radial-gradient(circle at 35% 35%, #fff8dc 0%, #f5cf5e 40%, #b8831e 80%, #613e02 100%) !important;
    box-shadow:
      0 1px 1px rgba(0, 0, 0, 0.8),
      inset 0 1px 1.5px rgba(0, 0, 0, 0.6),
      0 0 3px rgba(240, 193, 74, 0.5);
  }
  body.skin-marble .tile {
    background:
      radial-gradient(ellipse at 30% 20%, rgba(240, 193, 74, 0.12), transparent 50%),
      linear-gradient(135deg, #ffffff 0%, #f6f8f9 35%, #e8eef2 70%, #d5dde3 100%);
    border-color: rgba(180, 200, 215, 0.5);
  }
  body.skin-marble .tile .pip {
    background: #0d1a2d !important;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 1.5px 2px rgba(0, 0, 0, 0.9);
  }

  /* Skin Selection UI in Profile */
  .skin-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .skin-btn {
    background: var(--panel);
    border: 1px solid rgba(242, 193, 77, 0.25);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ivory);
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .skin-btn.on {
    border-color: var(--brass);
    box-shadow: 0 0 0 1.5px var(--brass), 0 8px 16px rgba(0,0,0,0.3);
    background: rgba(242, 193, 77, 0.12);
  }
  .skin-sample {
    width: 100%;
    height: 18px;
    border-radius: 4px;
    margin-bottom: 4px;
    display: block;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .skin-sample.pro { background: linear-gradient(90deg, #f7ded3, #d79e8b, #9b5f4d); border-color: #f2a792; }
  .skin-sample.classic { background: linear-gradient(90deg, #ffffff, #e5d8c3); }
  .skin-sample.jewel { background: linear-gradient(90deg, #1558b0, #108043, #ab1a2d); }
  .skin-sample.obsidian { background: linear-gradient(90deg, #1d2028, #07080b); border-color: #f0c14a; }
  .skin-sample.marble { background: linear-gradient(90deg, #ffffff, #d8e2e8); }
  .skin-btn b { font-size: 13px; line-height: 1.2; }
  .skin-btn small { font-size: 11px; color: #c9bcab; }

  /* Menu Card: Jugar con Bot */
  .menu-card-bot {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 11px;
    background:
      linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(242, 193, 77, 0.08) 55%, transparent 100%),
      var(--panel);
    border: 1px solid rgba(242, 193, 77, 0.45);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    color: var(--ivory);
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    transition: transform 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
  }
  .menu-card-bot:active { transform: scale(0.98); }
  .menu-card-bot:hover {
    border-color: rgba(242, 193, 77, 0.75);
    box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 0 16px rgba(56, 189, 248, 0.18);
  }
  .bot-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .card-ico-bot {
    background: radial-gradient(circle at 35% 35%, rgba(56, 189, 248, 0.35) 0%, rgba(14, 30, 52, 0.95) 100%);
    border-color: rgba(56, 189, 248, 0.6);
  }
  .bot-tag {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #38bdf8;
    margin-bottom: 2px;
    text-transform: uppercase;
  }
  .bot-text b {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 2px;
  }
  .bot-text small {
    display: block;
    font-size: 11.5px;
    color: #c9bcab;
    line-height: 1.2;
  }
  .bot-action-badge {
    background: linear-gradient(135deg, rgba(240, 193, 74, 0.25) 0%, rgba(240, 193, 74, 0.08) 100%);
    border: 1px solid rgba(240, 193, 74, 0.5);
    border-radius: 999px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f0c14a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex: none;
  }

  /* Table Controls & Felt Theme Switcher */
  .mesa-header-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 0;
  }
  .felt-color-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(240, 193, 74, 0.4);
    border-radius: 999px;
    padding: 5px 12px;
    color: #f0c14a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .felt-color-btn:active { transform: scale(0.95); }
  .felt-color-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563eb;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
  }
  .pass-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a0f02;
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    animation: pulsePass 1.5s infinite;
  }
  @keyframes pulsePass {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); box-shadow: 0 0 12px rgba(245, 158, 11, 0.7); }
  }
  .pass-btn.hide { display: none; }

  /* Elección de salida por parejas */
  .cede-btn {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #fff;
    border: 1px solid rgba(254, 240, 138, 0.5);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    animation: pulsePass 1.8s infinite;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .cede-btn.hide { display: none !important; }
  .cede-btn:hover { filter: brightness(1.15); transform: scale(1.04); }
  .cede-btn:active { transform: scale(0.96); }

  .lead-choice-pill {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    background: rgba(15, 23, 42, 0.94);
    border: 1.5px solid #f0c14a;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 12px rgba(240, 193, 74, 0.35);
    color: #fff;
    font-size: 13px;
    z-index: 40;
    white-space: nowrap;
    backdrop-filter: blur(8px);
  }
  .lead-choice-pill .lcp-msg { color: #fde047; font-weight: 600; }
  .lead-choice-pill .lcp-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s, filter 0.15s;
  }
  .lead-choice-pill .lcp-btn:hover { transform: scale(1.05); filter: brightness(1.1); }
  .lead-choice-pill .lcp-btn:active { transform: scale(0.96); }

  /* Felt Choices in Profile */
  .felt-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }
  .felt-btn {
    background: var(--panel);
    border: 1px solid rgba(242, 193, 77, 0.25);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ivory);
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .felt-btn.on {
    border-color: var(--brass);
    box-shadow: 0 0 0 1.5px var(--brass), 0 8px 16px rgba(0,0,0,0.3);
    background: rgba(242, 193, 77, 0.12);
  }
  .felt-sample {
    width: 100%;
    height: 18px;
    border-radius: 4px;
    margin-bottom: 4px;
    display: block;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .felt-sample.blue { background: linear-gradient(90deg, #1f4a7a, #081628); border-color: #3b82f6; }
  .felt-sample.green { background: linear-gradient(90deg, #1c8c52, #042214); border-color: #22c55e; }
  .felt-sample.red { background: linear-gradient(90deg, #781c32, #26060e); border-color: #ef4444; }
  .felt-sample.dark { background: linear-gradient(90deg, #262a34, #090a0d); border-color: #94a3b8; }
  .felt-btn b { font-size: 13px; line-height: 1.2; }
  .felt-btn small { font-size: 11px; color: #c9bcab; }

  /* End of Round Modal */
  .end-modal {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 22, 0.88);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .end-modal.on { opacity: 1; pointer-events: auto; }
  .end-box {
    position: relative;
    background: linear-gradient(180deg, rgba(30, 45, 68, 0.95), rgba(14, 24, 38, 0.98));
    border: 1.5px solid rgba(240, 193, 74, 0.6);
    border-radius: 24px;
    padding: 24px 20px;
    max-width: 320px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(240, 193, 74, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .modal-corner-back {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(240, 193, 74, 0.35);
    color: var(--brass);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
    z-index: 2;
  }
  .modal-corner-back:hover {
    background: rgba(240, 193, 74, 0.22);
    color: #fff;
    transform: translateX(-2px);
    border-color: rgba(240, 193, 74, 0.6);
  }
  .modal-corner-back:active {
    transform: scale(0.92);
  }
  .end-box-ico { font-size: 46px; }
  .end-box-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0; }
  .end-box-desc { font-size: 13.5px; color: #cbd5e1; margin: 0; line-height: 1.4; }
  .end-box-btn {
    margin-top: 6px;
    background: linear-gradient(135deg, #f0c14a, #d49c25);
    color: #2b1802;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    padding: 12px 24px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(240, 193, 74, 0.35);
    width: 100%;
  }
  .end-box-btn:active { transform: scale(0.97); }
  .endcap { box-shadow: 0 8px 14px rgba(0,0,0,.28), 0 0 0 2px rgba(226,177,90,.9); }
  .toast {
    position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%);
    background: rgba(20, 50, 74, .92); color: white; border-radius: 999px; padding: 8px 14px;
    font-size: 13px; opacity: 0; pointer-events: none;
  }
  .toast.on { opacity: 1; }
  .tabs.hide { display: none; }
  .wallet { margin: 4px 0 14px; padding: 14px 16px; }
  .wallet b { display: block; font-family: Fraunces, serif; font-size: 28px; font-weight: 560; color: var(--brass); }
  .emoji-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .emoji-item { text-align: center; padding: 14px 10px 12px; }
  .emoji-item .glyph { font-size: 40px; line-height: 1.15; }
  .emoji-item > b { font-size: 14px; }
  .emoji-item .buy {
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    background: linear-gradient(180deg, #f6d27a, #e2a83a);
    color: #3a2508;
    font-size: 12px;
    font-weight: 600;
  }
  .emoji-item.owned { border-color: rgba(226,177,90,.85); }
  .emoji-item .buy.have { background: rgba(46, 184, 110, .18); color: #b6f0cc; }
  .emoji-item .buy.short { background: rgba(255,255,255,.08); color: #cbbda8; }
  .search::placeholder { color: #b7aa96; }
  .reacts { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px 0; }
  .reacts::-webkit-scrollbar { height: 0; }
  .reacts button {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    border: 1px solid rgba(242,193,77,.45);
    background: rgba(255,255,255,.08);
    font-size: 22px;
  }
  .react-pop {
    position: absolute; left: 50%; top: 46%; z-index: 2;
    transform: translate(-50%, -40%) scale(.7);
    font-size: 78px; line-height: 1; opacity: 0; pointer-events: none;
    filter: drop-shadow(0 12px 16px rgba(0,0,0,.35));
    transition: transform .18s ease, opacity .18s ease;
  }
  .react-pop.on { opacity: 1; transform: translate(-50%, -52%) scale(1); }
  .edge-tiles { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
  .piece {
    width: 25px; height: 46px; border-radius: 5px; flex: none;
    background: linear-gradient(145deg, #fff2c4 0%, #f7cf5a 30%, #d8961d 65%, #9e6005 100%);
    border: 1px solid rgba(255, 235, 170, 0.65);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 240, 0.95),
      0 1px 0 #b37a18,
      0 2px 0 #8a5304,
      0 4px 10px rgba(0, 0, 0, 0.55);
    display: flex; flex-direction: column; padding: 2px;
    position: relative;
  }
  .piece.h { width: 46px; height: 26px; flex-direction: row; }
  .dhalf { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
  .dhalf i { width: 3px; height: 3px; border-radius: 50%; justify-self: center; align-self: center; }
  .dhalf i.on { background: #1b1712; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
  .dseam { background: rgba(80,55,25,.4); flex: none; }
  .piece.h .dseam { width: 1px; margin: 3px 0; }
  .piece:not(.h) .dseam { height: 1px; margin: 0 3px; }
  .piece.deco { position: absolute; animation: drift 7s ease-in-out infinite; }
  /* 3D PRO HERO DOMINO TILES SHOWCASE WITH REAL FIRE */
  .hero-showcase {
    position: relative;
    width: 140px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    perspective: 1000px;
    transform-style: preserve-3d;
    margin-right: 2px;
  }
  .hero-showcase::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 85px;
    bottom: -2px;
    left: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 80%, rgba(255, 110, 0, 0.65) 0%, rgba(240, 60, 0, 0.35) 45%, rgba(180, 20, 0, 0.1) 70%, transparent 85%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
    animation: heroHalo 3.2s ease-in-out infinite alternate;
  }
  @keyframes heroHalo {
    0% { transform: scale(0.92); opacity: 0.7; }
    100% { transform: scale(1.18); opacity: 1; }
  }

  /* Fire Layers for Hero Dominoes */
  .hero-fire-layer {
    position: absolute;
    pointer-events: none;
  }
  .hero-fire-bg {
    bottom: -6px;
    left: -14px;
    width: 168px;
    height: 118px;
    z-index: 1;
    overflow: visible;
  }
  .hero-fire-fg {
    bottom: -4px;
    left: -10px;
    width: 160px;
    height: 24px;
    z-index: 7;
    overflow: visible;
  }
  .hero-heat-pulse {
    position: absolute;
    bottom: 0px;
    left: 8%;
    width: 84%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 85%, rgba(255, 140, 0, 0.8) 0%, rgba(255, 60, 0, 0.5) 40%, rgba(200, 20, 0, 0.2) 65%, transparent 80%);
    filter: blur(8px);
    animation: heroFireFlicker 2.8s ease-in-out infinite alternate;
  }
  .hero-fire-img {
    position: absolute;
    pointer-events: none;
    user-select: none;
  }
  .hero-fire-back {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: brightness(1.28) contrast(1.22) drop-shadow(0 0 14px rgba(255, 90, 0, 0.85));
    animation: heroFireBackLick 3.2s ease-in-out infinite alternate;
  }
  .hero-fire-front {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    mix-blend-mode: screen;
    opacity: 0.74;
    filter: brightness(1.35) contrast(1.25) drop-shadow(0 -2px 6px rgba(255, 120, 0, 0.7));
    animation: heroFireFrontLick 2.5s ease-in-out infinite alternate;
  }

  @keyframes heroFireBackLick {
    0% { transform: scaleY(0.96) translateY(0); filter: brightness(1.18) contrast(1.2); }
    50% { transform: scaleY(1.05) translateY(-3px) scaleX(1.02); filter: brightness(1.32) contrast(1.3); }
    100% { transform: scaleY(0.98) translateY(1px) scaleX(0.98); filter: brightness(1.2) contrast(1.22); }
  }
  @keyframes heroFireFrontLick {
    0% { transform: scaleY(0.94) translateY(0); opacity: 0.8; }
    50% { transform: scaleY(1.06) translateY(-2px) scaleX(1.03); opacity: 0.98; }
    100% { transform: scaleY(0.96) translateY(1px); opacity: 0.85; }
  }
  @keyframes heroFireFlicker {
    0% { opacity: 0.65; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1.08); }
  }

  /* Animated Floating Sparks & Embers */
  .hero-embers-bed {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
  }
  .hero-spark {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 15%, #ffea79 45%, #ff5722 80%, transparent 100%);
    box-shadow: 0 0 6px #ff8800, 0 0 10px #ff3700;
    pointer-events: none;
    opacity: 0;
  }
  .hero-spark.s1 { width: 3px; height: 3px; left: 24%; bottom: 12px; animation: heroSparkRise 2.8s ease-in infinite 0.2s; }
  .hero-spark.s2 { width: 4px; height: 4px; left: 42%; bottom: 16px; animation: heroSparkRise 2.4s ease-in infinite 0.7s; }
  .hero-spark.s3 { width: 3.5px; height: 3.5px; left: 56%; bottom: 10px; animation: heroSparkRise 3.1s ease-in infinite 1.1s; }
  .hero-spark.s4 { width: 2.5px; height: 2.5px; left: 72%; bottom: 14px; animation: heroSparkRise 2.6s ease-in infinite 0.4s; }
  .hero-spark.s5 { width: 3px; height: 3px; left: 34%; bottom: 18px; animation: heroSparkRise 3.4s ease-in infinite 1.6s; }
  .hero-spark.s6 { width: 4px; height: 4px; left: 65%; bottom: 15px; animation: heroSparkRise 2.9s ease-in infinite 1.9s; }
  .hero-spark.s7 { width: 2.5px; height: 2.5px; left: 18%; bottom: 8px; animation: heroSparkRise 3.2s ease-in infinite 0.9s; }
  .hero-spark.s8 { width: 3px; height: 3px; left: 82%; bottom: 10px; animation: heroSparkRise 2.7s ease-in infinite 1.4s; }

  @keyframes heroSparkRise {
    0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    15% { opacity: 1; transform: translateY(-10px) translateX(-2px) scale(1.1); }
    50% { transform: translateY(-38px) translateX(4px) scale(0.9); opacity: 0.85; }
    85% { opacity: 0.5; transform: translateY(-68px) translateX(-3px) scale(0.7); }
    100% { transform: translateY(-90px) translateX(6px) scale(0.3); opacity: 0; }
  }

  .tile.hero-tile {
    position: absolute;
    width: 42px;
    height: 76px;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    background: linear-gradient(150deg, #fff7dc 0%, #ffdf7c 18%, #f59e0b 44%, #d97706 72%, #9a3412 100%) !important;
    border: 1px solid rgba(255, 235, 160, 0.85) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.28s ease;
    transform-style: preserve-3d;
  }
  .tile.hero-tile .face {
    flex-direction: column;
    padding: 1px 0;
  }
  .tile.hero-tile .half {
    padding: 2.5px 3.5px;
    gap: 1px;
  }
  .tile.hero-tile .pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .tile.hero-tile .pip::after {
    top: 0.6px;
    left: 1px;
    width: 1.8px;
    height: 1.4px;
    background: rgba(255, 255, 255, 0.75);
    filter: blur(0.2px);
  }
  .tile.hero-tile .seam {
    height: 2px;
    margin: 0 3px;
    background: linear-gradient(180deg, #1b0e02 0%, #451a03 50%, #150a01 100%);
    box-shadow: 0 1px 0 rgba(255, 235, 170, 0.8), inset 0 1px 1.5px rgba(0, 0, 0, 0.9);
  }
  .tile.hero-tile .spinner {
    width: 5.5px;
    height: 5.5px;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffeaa7 30%, #f59e0b 60%, #b45309 85%, #451a03 100%);
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.8), 0 1.2px 2.5px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  }

  /* Left Tile: [9|6] - Heated Molten Gold & Fire Extrusion */
  .tile.hero-tile-left {
    left: 7px;
    top: 10px;
    z-index: 3;
    transform: rotateY(-7deg) rotateX(11deg) rotateZ(-15deg);
    box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 240, 0.95),
      inset 1.5px 0 2px rgba(255, 240, 180, 0.85),
      inset -1.5px 0 2px rgba(220, 38, 38, 0.65),
      inset 0 -2.5px 3px rgba(185, 28, 28, 0.75),
      -1px 1px 0 #fbbf24,
      -2px 2px 0 #f97316,
      -3px 3px 0 #ea580c,
      -4px 4px 0 #dc2626,
      -5px 5px 0 #991b1b,
      0 4px 16px rgba(255, 75, 0, 0.6),
      -6px 8px 16px rgba(0, 0, 0, 0.7),
      -10px 14px 24px rgba(0, 0, 0, 0.5);
    animation: heroFloatLeft 4.5s ease-in-out infinite;
  }
  /* Center Tile: [9|9] Doble Nueve (Blazing Hero Lead with Molten Magma 3D Extrusion) */
  .tile.hero-tile-center {
    left: 47px;
    top: 4px;
    z-index: 5;
    transform: rotateY(-13deg) rotateX(8deg) rotateZ(-1deg) scale(1.1);
    box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 245, 0.98),
      inset 1.5px 0 2.5px rgba(255, 235, 140, 0.92),
      inset -2px 0 3px rgba(255, 69, 0, 0.75),
      inset 0 -3.5px 4px rgba(220, 38, 38, 0.85),
      -1px 1px 0 #fde047,
      -2px 2px 0 #fbbf24,
      -3px 3px 0 #f97316,
      -4px 4px 0 #ea580c,
      -5px 5px 0 #dc2626,
      -6px 6px 0 #991b1b,
      -7px 7px 1px rgba(35, 5, 5, 0.6),
      0 0 24px rgba(255, 90, 0, 0.7),
      0 8px 24px rgba(255, 40, 0, 0.45),
      -12px 14px 22px rgba(0, 0, 0, 0.75);
    animation: heroFloatCenter 4s ease-in-out infinite;
  }
  /* Right Tile: [9|4] - Heated Molten Gold & Fire Extrusion */
  .tile.hero-tile-right {
    left: 88px;
    top: 10px;
    z-index: 4;
    transform: rotateY(15deg) rotateX(10deg) rotateZ(13deg);
    box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 240, 0.95),
      inset 1.5px 0 2px rgba(255, 240, 180, 0.85),
      inset -1.5px 0 2px rgba(220, 38, 38, 0.65),
      inset 0 -2.5px 3px rgba(185, 28, 28, 0.75),
      1px 1px 0 #fbbf24,
      2px 2px 0 #f97316,
      3px 3px 0 #ea580c,
      4px 4px 0 #dc2626,
      5px 5px 0 #991b1b,
      0 4px 16px rgba(255, 75, 0, 0.6),
      8px 12px 20px rgba(0, 0, 0, 0.7),
      12px 16px 28px rgba(0, 0, 0, 0.5);
    animation: heroFloatRight 4.8s ease-in-out infinite;
  }

  /* Specular Gleam Sweep across Doble 9 */
  .tile.hero-lead {
    overflow: hidden;
  }
  .tile.hero-lead::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -70%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 248, 220, 0.55), transparent);
    transform: rotate(30deg);
    pointer-events: none;
    z-index: 4;
    animation: heroLeadGleam 4.6s ease-in-out infinite;
  }

  @keyframes heroLeadGleam {
    0%, 65% { transform: rotate(30deg) translateX(-80px); opacity: 0; }
    72% { opacity: 0.95; }
    82% { transform: rotate(30deg) translateX(120px); opacity: 0; }
    100% { opacity: 0; }
  }

  @keyframes heroFloatLeft {
    0%, 100% { transform: rotateY(-7deg) rotateX(11deg) rotateZ(-15deg) translateY(0); }
    50% { transform: rotateY(-10deg) rotateX(14deg) rotateZ(-17deg) translateY(-4px); }
  }
  @keyframes heroFloatCenter {
    0%, 100% { transform: rotateY(-13deg) rotateX(8deg) rotateZ(-1deg) translateY(0) scale(1.1); }
    50% { transform: rotateY(-9deg) rotateX(5deg) rotateZ(0deg) translateY(-7px) scale(1.15); }
  }
  @keyframes heroFloatRight {
    0%, 100% { transform: rotateY(15deg) rotateX(10deg) rotateZ(13deg) translateY(0); }
    50% { transform: rotateY(18deg) rotateX(8deg) rotateZ(15deg) translateY(-4px); }
  }

  /* Interactive Hover & Press on Hero Card */
  .hero:hover .tile.hero-tile-left {
    transform: rotateY(-11deg) rotateX(13deg) rotateZ(-19deg) translate(-4px, 1px);
  }
  .hero:hover .tile.hero-tile-center {
    transform: rotateY(-9deg) rotateX(5deg) rotateZ(0deg) translateY(-8px) scale(1.15);
  }
  .hero:hover .tile.hero-tile-right {
    transform: rotateY(18deg) rotateX(8deg) rotateZ(17deg) translate(4px, 1px);
  }
  .hero:active .hero-showcase {
    transform: scale(0.96);
  }
  .screen.on { animation: rise .4s ease; }
  #timer { color: var(--brass); }
  @keyframes drift {
    0%, 100% { transform: rotate(var(--r)) translateY(0); }
    50% { transform: rotate(calc(var(--r) + 7deg)) translateY(-8px); }
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-7px) rotate(5deg); }
  }
  @keyframes sheen {
    0%, 58% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
  }
  @keyframes deal {
    from { opacity: 0; transform: translateY(18px) rotate(6deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes drop {
    from { opacity: 0; transform: translateY(-14px) scale(.92); }
    to { opacity: 1; transform: none; }
  }
  @keyframes offer {
    0%, 100% { transform: translateY(-8px); }
    50% { transform: translateY(-15px); }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  /* SCREEN: TORNEO DE LAS SÚPER ESTRELLAS */
  .tourney-header { margin-bottom: 8px; }
  .tourney-badge-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--brass);
    background: rgba(240, 193, 74, 0.16);
    border: 1px solid rgba(240, 193, 74, 0.4);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 4px;
    text-transform: uppercase;
  }
  .tourney-hero-card {
    position: relative;
    border-radius: 18px;
    padding: 16px;
    color: white;
    overflow: hidden;
    background:
      radial-gradient(180px 100px at 100% 0%, rgba(242, 193, 77, 0.4), transparent 60%),
      linear-gradient(155deg, #183a62 0%, #0d233e 58%, #081220 100%);
    border: 1px solid rgba(240, 193, 74, 0.45);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
    margin-bottom: 14px;
  }
  .tourney-hero-content {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
  }
  .tourney-cup-box {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 230, 150, 0.3) 0%, rgba(240, 193, 74, 0.1) 70%);
    border: 1.5px solid rgba(240, 193, 74, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  }
  .tourney-cup-emoji { font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
  .tourney-cup-star { position: absolute; top: -4px; right: -4px; font-size: 15px; animation: starPulse 2s infinite ease-in-out; }
  @keyframes starPulse {
    0%, 100% { transform: scale(0.9); }
    50% { transform: scale(1.2) rotate(15deg); }
  }
  .tourney-hero-text { flex: 1; min-width: 0; }
  .tourney-status-live {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: .08em;
    margin-bottom: 2px;
  }
  .tourney-hero-text b {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: white;
    font-family: Fraunces, serif;
    letter-spacing: .02em;
    margin-bottom: 2px;
  }
  .tourney-hero-text p {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 4px;
  }
  .tourney-countdown {
    font-size: 11px;
    color: #fcd34d;
    font-weight: 600;
  }
  .tourney-enter-btn {
    width: 100%;
    border: 0;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
    color: #1a0f00;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .tourney-enter-btn:active {
    transform: scale(0.98);
  }
  .tourney-ranks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }
  .tourney-rank-item {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .tourney-rank-item.me-tourney {
    background: rgba(240, 193, 74, 0.12);
    border-color: rgba(240, 193, 74, 0.5);
    box-shadow: 0 4px 12px rgba(240, 193, 74, 0.15);
  }
  .tourney-user b {
    display: block;
    font-size: 14px;
    font-weight: 600;
  }
  .tourney-user .meta {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
  }
  .tourney-rank-item .pts {
    text-align: right;
  }
  .tourney-rank-item .pts b {
    display: block;
    font-family: Fraunces, serif;
    font-size: 18px;
    font-weight: 600;
    color: #f0c14a;
  }
  .tourney-rank-item .pts .meta {
    display: block;
    font-size: 10px;
    color: #94a3b8;
  }
  .tourney-pos {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    color: white;
    flex: none;
  }
  .tourney-pos.gold { background: linear-gradient(135deg, #fcd34d, #d97706); color: #1a0f00; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.6); }
  .tourney-pos.silver { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #0f172a; }
  .tourney-pos.bronze { background: linear-gradient(135deg, #fed7aa, #b45309); color: #2a1102; }
  .tourney-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  .tourney-ava {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
  }
  .tourney-ava.live {
    background: #0ea5e9;
    color: white;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.4);
  }
  .tourney-rules-card {
    padding: 14px 16px;
  }
  .tourney-rules-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tourney-rules-list strong { color: #f0c14a; }

  /* ── Autenticación (pantalla completa) ── */
  /* Cuando #auth está activa, el marco del teléfono se expande a toda la ventana */
  body:has(#auth.on) { padding: 0; background: #05080e; }
  body:has(#auth.on) .phone {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    background: #05080e;
  }
  body:has(#auth.on) .edge-tiles { display: none; }

  #auth { position: relative; overflow: hidden; background: #05080e; }
  .auth-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(60% 38% at 50% 108%, rgba(255,110,30,.30), transparent 70%),
      radial-gradient(48% 30% at 50% 100%, rgba(240,193,74,.20), transparent 70%),
      radial-gradient(70% 34% at 50% -6%, rgba(240,193,74,.12), transparent 70%),
      radial-gradient(40% 40% at 12% 30%, rgba(255,90,30,.06), transparent 70%);
    animation: authEmber 7s ease-in-out infinite alternate;
  }
  @keyframes authEmber {
    from { opacity: .75; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.04); }
  }
  .auth-scroll {
    position: relative;
    display: flex;
    padding: calc(28px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  }
  .auth-wrap {
    width: 100%;
    max-width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
  }

  .auth-head { text-align: center; margin-bottom: 30px; }
  .auth-logo-wrap {
    width: 84px; height: 84px;
    margin: 0 auto 16px;
    border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(240,193,74,.35), 0 0 46px rgba(255,120,40,.35), 0 14px 30px rgba(0,0,0,.6);
  }
  .auth-logo { width: 100%; height: 100%; border-radius: 24px; object-fit: cover; display: block; }
  .auth-title {
    font-family: Fraunces, serif;
    font-size: 34px;
    font-weight: 640;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -.01em;
    background: linear-gradient(180deg, #fff6df 20%, #f0c14a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .auth-sub { margin: 8px 0 0; font-size: 14.5px; color: rgba(247,241,230,.62); }

  .auth-social { display: grid; gap: 10px; }
  .auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    color: var(--ivory);
    font-size: 15px;
    font-weight: 500;
    transition: background .2s, border-color .2s, transform .12s;
  }
  .auth-social-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); }
  .auth-social-btn:active { transform: scale(.98); }
  .auth-social-btn svg { flex: none; }

  .auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(247,241,230,.42);
  }
  .auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240,193,74,.3), transparent);
  }

  .auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .auth-action {
    padding: 13px 10px;
    border-radius: 16px;
    border: 1px solid rgba(240,193,74,.28);
    background: transparent;
    color: var(--ivory);
    font-size: 14.5px;
    font-weight: 600;
    transition: background .2s, border-color .2s, color .2s, transform .12s;
  }
  .auth-action.primary {
    background: linear-gradient(180deg, #f6d78a, var(--brass) 55%, #c4892e);
    border-color: transparent;
    color: #2a1c08;
  }
  .auth-action:active { transform: scale(.98); }
  .auth-action.on { box-shadow: 0 0 0 2px #05080e, 0 0 0 3.5px rgba(240,193,74,.7); }
  .auth-action:not(.primary).on { background: rgba(240,193,74,.12); color: var(--brass); }

  /* Formularios desplegables */
  .auth-form {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s ease, opacity .25s ease;
  }
  .auth-form.on { grid-template-rows: 1fr; opacity: 1; }
  .auth-form-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 2px;
  }
  .auth-form.on .auth-form-inner { padding-top: 18px; }
  .auth-field { display: block; margin-bottom: 12px; }
  .auth-field > span {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: rgba(247,241,230,.6);
    margin-bottom: 6px;
  }
  .auth-count { color: rgba(247,241,230,.35); font-size: 11px; }
  .auth-field input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.035);
    color: var(--ivory);
    padding: 13px 14px;
    transition: border-color .2s, background .2s;
  }
  .auth-field input::placeholder { color: rgba(247,241,230,.3); }
  .auth-field input:focus { outline: none; border-color: rgba(240,193,74,.6); background: rgba(240,193,74,.04); }
  .auth-field input.invalid { border-color: rgba(248,113,113,.7); }

  .auth-link {
    align-self: flex-end;
    border: 0;
    background: none;
    padding: 0;
    margin: -2px 0 6px;
    color: var(--brass);
    font-size: 12.5px;
    font-weight: 500;
  }
  .auth-error {
    min-height: 18px;
    margin: 2px 0 8px;
    font-size: 12.5px;
    color: #f87171;
  }
  .auth-submit {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, #f6d78a, var(--brass) 55%, #c4892e);
    color: #2a1c08;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(240,160,60,.22);
    transition: transform .12s, opacity .15s, filter .15s;
  }
  .auth-submit:active { transform: scale(.98); }
  .auth-submit:disabled { opacity: .4; filter: grayscale(.4); cursor: not-allowed; box-shadow: none; transform: none; }

  /* Selector de idioma */
  .auth-lang {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 26px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
  }
  .auth-lang-ico { width: 16px; height: 16px; margin-right: 4px; flex: none; }
  .auth-lang-ico circle, .auth-lang-ico path { fill: none; stroke: rgba(247,241,230,.5); stroke-width: 1.5; }
  .auth-lang button {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: transparent;
    color: rgba(247,241,230,.6);
    font-size: 13px;
    font-weight: 600;
    transition: background .2s, color .2s;
  }
  .auth-lang button span { font-weight: 500; opacity: .7; }
  .auth-lang button:hover { color: var(--ivory); }
  .auth-lang button.on { background: rgba(240,193,74,.16); color: var(--brass); box-shadow: inset 0 0 0 1px rgba(240,193,74,.45); }
  .auth-lang button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

  /* Captcha (maqueta) */
  .auth-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 4px 0 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
  }
  .captcha-box {
    position: relative;
    width: 28px; height: 28px;
    flex: none;
    padding: 0;
    border-radius: 7px;
    border: 2px solid rgba(242,193,77,.55);
    background: rgba(0,0,0,.3);
    display: grid;
    place-items: center;
    transition: border-color .2s, background .2s;
  }
  .captcha-spinner {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2.5px solid rgba(240,193,74,.25);
    border-top-color: var(--brass);
    opacity: 0;
  }
  .captcha-tick { width: 20px; height: 20px; opacity: 0; }
  .captcha-tick path {
    fill: none;
    stroke: #4ade80;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
  }
  .auth-captcha.verifying .captcha-box { border-color: transparent; background: transparent; }
  .auth-captcha.verifying .captcha-spinner { opacity: 1; animation: captchaSpin .7s linear infinite; }
  .auth-captcha.verified .captcha-box { border-color: rgba(74,222,128,.6); background: rgba(74,222,128,.1); }
  .auth-captcha.verified .captcha-tick { opacity: 1; }
  .auth-captcha.verified .captcha-tick path { animation: captchaDraw .35s ease forwards; }
  @keyframes captchaSpin { to { transform: rotate(360deg); } }
  @keyframes captchaDraw { to { stroke-dashoffset: 0; } }
  .captcha-label { flex: 1; font-size: 14px; color: var(--ivory); }
  .captcha-seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #6e7f95;
  }
  .captcha-seal svg { width: 22px; height: 22px; }
  .captcha-seal svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .captcha-seal small { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
  .auth-captcha.verified .captcha-seal { color: #4ade80; }

  /* ════════════════════════════════════════════════════════════════════
     ECOSISTEMA ONLINE · DIAMANTES · JUEGO LIMPIO · CHAT · SÚPER TIENDA
     ════════════════════════════════════════════════════════════════════ */
  :root {
    --dia: #7dd3fc;
    --dia-2: #38bdf8;
    --dia-deep: #0c4a6e;
    --gold-hi: #fff3c4;
    --ok: #4ade80;
    --bad: #f87171;
    --epic: #c084fc;
    --legend: #fbbf24;
    --rare: #60a5fa;
    --sheet: linear-gradient(180deg, rgba(26, 42, 66, 0.98), rgba(10, 20, 34, 0.99));
  }
  [hidden] { display: none !important; }
  .toast { z-index: 90; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease; }

  /* ── Píldora de diamantes y regalo ─────────────────────────────────── */
  .top-actions { display: flex; align-items: center; gap: 8px; }
  .dia-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, .45);
    background: linear-gradient(180deg, rgba(56, 189, 248, .2), rgba(12, 74, 110, .35));
    color: #e0f2fe;
    font-size: 13.5px; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.3);
    font-variant-numeric: tabular-nums;
  }
  .dia-pill b { font-weight: 700; }
  .dia-ico { filter: drop-shadow(0 0 6px rgba(125, 211, 252, .8)); }
  .dia-pill.big { padding: 9px 16px 9px 12px; font-size: 18px; }
  .dia-pill.big .dia-word { font-size: 12px; color: #bae6fd; font-weight: 500; }
  .dia-pill.bump-up { animation: diaUp .6s ease; }
  .dia-pill.bump-down { animation: diaDown .6s ease; }
  @keyframes diaUp { 30% { transform: scale(1.12); box-shadow: 0 0 18px rgba(74, 222, 128, .6); } }
  @keyframes diaDown { 30% { transform: scale(.94); box-shadow: 0 0 18px rgba(248, 113, 113, .6); } }
  .gift-btn, .dia-add {
    position: relative;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(240, 193, 74, .45);
    background: rgba(240, 193, 74, .12);
    font-size: 17px;
  }
  .dia-add { color: var(--brass); font-size: 22px; font-weight: 700; line-height: 1; }
  .gift-dot {
    position: absolute; top: -2px; right: -2px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; border: 2px solid #0a1626;
    display: none;
  }
  .gift-dot.on { display: block; animation: dotPulse 1.6s ease-in-out infinite; }
  @keyframes dotPulse { 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); transform: scale(1.15); } }

  /* ── Pantalla Jugar en línea ───────────────────────────────────────── */
  .jugar-head { justify-content: space-between; }
  .jugar-head .back-btn { margin-bottom: 0; }
  .wallet-strip { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
  .online-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 4px 0 12px; }
  .online-actions .go { margin-top: 0; }
  .quick-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(125, 211, 252, .4);
    background:
      radial-gradient(200px 90px at 100% 0%, rgba(56, 189, 248, .25), transparent 60%),
      linear-gradient(160deg, #15335a, #0b1d33);
    color: var(--ivory);
  }
  .quick-btn b { display: block; font-size: 15.5px; }
  .quick-btn small { color: #bae6fd; font-size: 12px; }
  .quick-ico {
    width: 38px; height: 38px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-size: 19px;
    background: rgba(56, 189, 248, .18); border: 1px solid rgba(125, 211, 252, .45);
  }
  .missions-card {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(240, 193, 74, .45);
    background:
      radial-gradient(160px 80px at 0% 0%, rgba(240, 193, 74, .25), transparent 60%),
      var(--panel);
    color: var(--ivory);
  }
  .mc-ico { font-size: 26px; filter: drop-shadow(0 4px 8px rgba(240,193,74,.35)); }
  .mc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mc-text b { font-size: 15px; }
  .mc-text small { color: var(--mute); font-size: 12px; }
  .mc-bar { display: block; height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 3px; }
  .mc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f0c14a, #fde68a); border-radius: inherit; transition: width .4s ease; }
  .missions-card .gift-dot { top: 8px; right: 8px; }
  .online-head { display: flex; align-items: center; gap: 8px; }
  .online-count {
    min-width: 22px; padding: 1px 7px; border-radius: 99px;
    background: rgba(74, 222, 128, .16); color: var(--ok);
    font-size: 11px; letter-spacing: 0; text-align: center;
  }
  .online-hint { margin: -2px 0 8px; font-size: 12px; color: #94a3b8; }
  .online-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 290px; overflow-y: auto;
    padding: 2px 2px 4px;
  }
  .online-list::-webkit-scrollbar { width: 0; }
  .online-row {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(18, 38, 61, .9);
    border: 1px solid rgba(242, 193, 77, .16);
  }
  .online-row.seated { opacity: .5; }
  .or-dot {
    position: absolute; left: 38px; top: 34px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ok); border: 2px solid #12263d;
  }
  .or-dot.busy { background: #f59e0b; }
  .or-info { flex: 1; min-width: 0; }
  .or-info b { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .or-info small { color: #94a3b8; font-size: 11.5px; }
  .or-friend { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); background: rgba(240,193,74,.14); padding: 1px 6px; border-radius: 99px; }
  .online-row .fc-btn { flex: none; }

  /* ── Avatares con marcos animados ──────────────────────────────────── */
  .ava-chip {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #f6d78a, #c4892e);
    color: #3a2508;
    font-family: Fraunces, serif; font-size: 17px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.4);
    position: relative;
  }
  .avatar, .mini { position: relative; }
  .ava-legend { font-family: inherit; line-height: 1; }
  .ava-chip.ava-legend, .mini.ava-legend, .avatar.ava-legend { font-size: 22px; }
  .perfil-avatar-circle.ava-legend { font-size: 52px; }
  .ava-legend.rar-epic { background: radial-gradient(circle at 35% 30%, #e9d5ff, #7e22ce 70%, #3b0764); }
  .ava-legend.rar-legend { background: radial-gradient(circle at 35% 30%, #fff7d6, #f59e0b 55%, #7c2d12); animation: legendGlow 2.4s ease-in-out infinite; }
  @keyframes legendGlow { 50% { box-shadow: 0 0 18px rgba(251, 191, 36, .75); } }
  .has-frame { isolation: isolate; }
  .has-frame::after {
    content: "";
    position: absolute; inset: -5px;
    border-radius: 50%;
    padding: 3px;
    background: var(--ring, conic-gradient(#f0c14a, #fff3c4, #f0c14a));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: ringSpin 3.2s linear infinite;
    pointer-events: none;
    z-index: 2;
  }
  .perfil-avatar-circle.has-frame::after { inset: -9px; padding: 5px; }
  @keyframes ringSpin { to { transform: rotate(360deg); } }
  .frm-gold { --ring: conic-gradient(#fff3c4, #f0c14a, #8a5a10, #f0c14a, #fff3c4, #c4892e, #fff3c4); }
  .frm-neon { --ring: conic-gradient(#22d3ee, #f472b6, #a78bfa, #22d3ee); box-shadow: 0 0 14px rgba(244, 114, 182, .45); }
  .frm-neon::after { animation-duration: 5s; filter: drop-shadow(0 0 4px #f472b6); }
  .frm-bolt { --ring: conic-gradient(#e0f2fe, #38bdf8, #1d4ed8, #e0f2fe, #38bdf8, #1e3a8a, #e0f2fe); }
  .frm-bolt::after { animation-duration: 1.4s; filter: drop-shadow(0 0 4px #38bdf8); }
  .frm-fire { --ring: conic-gradient(#fde047, #f97316, #dc2626, #f97316, #fde047, #ea580c, #fde047); animation: fireFlicker 1.2s ease-in-out infinite; }
  .frm-fire::after { animation-duration: 2s; filter: drop-shadow(0 0 5px #f97316); }
  @keyframes fireFlicker { 50% { box-shadow: 0 0 16px rgba(249, 115, 22, .7); } }
  .frm-legend { --ring: conic-gradient(#fff7d6, #fbbf24, #b45309, #fde68a, #f59e0b, #fff7d6); box-shadow: 0 0 18px rgba(251, 191, 36, .55); }
  .frm-legend::before {
    content: "👑";
    position: absolute; left: 50%; top: -15px;
    transform: translateX(-50%) rotate(-8deg);
    font-size: 15px; line-height: 1;
    z-index: 3;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
    animation: crownBob 2.4s ease-in-out infinite;
  }
  .perfil-avatar-circle.frm-legend::before { font-size: 28px; top: -28px; }
  @keyframes crownBob { 50% { transform: translateX(-50%) rotate(8deg) translateY(-2px); } }

  /* ── Sala de espera ────────────────────────────────────────────────── */
  .room-tag {
    display: inline-block; margin-top: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
    color: var(--brass);
    padding: 3px 9px; border-radius: 99px;
    background: rgba(240, 193, 74, .12); border: 1px solid rgba(240, 193, 74, .35);
  }
  .room-title { margin-top: 6px; }
  .room-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .room-chips span {
    font-size: 12px; padding: 4px 10px; border-radius: 99px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #e2e8f0;
  }
  .room-table { position: relative; height: 318px; margin: 4px 0 6px; }
  .room-table.seats-2 { height: 290px; }
  .room-felt {
    position: absolute; inset: 78px 92px; z-index: 0; pointer-events: none;
    border-radius: 50%;
    background:
      radial-gradient(rgba(255,255,255,.06) .8px, transparent 1px) 0 0 / 6px 6px,
      radial-gradient(ellipse at 50% 45%, #1f4d80 0%, #102d4e 60%, #071526 100%);
    border: 2px solid rgba(240, 193, 74, .5);
    box-shadow: inset 0 0 30px rgba(0,0,0,.6), 0 10px 26px rgba(0,0,0,.45);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
  }
  .room-table.seats-2 .room-felt { inset: 82px 54px; }
  .room-felt small { color: var(--mute); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
  .room-felt b { font-family: Fraunces, serif; font-size: 24px; font-weight: 560; color: #e0f2fe; }
  .room-felt span { font-size: 11px; color: #bae6fd; }
  .room-seat {
    position: absolute; z-index: 2;
    width: 104px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
  }
  .room-seat.empty {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(240, 193, 74, .28);
  }
  .room-seat.pos-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
  .room-seat.pos-top { top: 0; left: 50%; transform: translateX(-50%); }
  .room-seat.pos-left { left: -6px; top: 50%; transform: translateY(-50%); }
  .room-seat.pos-right { right: -6px; top: 50%; transform: translateY(-50%); }
  .room-seat b { font-size: 12.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .room-seat small { font-size: 10.5px; color: #94a3b8; }
  .room-seat .rs-ava { width: 52px; height: 52px; font-size: 21px; }
  .room-seat .rs-ava.ava-legend { font-size: 26px; }
  .room-seat.me .rs-ava { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 4px var(--brass); }
  .room-seat.reserved .rs-ava { opacity: .6; animation: seatWait 1.4s ease-in-out infinite; }
  @keyframes seatWait { 50% { opacity: .3; } }
  .room-seat.player .rs-ava { animation: seatIn .4s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes seatIn { from { transform: scale(.4); opacity: 0; } }
  .rs-empty {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    border: 2px dashed rgba(240, 193, 74, .5);
    background: rgba(240, 193, 74, .06);
    color: var(--brass); font-size: 24px; line-height: 1;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .room-seat.empty:hover .rs-empty,
  .room-seat.empty:focus-within .rs-empty {
    background: rgba(240, 193, 74, .2);
    box-shadow: 0 0 0 3px rgba(240, 193, 74, .4);
    transform: scale(1.08);
  }
  .room-seat.empty:active .rs-empty { transform: scale(.96); }
  .rs-ready {
    position: absolute; top: 34px; left: calc(50% + 12px);
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ok); color: #052e16; font-size: 12px; font-weight: 800;
    display: grid; place-items: center; border: 2px solid #0a1626;
    animation: seatIn .3s ease;
  }
  .rs-kick {
    margin-top: 3px;
    font-size: 10.5px; font-weight: 700;
    padding: 3px 9px; border-radius: 99px;
    border: 1px solid rgba(248, 113, 113, .45);
    background: rgba(248, 113, 113, .12); color: var(--bad);
  }
  .team-tag {
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 99px; margin-left: 4px;
    vertical-align: middle;
  }
  .team-tag.t0 { background: rgba(240, 193, 74, .18); color: var(--brass); }
  .team-tag.t1 { background: rgba(56, 189, 248, .18); color: var(--dia); }
  .room-seat .team-tag { margin: 2px 0 0; }
  .room-status { text-align: center; font-size: 13px; color: #cbd5e1; margin: 2px 0 12px; min-height: 18px; }
  .room-public {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 16px;
    background: rgba(18, 38, 61, .9); border: 1px solid rgba(242, 193, 77, .2);
  }

  /* ── Menú flotante de apuesta ──────────────────────────────────────── */
  .bet-sheet {
    position: absolute; inset: 0; z-index: 45;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px;
    background: rgba(4, 10, 20, .7);
    backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .bet-sheet.on { opacity: 1; pointer-events: auto; }
  .bet-card {
    width: 100%;
    background: var(--sheet);
    border: 1.5px solid rgba(240, 193, 74, .6);
    border-radius: 24px;
    padding: 18px 18px 14px;
    text-align: center;
    box-shadow: 0 -10px 40px rgba(0,0,0,.6), 0 0 30px rgba(240, 193, 74, .18);
    transform: translateY(30px);
    transition: transform .35s cubic-bezier(.2, 1.3, .4, 1);
  }
  .bet-sheet.on .bet-card { transform: none; }
  .bet-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--ok); }
  .bet-title { margin: 4px 0 6px; font-family: Fraunces, serif; font-weight: 560; font-size: 22px; }
  .bet-amount { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 30px; }
  .bet-amount b { font-family: Fraunces, serif; font-size: 40px; font-weight: 640; color: #e0f2fe; text-shadow: 0 0 18px rgba(56, 189, 248, .6); }
  .bet-pot { margin: 0 0 12px; font-size: 12.5px; color: #bae6fd; }
  .bet-players { display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; }
  .bp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; }
  .bp small { font-size: 10.5px; color: #cbd5e1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bp i {
    position: absolute; top: 26px; right: 8px;
    font-style: normal; font-size: 11px;
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center;
    background: #1e293b; border: 2px solid #0a1626;
  }
  .bp.ok i { background: var(--ok); color: #052e16; font-weight: 800; }
  .bet-timer { height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
  .bet-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f59e0b, #f0c14a); transition: width 1s linear; }
  .bet-timer-txt { margin: 4px 0 6px; font-size: 11.5px; color: #94a3b8; }
  .bet-rules { font-size: 11.5px; color: #94a3b8; margin: 0 0 4px; line-height: 1.4; }
  .bet-short { font-size: 12.5px; color: var(--bad); margin: 6px 0 0; }
  .bet-card .go { margin-top: 10px; }
  .bet-card .go:disabled { opacity: .55; }
  .bet-decline { margin-top: 8px; width: 100%; padding: 10px; border: 0; background: transparent; color: #94a3b8; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }

  /* ── Modales del ecosistema (crear mesa, misiones, abandono...) ─────── */
  .end-box.sheet-box { max-width: 370px; width: 94%; max-height: 86vh; overflow-y: auto; gap: 8px; padding-top: 22px; }
  .end-box.sheet-box::-webkit-scrollbar { width: 0; }
  .cm-form { width: 100%; text-align: left; }
  .cm-label {
    display: flex; align-items: center; justify-content: space-between;
    margin: 12px 0 6px;
    font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
  }
  .cm-balance { letter-spacing: 0; text-transform: none; color: #bae6fd; font-size: 12px; }
  .cm-mode { display: grid; grid-template-columns: 1fr 1fr; }
  .cm-mode button { border-radius: 14px; padding: 10px; text-align: left; }
  .cm-mode button b { display: block; font-size: 13.5px; }
  .cm-mode button small { font-size: 11px; opacity: .8; }
  .cm-bet button:disabled { opacity: .35; cursor: not-allowed; }
  .cm-summary { margin: 14px 0 0; font-size: 12.5px; color: #bae6fd; line-height: 1.4; }
  .cm-summary.warn { color: var(--bad); }
  .cm-reserved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--mute); }
  .cm-reserved b { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: rgba(74, 222, 128, .14); color: var(--ok); }
  .modal-btn-row { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
  .modal-btn-row > * { flex: 1; }
  .btn-danger, .btn-muted { padding: 12px; border-radius: 14px; font-weight: 700; font-size: 14px; }
  .btn-danger { background: #ef4444; color: #fff; border: 1px solid #dc2626; }
  .btn-danger:disabled { opacity: .45; }
  .btn-muted { background: rgba(255,255,255,.08); color: #cbd5e1; border: 1px solid rgba(255,255,255,.15); }
  .ab-rules { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; margin: 4px 0; }
  .ab-rules div { padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 3px solid var(--brass); }
  .ab-rules div + div { border-left-color: var(--bad); }
  .ab-rules b { display: block; font-size: 13px; }
  .ab-rules small { font-size: 11.5px; color: #94a3b8; line-height: 1.35; }

  /* Misiones */
  .ms-balance { font-size: 15px; color: #bae6fd; }
  .ms-balance b { font-family: Fraunces, serif; font-size: 22px; color: #e0f2fe; }
  .ms-block { width: 100%; text-align: left; }
  .login-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
  .lw-day {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 6px 0 5px; border-radius: 10px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  }
  .lw-day small { font-size: 8.5px; color: #94a3b8; }
  .lw-day span { font-size: 13px; }
  .lw-day b { font-size: 11.5px; color: #e0f2fe; }
  .lw-day.big { background: rgba(240, 193, 74, .1); border-color: rgba(240, 193, 74, .35); }
  .lw-day.done { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .4); }
  .lw-day.done span { color: var(--ok); font-weight: 800; }
  .lw-day.today { border-color: var(--brass); box-shadow: 0 0 12px rgba(240, 193, 74, .45); animation: dotPulse 1.8s ease-in-out infinite; }
  .lw-day.next { border-style: dashed; border-color: rgba(240, 193, 74, .45); }
  .ms-block .end-box-btn:disabled { opacity: .5; box-shadow: none; }
  .ms-list { display: flex; flex-direction: column; gap: 6px; }
  .ms-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  }
  .ms-row.ready { border-color: rgba(240, 193, 74, .55); background: rgba(240, 193, 74, .08); }
  .ms-row.claimed { opacity: .55; }
  .ms-info { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
  .ms-info b { font-size: 13px; grid-column: 1 / -1; }
  .ms-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 5px; }
  .ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #7dd3fc); border-radius: inherit; }
  .ms-row.ready .ms-bar i { background: linear-gradient(90deg, #f0c14a, #fde68a); }
  .ms-info small { font-size: 10.5px; color: #94a3b8; margin-top: 4px; }
  .ms-reward { font-size: 12px; font-weight: 700; color: #bae6fd; white-space: nowrap; }
  .ms-rescue {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 14px;
    background: rgba(56, 189, 248, .1); border: 1px solid rgba(125, 211, 252, .4);
  }
  .ms-rescue > span { font-size: 24px; }
  .ms-rescue div { flex: 1; }
  .ms-rescue b { display: block; font-size: 13.5px; }
  .ms-rescue small { font-size: 11.5px; color: #bae6fd; }

  .pw-btn {
    position: relative;
    padding: 7px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 700;
    border: 1px solid rgba(125, 211, 252, .45);
    background: rgba(56, 189, 248, .14); color: #e0f2fe;
    white-space: nowrap;
  }
  .pw-btn.gold { background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #3a2508; border-color: transparent; }
  .pw-btn:disabled { opacity: .45; cursor: default; }
  .pw-btn .gift-dot { top: -3px; right: -3px; }

  /* Reportar */
  .rp-reasons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
  .rp-reason {
    padding: 7px 11px; border-radius: 99px; font-size: 12.5px;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #e2e8f0;
  }
  .rp-reason[aria-checked="true"] { background: rgba(239, 68, 68, .2); border-color: #ef4444; color: #fecaca; font-weight: 700; }
  #rp-comment {
    width: 100%; resize: none; font: inherit; font-size: 13px;
    padding: 9px 12px; border-radius: 12px;
    background: #0c1527; color: #fff; border: 1px solid rgba(255,255,255,.15);
  }
  #rp-comment:focus { outline: none; border-color: var(--brass); }
  .rp-block { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cbd5e1; align-self: flex-start; }
  .rp-block input { accent-color: #ef4444; width: 16px; height: 16px; }
  .blocked-list { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .blocked-row {
    background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 12px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .blocked-row b { font-size: 14px; }
  .blocked-row .back { padding: 6px 10px; font-size: 12px; }

  /* Final de partida */
  .end-box-match { max-width: 350px; width: 92%; max-height: 88vh; overflow-y: auto; }
  .end-box-match::-webkit-scrollbar { width: 0; }
  .end-extra:empty { display: none; }
  .end-extra { width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .end-scores { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .end-scores span {
    min-width: 66px; padding: 6px 10px; border-radius: 12px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    display: flex; flex-direction: column; align-items: center;
  }
  .end-scores span.me { border-color: var(--brass); background: rgba(240, 193, 74, .1); }
  .end-scores small { font-size: 10.5px; color: #94a3b8; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .end-scores b { font-family: Fraunces, serif; font-size: 20px; font-weight: 560; }
  .dia-lines { display: flex; flex-direction: column; gap: 4px; }
  .dl { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 10px; }
  .dl.up { color: var(--ok); background: rgba(74, 222, 128, .1); }
  .dl.down { color: var(--bad); background: rgba(248, 113, 113, .1); }
  .dl.gold { color: #fde68a; background: rgba(240, 193, 74, .14); animation: diaUp .8s ease 2; }
  .end-box-btn.secondary { margin-top: 0; background: rgba(255,255,255,.08); color: #e2e8f0; border: 1px solid rgba(255,255,255,.16); box-shadow: none; }
  .end-report { width: 100%; text-align: left; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
  .end-report-label { display: block; font-size: 11.5px; color: #94a3b8; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
  .report-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
  .report-row .ava-chip { width: 32px; height: 32px; font-size: 14px; }
  .report-row b { flex: 1; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Mesa: asientos, turnos y marcador ─────────────────────────────── */
  .mesa-header-controls { gap: 8px; }
  .mesa-mode-badge {
    flex: 1; min-width: 0; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: #bae6fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mesa-mode-badge:empty { visibility: hidden; }
  #opp-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
  .who-line.turn .mini { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 4px #4ade80, 0 0 14px rgba(74, 222, 128, .7); }
  .who-line.susti .mini { filter: grayscale(.6); }
  .susti-tag {
    font-size: 9px; font-weight: 800; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 99px; margin-left: 4px;
    background: rgba(56, 189, 248, .2); color: var(--dia);
  }
  /* Indicador de voz (ondas alrededor del avatar que habla) */
  .who-line.speaking .mini::before, .seat-pod.speaking .pod-ava::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(74, 222, 128, .8);
    animation: speakWave 1s ease-out infinite;
    pointer-events: none;
  }
  @keyframes speakWave { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
  .scores { align-items: end; }
  .scores small { display: block; font-family: Outfit, sans-serif; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  .scores span.me { color: var(--brass); }
  .scores.multi { display: flex; justify-content: space-between; gap: 6px; font-size: 22px; padding: 2px 14px 6px; }
  .scores.multi span { flex: 1; text-align: center !important; min-width: 0; }
  .scores.multi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #timer.warn { color: #f87171; animation: pulsePass 0.8s infinite; }

  .seat-pod {
    position: absolute; top: 40%; transform: translateY(-50%);
    width: 58px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
  }
  .seat-pod.left { left: 6px; }
  .seat-pod.right { right: 6px; }
  .seat-pod .pod-ava { width: 38px; height: 38px; font-size: 16px; }
  .seat-pod.turn .pod-ava { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 4px #4ade80, 0 0 14px rgba(74, 222, 128, .7); }
  .seat-pod.susti .pod-ava { filter: grayscale(.6); }
  .seat-pod.offline .pod-ava::after { content: "📡"; position: absolute; right: -6px; bottom: -4px; font-size: 13px; }
  .seat-pod b { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seat-pod small { font-size: 9.5px; color: #cbd5e1; }
  .pod-backs { display: flex; margin-top: 2px; }
  .pod-backs .back {
    width: 9px; height: 15px; margin-left: -3px; border-radius: 2px;
    background: linear-gradient(145deg, #fff2c4 0%, #f7cf5a 25%, #d8961d 60%, #9e6005 100%);
    border: .5px solid rgba(255, 235, 170, .7);
  }
  .pod-backs .back:first-child { margin-left: 0; }
  .pod-reveal { font-size: 9px; color: #fde68a; line-height: 1.25; word-break: break-word; }
  .pod-score { font-family: Fraunces, serif; font-size: 15px; color: var(--brass); }
  .pod-badges { display: flex; flex-direction: column; align-items: center; }
  .pod-badges .team-tag, .pod-badges .susti-tag { margin: 1px 0 0; }
  .seat-pod.passed .pod-ava, .who-line.passed .mini { animation: passShake .45s ease; }
  @keyframes passShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
  #mesa[data-seats="4"] .chain-wrap, #mesa[data-seats="3"] .chain-wrap { margin: 0 62px; }
  .chain-wrap { position: relative; overflow: hidden; min-height: 0; }
  .chain { flex: none; flex-wrap: wrap; justify-content: center; align-content: center; row-gap: 6px; transform-origin: center center; transition: transform .25s ease; }
  .end-target {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    border: 2px solid var(--brass); background: rgba(240, 193, 74, .2); color: #fff;
    font-size: 14px; animation: dotPulse 1s ease-in-out infinite;
  }
  .tile.waiting { opacity: .82; filter: saturate(.85); }
  .tile.waiting .face { cursor: default; }
  .tile.selected { transform: translateY(-14px) scale(1.05) !important; box-shadow: 0 0 0 3px var(--brass), 0 12px 24px rgba(0,0,0,.5); }
  .hint { padding: 0 64px 12px; min-height: 28px; }
  .reacts .react-stk { font-size: 20px; background: rgba(240, 193, 74, .12); }

  /* ── Efectos: emojis que cruzan el tapete, burbujas y stickers ─────── */
  .fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
  .fly-emoji {
    position: absolute; left: 0; top: 0;
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    display: grid; place-items: center;
    font-size: 32px; line-height: 1;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.45));
    will-change: transform, opacity;
  }
  .fly-spark { position: absolute; left: 0; top: 0; margin: -8px 0 0 -8px; font-size: 16px; color: #fde68a; }
  .chat-bubble {
    position: absolute;
    max-width: 168px;
    padding: 7px 11px;
    border-radius: 14px;
    background: var(--ivory); color: #1b140d;
    font-size: 12.5px; font-weight: 600; line-height: 1.3;
    box-shadow: 0 8px 18px rgba(0,0,0,.4);
    animation: bubbleIn .28s cubic-bezier(.3, 1.6, .5, 1);
    transition: opacity .35s ease;
    z-index: 2;
  }
  .chat-bubble small { display: block; font-weight: 500; font-size: 11px; opacity: .75; margin-top: 2px; }
  .chat-bubble.out { opacity: 0; }
  .chat-bubble.pos-bottom { transform: translate(-50%, -115%); border-bottom-left-radius: 4px; }
  .chat-bubble.pos-top { transform: translate(-50%, 40%); border-top-left-radius: 4px; }
  .chat-bubble.pos-left { transform: translate(18px, -50%); border-top-left-radius: 4px; }
  .chat-bubble.pos-right { transform: translate(calc(-100% - 18px), -50%); border-top-right-radius: 4px; }
  .chat-bubble.taunt { background: linear-gradient(135deg, #fff3c4, #f0c14a); }
  @keyframes bubbleIn { from { opacity: 0; scale: .6; } }
  .sticker-drop {
    position: absolute; left: 50%; top: 46%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    animation: stickerIn .6s cubic-bezier(.3, 1.5, .5, 1) both;
    transition: opacity .4s ease, transform .4s ease;
    z-index: 3;
  }
  .sticker-drop .stk { font-size: 76px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
  .sticker-drop b {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 9px; border-radius: 99px; background: rgba(0,0,0,.45); color: #fde68a;
  }
  .sticker-drop.out { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  @keyframes stickerIn {
    from { left: var(--fx); top: var(--fy); transform: translate(-50%, -50%) scale(.2) rotate(-30deg); opacity: 0; }
    to { left: 50%; top: 46%; transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  }

  /* ── Banner de reconexión ──────────────────────────────────────────── */
  .reconnect-banner {
    position: absolute; top: 8px; left: 10px; right: 10px; z-index: 7;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
    padding: 8px 10px 10px;
    border-radius: 14px;
    background: rgba(12, 22, 38, .94);
    border: 1px solid rgba(245, 158, 11, .6);
    box-shadow: 0 10px 22px rgba(0,0,0,.5);
    animation: bubbleIn .3s ease;
  }
  .reconnect-banner.me { border-color: rgba(248, 113, 113, .7); }
  .rc-ico { font-size: 20px; animation: dotPulse 1.2s ease-in-out infinite; }
  .rc-text { min-width: 0; }
  .rc-text b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-text small { display: block; font-size: 10.5px; color: #bae6fd; line-height: 1.3; }
  .rc-clock { font-family: Fraunces, serif; font-size: 20px; color: #fbbf24; font-variant-numeric: tabular-nums; }
  .rc-bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
  .rc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ef4444, #f59e0b); transition: width 1s linear; }

  /* ── Chat de voz (micrófono flotante) ──────────────────────────────── */
  .voice-dock {
    position: absolute; left: 10px; bottom: 10px; z-index: 7;
    display: flex; align-items: center; gap: 6px;
  }
  #mesa:not(.is-online) .voice-dock { display: none; }
  .voice-fab {
    --lvl: 0;
    position: relative;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
    transition: background .2s ease, transform .15s ease;
  }
  .voice-fab:active { transform: scale(.92); }
  .voice-fab.muted { background: linear-gradient(180deg, #475569, #1e293b); }
  .voice-fab.live { background: linear-gradient(180deg, #22c55e, #15803d); border-color: rgba(187, 247, 208, .7); box-shadow: 0 0 calc(8px + var(--lvl) * 18px) rgba(74, 222, 128, .7); }
  .vf-ico { width: 22px; height: 22px; position: relative; z-index: 2; }
  .vf-slash { stroke: #f87171; stroke-width: 2.6; }
  .voice-fab.live .vf-slash { display: none; }
  .vf-wave {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(74, 222, 128, .75);
    opacity: 0; pointer-events: none;
  }
  .voice-fab.live.talking .vf-wave { animation: micWave 1.3s ease-out infinite; }
  .voice-fab.live.talking .vf-wave.w2 { animation-delay: .43s; }
  .voice-fab.live.talking .vf-wave.w3 { animation-delay: .86s; }
  @keyframes micWave {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(calc(1.5 + var(--lvl) * .9)); opacity: 0; }
  }
  .voice-fab.demo::after {
    content: "DEMO"; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    font-size: 7.5px; font-weight: 800; letter-spacing: .08em;
    padding: 1px 4px; border-radius: 4px; background: #0a1626; color: #bae6fd;
  }
  .speaker-btn, .chat-fab {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(240, 193, 74, .4);
    background: rgba(8, 19, 31, .75);
    font-size: 16px;
  }
  .chat-fab { position: absolute; right: 10px; bottom: 12px; z-index: 7; width: 44px; height: 44px; font-size: 20px; }
  .chat-dot { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: #ef4444; border: 2px solid #0a1626; display: none; }
  .chat-dot.on { display: block; animation: dotPulse 1.4s ease-in-out infinite; }

  /* ── Hoja de chat ──────────────────────────────────────────────────── */
  .chat-sheet {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: flex-end;
    background: rgba(4, 10, 20, .55);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .chat-sheet.on { opacity: 1; pointer-events: auto; }
  .chat-card {
    width: 100%; max-height: 74%;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 14px 16px;
    border-radius: 24px 24px 0 0;
    background: var(--sheet);
    border-top: 1.5px solid rgba(240, 193, 74, .55);
    box-shadow: 0 -12px 34px rgba(0,0,0,.55);
    transform: translateY(40px);
    transition: transform .3s cubic-bezier(.2, 1.2, .4, 1);
  }
  .chat-sheet.on .chat-card { transform: none; }
  .chat-head { display: flex; align-items: center; justify-content: space-between; }
  .chat-head b { font-family: Fraunces, serif; font-weight: 560; font-size: 18px; }
  .chat-log {
    max-height: 110px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px; border-radius: 12px;
    background: rgba(0,0,0,.25);
  }
  .chat-log::-webkit-scrollbar { width: 0; }
  .cl-row { font-size: 12.5px; line-height: 1.3; }
  .cl-row b { color: var(--dia); margin-right: 6px; }
  .cl-row.me b { color: var(--brass); }
  .cl-empty { margin: 0; font-size: 12px; color: #94a3b8; text-align: center; }
  .chat-tabs { display: flex; gap: 6px; }
  .chat-tabs button {
    flex: 1; padding: 7px 4px; border-radius: 99px; font-size: 12.5px;
    border: 1px solid var(--line); background: transparent; color: var(--ivory);
  }
  .chat-tabs button.on { background: var(--brass); color: #2a1c08; border-color: transparent; font-weight: 700; }
  .chat-pane { display: flex; flex-wrap: wrap; gap: 6px; max-height: 170px; overflow-y: auto; padding: 2px; }
  .chat-pane::-webkit-scrollbar { width: 0; }
  .chat-pane button {
    border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06); color: var(--ivory);
  }
  .chat-pane.phrases button { padding: 8px 11px; font-size: 13px; }
  .chat-pane.emojis button { width: 48px; height: 48px; font-size: 26px; }
  .chat-pane.stickers { display: grid; grid-template-columns: repeat(4, 1fr); }
  .chat-pane.stickers button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; }
  .chat-pane.stickers .stk { font-size: 30px; }
  .chat-pane.stickers small { font-size: 9.5px; color: #cbd5e1; }
  .chat-pane.taunts { flex-direction: column; flex-wrap: nowrap; }
  .chat-pane.taunts button { text-align: left; padding: 9px 12px; font-size: 13px; background: rgba(240, 193, 74, .08); border-color: rgba(240, 193, 74, .3); }
  .chat-pane.taunts small { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
  .cp-empty { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; font-size: 13px; color: #94a3b8; text-align: center; }
  .chat-input { display: flex; gap: 8px; }
  .chat-input input {
    flex: 1; min-width: 0;
    padding: 10px 14px; border-radius: 99px;
    border: 1px solid rgba(255,255,255,.15); background: #0c1527; color: #fff;
  }
  .chat-input input:focus { outline: none; border-color: var(--brass); }
  .chat-input button { padding: 0 16px; border-radius: 99px; border: 0; background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #3a2508; font-weight: 700; }

  /* ── Súper Tienda de Diamantes ─────────────────────────────────────── */
  .shop-hero {
    position: relative;
    padding: 14px 14px 12px;
    border-radius: 20px;
    background:
      radial-gradient(240px 120px at 100% 0%, rgba(56, 189, 248, .3), transparent 60%),
      radial-gradient(200px 120px at 0% 100%, rgba(240, 193, 74, .2), transparent 60%),
      linear-gradient(160deg, #15335a, #0a1626);
    border: 1px solid rgba(125, 211, 252, .35);
    box-shadow: 0 14px 28px rgba(0,0,0,.3);
    margin-bottom: 12px;
  }
  .shop-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--dia); }
  .shop-hero h1.page { margin: 4px 0; font-size: 27px; line-height: 1.1; }
  .shop-hero .lede { margin-bottom: 12px; font-size: 13px; }
  .shop-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
  .shop-balance b { display: block; font-family: Fraunces, serif; font-size: 26px; font-weight: 560; color: #e0f2fe; }
  .shop-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; margin: 0 -2px; }
  .shop-tabs::-webkit-scrollbar { height: 0; }
  .shop-tabs button {
    flex: none; display: flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 99px; font-size: 13px;
    border: 1px solid var(--line); background: transparent; color: var(--ivory);
  }
  .shop-tabs button.on { background: var(--brass); color: #2a1c08; border-color: transparent; font-weight: 700; }
  .shop-cat-desc { margin: 4px 0 10px; font-size: 12.5px; color: var(--mute); }
  .shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-grid.cat-taunts { grid-template-columns: 1fr; }
  .shop-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 26px 10px 12px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 46%), var(--panel);
    border: 1px solid rgba(242, 193, 77, .22);
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
  }
  .shop-item.rar-rare { border-color: rgba(96, 165, 250, .45); }
  .shop-item.rar-epic { border-color: rgba(192, 132, 252, .5); background: linear-gradient(180deg, rgba(192, 132, 252, .12), transparent 50%), var(--panel); }
  .shop-item.rar-legend {
    border-color: rgba(251, 191, 36, .7);
    background: linear-gradient(180deg, rgba(251, 191, 36, .14), transparent 55%), var(--panel);
    box-shadow: 0 10px 22px rgba(0,0,0,.25), 0 0 16px rgba(251, 191, 36, .2);
  }
  .shop-item.equipped { box-shadow: 0 0 0 2px var(--ok), 0 10px 22px rgba(0,0,0,.25); }
  .rarity-tag {
    position: absolute; top: 8px; left: 8px;
    font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 99px;
    background: rgba(255,255,255,.08); color: #cbd5e1;
  }
  .rarity-tag.rar-rare { background: rgba(96, 165, 250, .18); color: #93c5fd; }
  .rarity-tag.rar-epic { background: rgba(192, 132, 252, .2); color: #d8b4fe; }
  .rarity-tag.rar-legend { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #3a2508; }
  #modal-compra .rarity-tag { position: static; }
  .si-preview { height: 70px; display: grid; place-items: center; }
  .shop-grid.cat-taunts .shop-item { flex-direction: row; text-align: left; padding: 26px 12px 12px; flex-wrap: wrap; }
  .shop-grid.cat-taunts .si-preview { height: auto; }
  .shop-grid.cat-taunts .si-name { flex: 1; min-width: 60%; }
  .shop-grid.cat-taunts .si-sub { width: 100%; }
  .si-name { font-size: 13.5px; line-height: 1.25; }
  .si-sub { font-size: 11px; color: #94a3b8; margin-top: -3px; }
  .si-try {
    padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
    border: 1px solid rgba(125, 211, 252, .45); background: rgba(56, 189, 248, .12); color: #e0f2fe;
  }
  .si-buy {
    width: 100%; margin-top: auto;
    border: 0; border-radius: 99px; padding: 7px 10px;
    background: linear-gradient(180deg, #7dd3fc, #0ea5e9); color: #062538;
    font-size: 12.5px; font-weight: 800;
  }
  .si-buy.short { background: rgba(255,255,255,.08); color: #94a3b8; }
  .si-buy.equip { background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #3a2508; }
  .si-buy.have { background: rgba(74, 222, 128, .15); color: #bbf7d0; }
  .shop-grid.cat-taunts .si-buy { width: auto; padding: 7px 14px; margin-left: auto; }
  .ava-demo { width: 56px; height: 56px; font-size: 22px; }
  .ava-demo.ava-legend { font-size: 30px; }
  .snd-demo { display: flex; align-items: center; gap: 4px; height: 40px; }
  .snd-demo i { width: 5px; border-radius: 3px; background: linear-gradient(180deg, #7dd3fc, #0ea5e9); animation: eq 1s ease-in-out infinite; }
  .snd-demo i:nth-child(1) { height: 30%; animation-delay: -.2s; }
  .snd-demo i:nth-child(2) { height: 70%; animation-delay: -.5s; }
  .snd-demo i:nth-child(3) { height: 100%; animation-delay: -.1s; }
  .snd-demo i:nth-child(4) { height: 60%; animation-delay: -.7s; }
  .snd-demo i:nth-child(5) { height: 35%; animation-delay: -.3s; }
  .rar-epic .snd-demo i, .rar-legend .snd-demo i { background: linear-gradient(180deg, #fde68a, #f59e0b); }
  @keyframes eq { 50% { transform: scaleY(.35); } }
  .tnt-demo { font-size: 30px; }
  .emoji-demo { font-size: 42px; }
  .back-demo { display: flex; gap: 6px; }
  .back-demo .back, .backs .back {
    width: 28px; height: 42px; border-radius: 6px;
    display: grid; place-items: center; position: relative;
  }
  .back-demo .back {
    background: radial-gradient(circle at 50% 50%, rgba(255, 235, 170, .35) 0%, transparent 60%), linear-gradient(145deg, #fff2c4 0%, #f7cf5a 25%, #d8961d 60%, #9e6005 100%);
    border: 1px solid rgba(255, 235, 170, .7);
    box-shadow: inset 0 1px 1px rgba(255, 255, 240, .95), 0 2px 0 #8a5304, 0 4px 8px rgba(0,0,0,.5);
  }
  .back-demo .back:nth-child(2) { transform: rotate(8deg) translateY(2px); }
  .back-demo .back-crest, .backs .back .back-crest {
    width: 14px; height: 14px; border-radius: 50%; display: block;
    background: radial-gradient(circle at 35% 35%, #fff1b0 0%, #e5b035 45%, #8c5b0d 85%);
    border: 1px solid rgba(90, 55, 5, .4);
  }

  /* Dorsos personalizados: se aplican a la vista previa y a los dorsos de la mesa */
  .back-demo.back-sapphire .back, body.back-sapphire .backs .back, .pod-backs.back-sapphire .back {
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 40%), linear-gradient(150deg, #93c5fd 0%, #2563eb 40%, #0b1d4f 100%);
    border-color: rgba(191, 219, 254, .7);
  }
  .back-demo.back-sapphire .back-crest, body.back-sapphire .backs .back .back-crest {
    border-radius: 0; border: 0;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: linear-gradient(180deg, #fff3c4, #f0c14a);
  }
  .back-demo.back-carbon .back, body.back-carbon .backs .back, .pod-backs.back-carbon .back {
    background: repeating-linear-gradient(45deg, #2b3340 0 3px, #111827 3px 6px), #111827;
    border-color: #6b7280;
  }
  .back-demo.back-carbon .back-crest, body.back-carbon .backs .back .back-crest { background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8 60%, #334155); }
  .back-demo.back-fire .back, body.back-fire .backs .back, .pod-backs.back-fire .back {
    background: radial-gradient(circle at 50% 85%, #fde047 0%, transparent 45%), linear-gradient(170deg, #fb923c 0%, #dc2626 55%, #450a0a 100%);
    border-color: rgba(253, 186, 116, .8);
    animation: fireFlicker 1.6s ease-in-out infinite;
  }
  .back-demo.back-fire .back-crest, body.back-fire .backs .back .back-crest { background: radial-gradient(circle at 40% 35%, #fef9c3, #f59e0b 55%, #b45309); }
  .back-demo.back-cuba .back, body.back-cuba .backs .back, .pod-backs.back-cuba .back {
    background:
      linear-gradient(to bottom right, #cf142b 50%, transparent 50%) top left / 62% 50% no-repeat,
      linear-gradient(to top right, #cf142b 50%, transparent 50%) bottom left / 62% 50% no-repeat,
      repeating-linear-gradient(180deg, #002a8f 0 20%, #ffffff 20% 40%);
    border-color: rgba(255,255,255,.8);
  }
  .back-demo.back-cuba .back-crest, body.back-cuba .backs .back .back-crest {
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border: 0; border-radius: 0; background: #fff;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  .back-demo.back-diamond .back, body.back-diamond .backs .back, .pod-backs.back-diamond .back {
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc, #a5b4fc, #f0abfc, #e0f2fe, #7dd3fc);
    background-size: 300% 300%;
    border-color: rgba(255,255,255,.9);
    animation: diamondShine 3s linear infinite;
  }
  .back-demo.back-diamond .back-crest, body.back-diamond .backs .back .back-crest {
    border-radius: 2px; transform: rotate(45deg); width: 11px; height: 11px;
    background: linear-gradient(135deg, #fff, #38bdf8); border: 1px solid #fff;
  }
  @keyframes diamondShine { to { background-position: 300% 300%; } }

  /* Stickers animados */
  .stk { display: inline-block; line-height: 1; }
  .stk-steam { animation: stkSteam 2.2s ease-in-out infinite; }
  .stk-burn { animation: stkBurn .9s ease-in-out infinite; }
  .stk-shake { animation: stkShake .6s ease-in-out infinite; }
  .stk-sway { animation: stkSway 2.4s ease-in-out infinite; transform-origin: bottom center; }
  .stk-spin { animation: stkSpin 2.4s linear infinite; }
  .stk-float { animation: stkFloat 2s ease-in-out infinite; }
  .stk-bounce { animation: stkBounce 1s cubic-bezier(.3, 1.6, .6, 1) infinite; }
  .stk-swim { animation: stkSwim 2.6s ease-in-out infinite; }
  .stk-burst { animation: stkBurst 1.1s ease-in-out infinite; }
  .stk-glow { animation: stkGlow 2s ease-in-out infinite; }
  @keyframes stkSteam { 50% { transform: translateY(-4px) rotate(-6deg); } }
  @keyframes stkBurn { 50% { transform: scale(1.12, .92); filter: drop-shadow(0 0 8px #f97316); } }
  @keyframes stkShake { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
  @keyframes stkSway { 50% { transform: rotate(12deg); } }
  @keyframes stkSpin { to { transform: rotateY(360deg); } }
  @keyframes stkFloat { 50% { transform: translateY(-7px); } }
  @keyframes stkBounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-10px) scale(.95, 1.05); } 60% { transform: translateY(0) scale(1.08, .92); } }
  @keyframes stkSwim { 25% { transform: translateX(-6px) rotate(-6deg); } 75% { transform: translateX(6px) rotate(6deg); } }
  @keyframes stkBurst { 50% { transform: scale(1.22) rotate(8deg); } }
  @keyframes stkGlow { 50% { filter: drop-shadow(0 0 12px #fbbf24); transform: scale(1.06); } }
  .si-preview .stk { font-size: 46px; }
  .buy-preview { height: 96px; display: grid; place-items: center; }
  .buy-preview .stk { font-size: 64px; }
  .buy-preview .ava-demo { width: 74px; height: 74px; font-size: 30px; }
  .buy-preview .ava-demo.ava-legend { font-size: 40px; }

  /* ── Perfil: billetera y Vitrina de Stickers ───────────────────────── */
  .perfil-wallet { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-color: rgba(125, 211, 252, .3); }
  .pw-left { display: flex; align-items: center; gap: 10px; }
  .pw-ico { font-size: 28px; filter: drop-shadow(0 0 8px rgba(125, 211, 252, .7)); }
  .pw-left b { display: block; font-family: Fraunces, serif; font-size: 24px; font-weight: 560; color: #e0f2fe; line-height: 1.05; }
  .pw-left small { font-size: 11.5px; color: #94a3b8; }
  .pw-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .vitrina-card { border-color: rgba(240, 193, 74, .3); }
  .vitrina-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .vitrina-head b { display: block; font-size: 15px; }
  .vitrina-head small { font-size: 11.5px; color: #94a3b8; }
  /* Vitrina prémium: estuche de cristal con casillas por rareza (ver "PERFIL PRO" al final) */
  .vitrina-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    padding: 10px; border-radius: 16px;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(240, 193, 74, .12), transparent 60%),
      linear-gradient(180deg, rgba(4, 10, 20, .55), rgba(4, 10, 20, .8));
    border: 1px solid rgba(240, 193, 74, .28);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, .08), inset 0 0 0 1px rgba(0, 0, 0, .35);
  }

  @media (max-width: 360px) {
    .dia-pill { padding: 5px 9px 5px 7px; font-size: 12.5px; }
    .lang button { padding-inline: 6px; }
    .room-seat { width: 88px; }
    .room-felt { inset: 78px 80px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .has-frame::after, .stk, .ava-legend, .frm-fire, .frm-legend::before, .lw-day.today, .gift-dot.on,
    .chat-dot.on, .snd-demo i, .back-demo .back, body .backs .back, .end-target, .rc-ico { animation: none !important; }
  }
  #buy-confirm { white-space: nowrap; font-size: 14px; padding: 12px 10px; }

  /* ════════════════════════════════════════════════════════════════════
     MESA ORDENADA: cadena en serpiente + atril de 10 fichas
     ════════════════════════════════════════════════════════════════════ */
  .chain-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    scroll-behavior: smooth;
    padding: 4px;
  }
  .chain-wrap.scrollable { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .chain-wrap::-webkit-scrollbar { width: 0; height: 0; }
  .chain {
    display: block;
    position: relative;
    flex: none;
    margin: auto;            /* centra sin cortar el borde cuando hay scroll */
    transform: none !important;
    transition: width .25s ease, height .25s ease;
  }
  .chain-slot {
    position: absolute;
    transform-origin: 0 0;
    transition: left .3s ease, top .3s ease;
  }
  .chain-slot .tile { box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 240, 0.95),
      inset 0 -2px 3px rgba(60, 25, 0, 0.55),
      0 1px 0 #cf9426, 0 2px 0 #966107,
      0 4px 8px rgba(0, 0, 0, 0.45); }
  .chain-slot .tile.endcap { box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 240, 0.95),
      0 1px 0 #cf9426, 0 2px 0 #966107,
      0 0 0 2px rgba(240, 193, 74, .95), 0 0 14px rgba(240, 193, 74, .55),
      0 4px 8px rgba(0, 0, 0, 0.45); }
  .chain .end-target {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 32px; height: 32px;
    background: rgba(10, 22, 38, .85);
    animation: endPulse 1s ease-in-out infinite;
  }
  @keyframes endPulse { 50% { box-shadow: 0 0 0 6px rgba(240, 193, 74, .25), 0 0 14px rgba(240, 193, 74, .7); } }

  /* Atril: el ancho de ficha (--tw) lo calcula game.js para que quepan las 10 */
  .hand {
    --tw: 50px;
    gap: 5px;
    padding: 16px 10px 12px;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .hand > .tile:first-child { margin-left: auto; }
  .hand > .tile:last-child { margin-right: auto; }
  .hand .tile { scroll-snap-align: center; }
  .hand .tile.v { width: var(--tw); height: calc(var(--tw) * 1.82); border-radius: calc(var(--tw) * .17); }
  .hand .tile::before { border-radius: calc(var(--tw) * .15); }
  .hand .tile .half { padding: calc(var(--tw) * .09); }
  .hand .pip { width: calc(var(--tw) * .16); height: calc(var(--tw) * .16); }
  .hand .pip::after { top: 12%; left: 18%; width: 32%; height: 26%; }
  .hand .tile.v .seam { margin: 0 calc(var(--tw) * .08); height: 2px; }
  .hand .spinner { width: calc(var(--tw) * .13); height: calc(var(--tw) * .13); }
  .hand .tile.playable { transform: translateY(-6px); }
  .hand .tile.selected { transform: translateY(-12px) scale(1.04) !important; }
  .hand .tile:hover, .hand .tile.playable:hover { transform: translateY(-9px) scale(1.03); }
  .hand .tile:nth-child(10) { animation-delay: .36s; }

  /* ════════════════════════════════════════════════════════════════════
     LOBBY: pestañas, invitaciones separadas, mesas públicas, espectador
     ════════════════════════════════════════════════════════════════════ */
  .seg-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    padding: 4px; margin: 4px 0 12px;
    border-radius: 16px;
    background: rgba(8, 19, 31, .7);
    border: 1px solid rgba(242, 193, 77, .22);
  }
  .seg-tabs button {
    display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
    padding: 9px 8px; border-radius: 12px; border: 0;
    background: transparent; color: var(--mute);
    font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: center;
  }
  .seg-tabs button small { font-size: 10.5px; font-weight: 500; opacity: .8; }
  .seg-tabs button.on {
    background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #2a1c08;
    box-shadow: 0 4px 12px rgba(240, 193, 74, .25);
  }
  .seg-tabs button.on .online-count { background: rgba(42, 28, 8, .18); color: #2a1c08; }
  .invite-tabs { margin: 2px 0 8px; }
  .invite-tabs button { font-size: 12.5px; padding: 8px 6px; }
  .or-dot.off { background: #64748b; }

  /* Conteo de fichas de cada rival */
  .tiles-pill {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 2px; padding: 2px 8px 2px 6px;
    border-radius: 99px;
    font-style: normal; font-size: 11.5px; font-weight: 700; color: #fde68a;
    background: rgba(240, 193, 74, .14);
    border: 1px solid rgba(240, 193, 74, .45);
    white-space: nowrap;
  }
  .tiles-pill .tp-ico {
    width: 7px; height: 11px; border-radius: 2px; flex: none;
    background: linear-gradient(145deg, #fff2c4, #d8961d);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
  }
  .tiles-pill.low { color: #fecaca; background: rgba(239, 68, 68, .18); border-color: rgba(248, 113, 113, .7); animation: lowPulse 1.2s ease-in-out infinite; }
  .tiles-pill.bump { animation: pillBump .45s ease; }
  .tiles-pill.low.bump { animation: pillBump .45s ease, lowPulse 1.2s ease-in-out .45s infinite; }
  @keyframes pillBump { 40% { transform: scale(1.18); } }
  @keyframes lowPulse { 50% { box-shadow: 0 0 10px rgba(239, 68, 68, .6); } }
  .seat-pod .tiles-pill { font-size: 10px; padding: 1px 6px 1px 5px; }
  .who-line em.tiles-pill { font-size: 11.5px; color: #fde68a; }

  /* Sala bloqueada hasta llenarse */
  .room-felt em { margin-top: 3px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fbbf24; }
  .room-felt.locked { border-style: dashed; }
  .room-status.locked { color: #fde68a; }
  .bet-sheet.free .bet-amount b { color: #bbf7d0; text-shadow: 0 0 18px rgba(74, 222, 128, .5); font-size: 34px; }
  .cm-bet .free-bet { border-color: rgba(74, 222, 128, .5); }
  .cm-bet .free-bet.on { background: #4ade80; color: #052e16; }

  /* Mesas públicas */
  .tables-search { margin-bottom: 8px; }
  .tables-filter { margin-bottom: 10px; }
  .tables-list { display: flex; flex-direction: column; gap: 8px; }
  .pt-row {
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 46%), var(--panel);
    border: 1px solid rgba(242, 193, 77, .22);
  }
  .pt-row.waiting { border-color: rgba(74, 222, 128, .35); }
  .pt-row.playing { border-color: rgba(125, 211, 252, .3); }
  .pt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .pt-status { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .pt-row.waiting .pt-status { color: var(--ok); }
  .pt-row.playing .pt-status { color: var(--dia); }
  .pt-bet { font-size: 12px; font-weight: 700; color: #bae6fd; padding: 2px 8px; border-radius: 99px; background: rgba(56, 189, 248, .14); }
  .pt-bet.free { color: #bbf7d0; background: rgba(74, 222, 128, .14); }
  .pt-title { font-size: 15px; }
  .pt-meta { font-size: 11.5px; color: #94a3b8; }
  .pt-bottom { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
  .pt-seats { display: flex; }
  .pt-seats > * { margin-left: -6px; }
  .pt-seats > *:first-child { margin-left: 0; }
  .pt-ava { width: 28px; height: 28px; font-size: 12px; border: 2px solid #12263d; }
  .pt-ava.ava-legend { font-size: 15px; }
  .pt-ava.has-frame::after { inset: -3px; padding: 2px; }
  .pt-empty {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px dashed rgba(240, 193, 74, .55); color: var(--brass);
    background: #12263d; font-size: 14px;
  }
  .pt-score { flex: 1; min-width: 0; font-size: 11.5px; color: #cbd5e1; }
  .pt-join, .pt-watch { margin-left: auto; padding: 7px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 800; border: 0; }
  .pt-join { background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #3a2508; }
  .pt-join.short { background: rgba(255,255,255,.08); color: #94a3b8; }
  .pt-watch { background: rgba(56, 189, 248, .16); color: #e0f2fe; border: 1px solid rgba(125, 211, 252, .45); }

  /* Espectador */
  #mesa.is-spectator .chat-fab, #mesa.is-spectator .reacts, #mesa.is-spectator .voice-dock, #mesa.is-spectator .pass-btn { display: none !important; }
  .spectator-note {
    flex: 1; margin: 6px 0; padding: 18px 14px;
    border-radius: 14px; text-align: center;
    font-size: 13px; font-weight: 600; color: #bae6fd;
    background: rgba(56, 189, 248, .08); border: 1px dashed rgba(125, 211, 252, .4);
  }

  /* Apuesta personalizada */
  .bet-input-row { display: flex; align-items: center; gap: 6px; }
  .bet-step {
    width: 40px; height: 44px; flex: none; border-radius: 12px;
    border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--brass);
    font-size: 20px; font-weight: 700;
  }
  .bet-field {
    flex: 1; min-width: 0; position: relative; display: flex; align-items: center;
    border-radius: 12px; background: #0c1527; border: 1.5px solid rgba(125, 211, 252, .45);
  }
  .bet-field:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(240, 193, 74, .18); }
  .bet-field.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
  .bet-field span { padding-left: 12px; font-size: 16px; }
  .bet-field input {
    flex: 1; min-width: 0; width: 100%;
    padding: 11px 10px; border: 0; background: transparent; outline: none;
    color: #fff; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
  }
  .bet-field input::-webkit-outer-spin-button, .bet-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .bet-max { padding: 0 12px; height: 44px; border-radius: 12px; border: 1px solid rgba(125, 211, 252, .45); background: rgba(56, 189, 248, .12); color: #e0f2fe; font-size: 12px; font-weight: 800; }
  .bet-hint { margin: 6px 0 0; font-size: 12px; color: #94a3b8; }
  .bet-hint.free { color: #bbf7d0; }
  .bet-hint.err { color: #f87171; font-weight: 600; }
  #cm-create:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
  #mesa.is-spectator .hand-label { display: none; }

  /* ════════════════════════════════════════════════════════════════════
     MESA PRÉMIUM · riel dorado biselado, asientos simétricos, consola,
     atril flotante y podio de fin de partida
     ════════════════════════════════════════════════════════════════════ */
  body, body.felt-blue { --c1: #1e5a96; --c2: #0f2f55; --c3: #061424; --c-glow: rgba(56, 189, 248, .18); }
  body.felt-green { --c1: #1f9a5c; --c2: #0b5233; --c3: #03200f; --c-glow: rgba(74, 222, 128, .16); }
  body.felt-red   { --c1: #8a1f3a; --c2: #4a0f1e; --c3: #1c040b; --c-glow: rgba(248, 113, 113, .14); }
  body.felt-dark  { --c1: #2b3140; --c2: #151922; --c3: #07080c; --c-glow: rgba(240, 193, 74, .1); }

  #mesa .mesa-header-controls { padding: 10px 14px 0; }

  /* Marcador */
  .mesa-hud { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
  .hud-goal {
    flex: none; width: 50px; height: 50px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #2a4a74, #0a1626 70%);
    border: 2px solid var(--brass);
    box-shadow: inset 0 0 0 2px rgba(10, 22, 38, .9), inset 0 0 0 3px rgba(240, 193, 74, .35), 0 6px 14px rgba(0,0,0,.45);
  }
  .hud-goal small { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); line-height: 1; }
  .hud-goal strong { font-family: Fraunces, serif; font-size: 18px; font-weight: 640; color: #fff; line-height: 1.05; }
  #mesa #scores {
    flex: 1; min-width: 0;
    display: flex; gap: 6px; padding: 0;
    font-family: Fraunces, serif; font-size: 21px; letter-spacing: 0;
  }
  #mesa #scores span {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 5px 10px; border-radius: 13px;
    text-align: left !important; line-height: 1.05;
    background: rgba(8, 19, 31, .72);
    border: 1px solid rgba(242, 193, 77, .2);
  }
  #mesa #scores span.me {
    color: var(--brass);
    background: linear-gradient(180deg, rgba(240, 193, 74, .16), rgba(8, 19, 31, .72));
    border-color: rgba(240, 193, 74, .6);
  }
  #mesa #scores small { font-size: 9.5px; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #mesa #scores.multi { font-size: 17px; }
  #mesa #scores.multi span { padding: 5px 7px; }

  /* Mesa: riel biselado + paño */
  #felt {
    flex: 1; min-height: 0;
    margin: 0 8px;
    position: relative; display: block; overflow: hidden;
    border: 0; border-radius: 32px;
    background:
      linear-gradient(145deg, rgba(255, 236, 180, .22), transparent 30%, transparent 70%, rgba(0,0,0,.35)),
      linear-gradient(160deg, #4a3413 0%, #20160a 38%, #3b2a10 70%, #171007 100%);
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 226, 150, .7),
      inset 0 2px 1px rgba(255, 244, 210, .45),
      inset 0 -3px 6px rgba(0, 0, 0, .65),
      0 0 0 1px rgba(0, 0, 0, .6),
      0 18px 40px rgba(0, 0, 0, .6);
  }
  .felt-cloth {
    position: absolute; inset: 9px; border-radius: 24px; pointer-events: none;
    background:
      radial-gradient(rgba(255,255,255,.05) .7px, transparent 1px) 0 0 / 5px 5px,
      radial-gradient(ellipse 75% 60% at 50% 46%, var(--c1) 0%, var(--c2) 58%, var(--c3) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(240, 193, 74, .45),
      inset 0 4px 10px rgba(0,0,0,.55),
      inset 0 0 60px rgba(0,0,0,.6);
    display: grid; place-items: center;
  }
  .felt-cloth::before {
    content: ""; position: absolute; inset: 9px; border-radius: 17px;
    border: 1px solid rgba(240, 193, 74, .16);
  }
  .felt-cloth::after {
    content: ""; position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-glow), transparent 65%);
  }
  .felt-emblem {
    position: relative; z-index: 1;
    font-family: Fraunces, serif; font-size: 13px; font-weight: 640; letter-spacing: .42em;
    color: rgba(240, 193, 74, .1); text-align: center;
  }
  .felt-emblem::before, .felt-emblem::after { content: "◆"; margin: 0 .5em; font-size: 9px; }

  /* Zona de la cadena: siempre libre de los asientos */
  #felt .chain-wrap { position: absolute; inset: 82px 16px 82px; margin: 0 !important; z-index: 2; }
  #mesa[data-seats="3"] #felt .chain-wrap, #mesa[data-seats="4"] #felt .chain-wrap { left: 80px; right: 80px; }

  /* Asientos simétricos */
  #felt .seat-pod {
    position: absolute; z-index: 4;
    width: auto; max-width: 62%;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 5px 11px 5px 5px;
    border-radius: 18px;
    text-align: left;
    background: rgba(6, 14, 26, .64);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(240, 193, 74, .28);
    box-shadow: 0 8px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .2s, box-shadow .2s;
  }
  #felt .seat-pod.top { top: 16px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
  #felt .seat-pod.bottom { top: auto; bottom: 16px; left: 50%; right: auto; transform: translateX(-50%); }
  #felt .seat-pod.left, #felt .seat-pod.right {
    top: 50%; transform: translateY(-50%);
    width: 66px; max-width: none;
    flex-direction: column; gap: 4px;
    padding: 7px 4px 6px; text-align: center;
  }
  #felt .seat-pod.left { left: 15px; right: auto; bottom: auto; }
  #felt .seat-pod.right { right: 15px; left: auto; bottom: auto; }
  #felt .seat-pod.me { border-color: rgba(240, 193, 74, .6); background: linear-gradient(180deg, rgba(240, 193, 74, .14), rgba(6, 14, 26, .7)); }
  #felt .seat-pod.turn { border-color: rgba(74, 222, 128, .85); box-shadow: 0 0 0 1px rgba(74, 222, 128, .35), 0 0 22px rgba(74, 222, 128, .3), 0 8px 18px rgba(0,0,0,.42); }
  .pod-ava-wrap { position: relative; flex: none; display: grid; }
  #felt .seat-pod .pod-ava { width: 40px; height: 40px; font-size: 16px; }
  #felt .seat-pod .pod-ava.ava-legend { font-size: 21px; }
  #felt .seat-pod.turn .pod-ava { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 4px #4ade80; }
  .pod-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  #felt .seat-pod.left .pod-info, #felt .seat-pod.right .pod-info { align-items: center; }
  #felt .seat-pod .pod-name {
    display: block; max-width: 130px;
    font-size: 12.5px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #felt .seat-pod.left .pod-name, #felt .seat-pod.right .pod-name { max-width: 60px; font-size: 11px; }
  .pod-name small { font-size: 10px; font-weight: 500; color: var(--mute); }
  .pod-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  #felt .seat-pod.left .pod-meta, #felt .seat-pod.right .pod-meta { justify-content: center; }
  #felt .seat-pod .tiles-pill { margin-top: 0; font-size: 10.5px; padding: 1px 7px 1px 5px; }
  #felt .seat-pod .pod-score {
    font-family: Fraunces, serif; font-size: 12px; line-height: 1;
    padding: 2px 6px; border-radius: 99px; background: rgba(240, 193, 74, .16); color: var(--brass);
  }
  #felt .pod-badges:empty { display: none; }
  #felt .pod-backs { display: flex; margin-top: 1px; }
  #felt .pod-backs .back { width: 6px; height: 10px; margin-left: -2px; border-radius: 1.5px; }
  #felt .pod-backs .back:first-child { margin-left: 0; }
  #felt .pod-reveal { font-size: 9px; color: #fde68a; max-width: 130px; }
  #felt .seat-pod.left .pod-reveal, #felt .seat-pod.right .pod-reveal { max-width: 60px; }
  .pod-think {
    position: absolute; right: -5px; top: -5px;
    display: flex; gap: 2px; padding: 3px 4px; border-radius: 99px;
    background: #4ade80; box-shadow: 0 2px 6px rgba(0,0,0,.4);
  }
  .pod-think i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #052e16; animation: thinkDot 1s ease-in-out infinite; }
  .pod-think i:nth-child(2) { animation-delay: .15s; }
  .pod-think i:nth-child(3) { animation-delay: .3s; }
  @keyframes thinkDot { 50% { transform: translateY(-2px); opacity: .5; } }
  #felt .reconnect-banner { top: 74px; left: 18px; right: 18px; }

  /* Consola flotante y traslúcida */
  .table-console {
    margin: 6px 8px 0;
    padding: 6px 8px 7px;
    border-radius: 18px;
    background: rgba(6, 14, 26, .72);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(240, 193, 74, .26);
    box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
    display: flex; flex-direction: column; gap: 5px;
  }
  .tc-log { padding: 0 4px; min-height: 40px; }
  #mesa .tc-status {
    margin: 0; padding: 0; min-height: 0;
    font-size: 12.5px; font-weight: 700; text-align: left; color: #fde68a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #mesa .tc-status.mine { color: #86efac; }
  .tc-lines { min-height: 30px; }
  .tc-line { margin: 1px 0 0; font-size: 11.5px; color: #8193aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tc-line.new { color: #cbd5e1; animation: tcIn .3s ease; }
  .tc-line.chat b { color: var(--dia); font-weight: 700; }
  @keyframes tcIn { from { opacity: 0; transform: translateY(4px); } }
  .tc-bar { display: flex; align-items: center; gap: 6px; }
  #mesa .voice-dock { position: static; display: flex; gap: 5px; z-index: auto; }
  #mesa .voice-fab { width: 36px; height: 36px; }
  #mesa .vf-ico { width: 18px; height: 18px; }
  #mesa .speaker-btn { width: 32px; height: 32px; font-size: 14px; }
  #mesa .chat-fab { position: relative; right: auto; bottom: auto; width: 36px; height: 36px; font-size: 17px; flex: none; }
  #mesa .reacts { flex: 1; min-width: 0; display: flex; gap: 5px; overflow-x: auto; padding: 0; scroll-snap-type: x proximity; }
  #mesa .reacts button {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    font-size: 17px; display: grid; place-items: center;
    border: 1px solid rgba(240, 193, 74, .32); background: rgba(255,255,255,.06);
  }
  #mesa .reacts .react-phrase {
    width: auto; padding: 0 11px; border-radius: 99px;
    font-size: 12px; font-weight: 600; color: #e2e8f0; white-space: nowrap;
    background: rgba(240, 193, 74, .1);
  }

  /* Atril flotante */
  .hand-zone.rack {
    position: relative; overflow: hidden;
    margin: 6px 6px 8px;
    padding: 7px 0 9px;
    border-radius: 22px;
    border: 1px solid rgba(240, 193, 74, .55);
    border-top-color: #d9a44a;
    background:
      linear-gradient(180deg, rgba(255, 230, 160, .1), transparent 30%),
      linear-gradient(180deg, #2f1a09 0%, #1d0f05 55%, #120802 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 190, .4),
      inset 0 -6px 10px rgba(0, 0, 0, .55),
      0 16px 32px rgba(0, 0, 0, .65),
      0 0 0 1px rgba(0, 0, 0, .5);
  }
  .hand-zone.rack::before { left: 18px; right: 18px; }
  .hand-zone.rack::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 5px; height: 6px; border-radius: 99px;
    background: linear-gradient(180deg, #8a5a1c, #3a2207);
    box-shadow: inset 0 1px 0 rgba(255, 226, 160, .5), 0 1px 2px rgba(0,0,0,.6);
    pointer-events: none;
  }
  .rack-timer { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(0,0,0,.35); }
  .rack-timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ef4444, #f59e0b 30%, #f0c14a); box-shadow: 0 0 8px rgba(240, 193, 74, .7); }
  #mesa .hand-label { padding: 2px 12px 0; align-items: center; }
  .rack-title { display: inline-flex; align-items: center; gap: 7px; }
  .rack-title .tiles-pill { margin: 0; text-transform: none; letter-spacing: 0; }
  .rack-actions { display: flex; align-items: center; gap: 8px; }
  #mesa .hand { gap: 4px; padding: 13px 8px 12px; position: relative; z-index: 1; }

  /* ── Podio de fin de partida ── */
  .end-box.pop { animation: boxPop .5s cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes boxPop { from { transform: scale(.82) translateY(20px); opacity: 0; } }
  .end-box.podium-mode {
    max-width: 360px; width: 94%;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 50% 0%, rgba(240, 193, 74, .28), transparent 55%),
      var(--sheet);
    border: 1.5px solid rgba(240, 193, 74, .85);
    box-shadow: 0 0 0 4px rgba(240, 193, 74, .08), 0 30px 60px rgba(0,0,0,.75), 0 0 50px rgba(240, 193, 74, .22);
    gap: 10px;
  }
  .end-box.podium-mode .end-box-title {
    font-family: Fraunces, serif; font-size: 28px; font-weight: 640;
    background: linear-gradient(180deg, #fff3c4, #f0c14a 55%, #c4892e);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .end-box.is-win .end-box-ico { animation: trophy 2.2s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(240, 193, 74, .75)); }
  @keyframes trophy { 50% { transform: translateY(-4px) rotate(-4deg) scale(1.05); } }
  .podium { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-top: 18px; }
  .pd-col { position: relative; flex: 1; max-width: 104px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: riseUp .6s cubic-bezier(.2, 1.2, .4, 1) both; }
  .pd-col.place-1 { animation-delay: .1s; }
  .pd-col.place-2 { animation-delay: .25s; }
  .pd-col.place-3 { animation-delay: .4s; }
  @keyframes riseUp { from { transform: translateY(30px); opacity: 0; } }
  .pd-avas { display: flex; }
  .pd-avas .pd-ava + .pd-ava { margin-left: -12px; }
  .pd-ava { width: 42px; height: 42px; font-size: 17px; border: 2px solid #0c1c30; }
  .place-1 .pd-ava { width: 52px; height: 52px; font-size: 21px; }
  .pd-ava.ava-legend { font-size: 24px; }
  .pd-crown { position: absolute; top: -20px; font-size: 20px; animation: crownBob 2.4s ease-in-out infinite; z-index: 3; left: 50%; transform: translateX(-50%); }
  .pd-name { max-width: 100%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
  .pd-col.mine .pd-name { color: var(--brass); }
  .pd-col.mine .pd-ava { box-shadow: 0 0 0 2px var(--brass); }
  .pd-col.deserter { opacity: .55; filter: grayscale(.5); }
  .pd-score { font-size: 11px; color: #fde68a; font-weight: 700; }
  .pd-step {
    width: 100%; margin-top: 5px; border-radius: 10px 10px 4px 4px;
    display: grid; place-items: center;
    font-family: Fraunces, serif; font-size: 22px; font-weight: 640; color: rgba(42, 28, 8, .85);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.4);
  }
  .place-1 .pd-step { height: 72px; background: linear-gradient(180deg, #fff3c4, #f0c14a 45%, #a97832); box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 0 22px rgba(240, 193, 74, .4), 0 8px 18px rgba(0,0,0,.4); }
  .place-2 .pd-step { height: 52px; background: linear-gradient(180deg, #f8fafc, #a8b3c4 50%, #5b6779); }
  .place-3 .pd-step { height: 38px; background: linear-gradient(180deg, #fed7aa, #c2783c 55%, #7c3f12); }
  .pot-card {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 15px; text-align: left;
    background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(12, 74, 110, .28));
    border: 1px solid rgba(125, 211, 252, .45);
  }
  .pot-card.free { background: linear-gradient(135deg, rgba(74, 222, 128, .14), rgba(5, 46, 22, .3)); border-color: rgba(74, 222, 128, .45); }
  .pot-ico { font-size: 26px; filter: drop-shadow(0 0 8px rgba(125, 211, 252, .7)); }
  .pot-main small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }
  .pot-main b { font-family: Fraunces, serif; font-size: 24px; font-weight: 640; color: #e0f2fe; line-height: 1.05; }
  .pot-card.free .pot-main b { color: #bbf7d0; }
  .pot-note { margin-left: auto; font-size: 11px; color: #bbf7d0; text-align: right; }
  .pot-lines { margin-left: auto; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
  .pot-lines .dl { font-size: 11.5px; padding: 3px 8px; }
  .xp-card {
    width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 15px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(240, 193, 74, .3);
  }
  .xp-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
  .xp-lvl { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #cbd5e1; }
  .xp-gain { font-family: Fraunces, serif; font-size: 19px; font-weight: 640; color: #4ade80; font-variant-numeric: tabular-nums; }
  .xp-card.neg .xp-gain { color: #f87171; }
  .xp-bar { display: block; height: 10px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
  .xp-bar i {
    position: relative; display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #0ea5e9, #7dd3fc 55%, #f0c14a);
    transition: width 1s cubic-bezier(.2, .8, .2, 1);
    overflow: hidden;
  }
  .xp-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 1.8s ease-in-out .9s infinite; }
  .xp-note { display: block; margin-top: 4px; font-size: 10.5px; color: #94a3b8; text-align: right; }
  .xp-card.levelup { border-color: var(--brass); animation: lvlGlow 1.2s ease 2; }
  .xp-card.levelup .xp-lvl { color: var(--brass); }
  @keyframes lvlGlow { 50% { box-shadow: 0 0 22px rgba(240, 193, 74, .6); } }
  .end-actions { width: 100%; display: grid; gap: 8px; }
  .end-actions .end-box-btn { margin-top: 0; }
  .end-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; }
  .end-confetti i {
    position: absolute; top: -14px; width: 7px; height: 12px; border-radius: 2px; opacity: .95;
    animation: confettiFall linear forwards;
  }
  @keyframes confettiFall { to { transform: translate(var(--drift), 720px) rotate(var(--rot)); opacity: .2; } }
  #end-box > *:not(.end-confetti) { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: reduce) {
    .end-confetti i, .pd-col, .end-box.pop, .pod-think i, .xp-bar i::after { animation: none !important; }
  }
  .end-report { padding-top: 4px; }
  .end-report-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(248, 113, 113, .3);
    background: rgba(248, 113, 113, .07); color: #fca5a5; font-size: 12.5px; font-weight: 600;
  }
  .end-report-toggle i { font-style: normal; transition: transform .2s; }
  .end-report-toggle.open i { transform: rotate(180deg); }
  #end-report-list { margin-top: 6px; }

  /* ════════════════════════════════════════════════════════════════════
     MESA AMPLIA · dorso USA/Cuba · atril de dos niveles
     ════════════════════════════════════════════════════════════════════ */

  /* ── Cabecera y marcador compactos para dar todo el alto al tapete ── */
  #mesa .mesa-header-controls { padding: 8px 12px 0; }
  #mesa .back { font-size: 13px; }
  #mesa .felt-color-btn { padding: 4px 10px; font-size: 11px; }
  #mesa .mesa-hud { padding: 6px 8px 5px; gap: 6px; }
  #mesa .hud-goal { width: 40px; height: 40px; border-width: 1.5px; }
  #mesa .hud-goal small { font-size: 7.5px; }
  #mesa .hud-goal strong { font-size: 15px; }
  #mesa #scores { font-size: 17px; gap: 5px; }
  #mesa #scores span { padding: 3px 9px; border-radius: 11px; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
  #mesa #scores small { margin: 0; }
  #mesa #scores.multi { font-size: 15px; }
  #mesa #scores.multi span { flex-direction: column; align-items: flex-start; padding: 3px 7px; gap: 0; }

  /* ── Tapete amplio: casi de borde a borde, riel más fino ── */
  #felt { margin: 0 4px; border-radius: 28px; }
  #felt .felt-cloth { inset: 6px; border-radius: 23px; }
  #felt .felt-cloth::before { inset: 7px; border-radius: 17px; }
  .felt-emblem { font-size: 12px; letter-spacing: .5em; color: rgba(240, 193, 74, .09); }

  /* Asientos más compactos → más espacio libre para la cadena */
  #felt .seat-pod { padding: 4px 9px 4px 4px; gap: 7px; border-radius: 16px; }
  #felt .seat-pod.top { top: 12px; }
  #felt .seat-pod.bottom { bottom: 12px; }
  #felt .seat-pod.left { left: 11px; }
  #felt .seat-pod.right { right: 11px; }
  #felt .seat-pod.left, #felt .seat-pod.right { width: 60px; padding: 6px 3px 5px; gap: 3px; }
  #felt .seat-pod .pod-ava { width: 34px; height: 34px; font-size: 14px; }
  #felt .seat-pod .pod-ava.ava-legend { font-size: 18px; }
  #felt .seat-pod .pod-name { font-size: 11.5px; max-width: 116px; }
  #felt .seat-pod.left .pod-name, #felt .seat-pod.right .pod-name { font-size: 10.5px; max-width: 54px; }
  #felt .seat-pod .tiles-pill { font-size: 10px; padding: 1px 6px 1px 4px; }
  #felt .chain-wrap { inset: 74px 10px 66px; }
  #mesa[data-seats="3"] #felt .chain-wrap, #mesa[data-seats="4"] #felt .chain-wrap { left: 74px; right: 74px; }
  #felt .reconnect-banner { top: 66px; left: 12px; right: 12px; }

  /* Consola más delgada */
  #mesa .table-console { margin: 5px 4px 0; padding: 5px 7px 6px; gap: 4px; border-radius: 16px; }
  #mesa .tc-log { min-height: 0; }
  #mesa .tc-lines { min-height: 15px; }
  #mesa .tc-line:not(.new) { display: none; }
  #mesa .reacts button { width: 32px; height: 32px; font-size: 16px; }
  #mesa .reacts .react-phrase { width: auto; }
  #mesa .voice-fab, #mesa .chat-fab { width: 34px; height: 34px; }

  /* ── Dorso 3D: mitad EE. UU. + mitad Cuba con bisel dorado ── */
  .back .bk-usa, .back .bk-cuba { display: none; }
  .pod-backs.back-usacuba .back, .back-demo.back-usacuba .back {
    display: flex !important; flex-direction: column; gap: 1px;
    align-items: stretch !important; justify-content: stretch !important;
    position: relative; overflow: hidden;
    padding: 1.5px;
    background: linear-gradient(145deg, #fff3cf 0%, #f2c75a 30%, #c98a1c 65%, #7a4603 100%) !important;
    border: 1px solid rgba(255, 238, 175, .75) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 240, .95),
      inset 0 -1px 1px rgba(80, 40, 0, .5),
      0 1px 0 #b57c15, 0 2px 0 #764903,
      0 3px 6px rgba(0, 0, 0, .55) !important;
    animation: none !important;
  }
  .pod-backs.back-usacuba .back > .bk-usa, .pod-backs.back-usacuba .back > .bk-cuba,
  .back-demo.back-usacuba .back > .bk-usa, .back-demo.back-usacuba .back > .bk-cuba {
    display: block; flex: 1; position: relative; overflow: hidden; border-radius: 1.5px;
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .25);
  }
  .pod-backs.back-usacuba .back .back-crest, .back-demo.back-usacuba .back .back-crest { display: none; }
  /* Brillo de resina sobre todo el dorso */
  .pod-backs.back-usacuba .back::after, .back-demo.back-usacuba .back::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .08) 35%, transparent 55%, rgba(0, 0, 0, .18) 100%);
  }
  /* Bandera de EE. UU.: 13 franjas + cantón azul con estrellas */
  .bk-usa { background: repeating-linear-gradient(180deg, #b22234 0 7.69%, #ffffff 7.69% 15.38%); }
  .bk-usa::before {
    content: ""; position: absolute; left: 0; top: 0; width: 46%; height: 54%;
    background:
      radial-gradient(circle, #ffffff 26%, transparent 34%) 0 0 / 33.4% 33.4%,
      #3c3b6e;
  }
  /* Bandera de Cuba: 5 franjas + triángulo rojo con estrella blanca */
  .bk-cuba { background: repeating-linear-gradient(180deg, #002a8f 0 20%, #ffffff 20% 40%); }
  .bk-cuba::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 56%;
    background: #cf142b;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .bk-cuba::after {
    content: ""; position: absolute; left: 6%; top: 50%; width: 28%; aspect-ratio: 1; transform: translateY(-50%);
    background: #ffffff;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  /* Tamaño visible de los dorsos de los rivales */
  #felt .pod-backs { display: flex; margin-top: 2px; }
  #felt .pod-backs { gap: 2px; }
  #felt .pod-backs .back { width: 13px; height: 24px; margin-left: 0; border-radius: 2.5px; }
  #felt .pod-backs .back:first-child { margin-left: 0; }
  #felt .seat-pod.left .pod-backs, #felt .seat-pod.right .pod-backs {
    display: grid; grid-template-columns: repeat(5, 9px); gap: 2px 1px; justify-content: center;
  }
  #felt .seat-pod.left .pod-backs .back, #felt .seat-pod.right .pod-backs .back { width: 9px; height: 16px; margin: 0; border-radius: 2px; }
  .back-demo .back { width: 30px; height: 52px; }
  .buy-preview .back-demo .back { width: 38px; height: 66px; }

  /* ── Atril de dos niveles: 5 + 5 fichas acostadas ── */
  #mesa .hand {
    --tw: 66px; --ts: 36px;
    display: grid;
    grid-template-columns: repeat(5, var(--tw));
    justify-content: center;
    gap: 9px 8px;
    padding: 12px 10px 14px;
    overflow: visible;
    scroll-snap-type: none;
    perspective: none;
  }
  #mesa .hand > .tile:first-child, #mesa .hand > .tile:last-child { margin: 0; }
  #mesa .hand .tile.h.rack-tile {
    width: var(--tw); height: var(--ts);
    border-radius: calc(var(--ts) * .2);
    transform: none;
  }
  #mesa .hand .tile.rack-tile::before { border-radius: calc(var(--ts) * .18); }
  #mesa .hand .tile.rack-tile .half { padding: calc(var(--ts) * .1); }
  #mesa .hand .tile.rack-tile .pip { width: calc(var(--ts) * .17); height: calc(var(--ts) * .17); }
  #mesa .hand .tile.rack-tile .seam { width: 2.5px; margin: calc(var(--ts) * .13) 0; height: auto; }
  #mesa .hand .tile.rack-tile .spinner { width: calc(var(--ts) * .15); height: calc(var(--ts) * .15); }
  #mesa .hand .tile.rack-tile.playable { transform: translateY(-4px); }
  #mesa .hand .tile.rack-tile.playable:hover { transform: translateY(-6px) scale(1.03); }
  #mesa .hand .tile.rack-tile.selected { transform: translateY(-7px) scale(1.05) !important; }
  #mesa .hand .tile.rack-tile.waiting { opacity: .9; }
  #mesa .hand-zone.rack { margin: 5px 4px 6px; padding-bottom: 12px; }
  /* Repisa entre las dos filas del atril */
  #mesa .hand::before {
    content: ""; position: absolute; left: 14px; right: 14px; top: calc(12px + var(--ts) + 3px); height: 3px; border-radius: 99px;
    background: linear-gradient(180deg, rgba(138, 90, 28, .9), rgba(58, 34, 7, .9));
    box-shadow: inset 0 1px 0 rgba(255, 226, 160, .35);
    pointer-events: none; z-index: 0;
  }
  #mesa .hand .tile { z-index: 1; }
  #mesa .hand .spectator-note { grid-column: 1 / -1; }
  #mesa.is-spectator .hand::before { display: none; }

  /* ════════════════════════════════════════════════════════════════════
     LA PUJA · fichas boca abajo para decidir la primera salida
     ════════════════════════════════════════════════════════════════════ */
  .puja-layer {
    position: absolute; inset: 6px; z-index: 8; border-radius: 23px;
    display: grid; place-items: center; padding: 14px;
    background: radial-gradient(ellipse at 50% 45%, rgba(6, 14, 26, .35), rgba(4, 10, 20, .78));
    animation: tcIn .35s ease;
  }
  .puja-card {
    width: 100%; max-width: 330px;
    padding: 14px 12px 16px; border-radius: 20px; text-align: center;
    background: rgba(6, 14, 26, .7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(240, 193, 74, .5);
    box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 30px rgba(240, 193, 74, .12);
  }
  .puja-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--brass); }
  .puja-sub { margin: 4px 0 12px; font-size: 12px; color: #cbd5e1; line-height: 1.35; }
  .puja-groups { display: flex; justify-content: center; gap: 10px; }
  .puja-groups.teams { gap: 14px; }
  .puja-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .puja-group.team { padding: 8px 8px 6px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
  .puja-group.team.t0 { border-color: rgba(240, 193, 74, .35); }
  .puja-group.team.t1 { border-color: rgba(56, 189, 248, .35); }
  .pg-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .pg-label.t0 { color: var(--brass); }
  .pg-label.t1 { color: var(--dia); }
  .pg-tiles { display: flex; gap: 8px; }
  .puja-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; transition: opacity .3s, transform .3s; }
  .puja-slot.unused { opacity: .4; }
  .puja-slot.winner { transform: translateY(-4px); }
  .puja-tile { width: 42px; height: 74px; padding: 0; border: 0; background: none; perspective: 500px; border-radius: 8px; }
  .puja-tile:disabled { cursor: default; }
  .pt-inner {
    position: relative; display: block; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.3, 1.3, .5, 1);
  }
  .puja-tile.flipped .pt-inner { transform: rotateY(180deg); }
  .pt-face { position: absolute; inset: 0; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .pt-front { transform: rotateY(180deg); }
  .puja-tile .back-demo { display: block; }
  .puja-tile .back-demo .back { width: 42px; height: 74px; border-radius: 7px; transform: none !important; }
  .puja-tile .pt-front .tile.v { width: 42px; height: 74px; border-radius: 8px; }
  .puja-tile .pt-front .tile .half { padding: 3px; }
  .puja-tile .pt-front .pip { width: 6.5px; height: 6.5px; }
  .puja-tile .pt-front .seam { margin: 0 3px; height: 2px; }
  .puja-tile .pt-front .spinner { width: 5.5px; height: 5.5px; }
  .puja-tile.pickable { animation: pujaOffer 1.4s ease-in-out infinite; cursor: pointer; }
  .puja-tile.pickable:hover .pt-inner, .puja-tile.pickable:focus-visible .pt-inner { transform: translateY(-5px); }
  .puja-tile.pickable:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
  @keyframes pujaOffer { 50% { filter: drop-shadow(0 0 10px rgba(240, 193, 74, .75)); } }
  .puja-tile.taken:not(.flipped) .pt-inner { transform: translateY(-3px) rotate(-3deg); }
  .puja-slot.winner .puja-tile { filter: drop-shadow(0 0 14px rgba(240, 193, 74, .95)); }
  .puja-slot.winner .puja-tile .tile { box-shadow: 0 0 0 2.5px #f0c14a, 0 0 18px rgba(240, 193, 74, .85) !important; }
  .pk-chip {
    display: inline-flex; align-items: center; gap: 3px;
    max-width: 62px; padding: 1px 6px 1px 1px; border-radius: 99px;
    font-size: 9.5px; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  }
  .pk-chip.me { color: #2a1c08; background: var(--brass); border-color: transparent; }
  .pk-chip.empty { padding: 1px 8px; color: #64748b; }
  .pk-ava { width: 16px; height: 16px; font-size: 8px; border-width: 0; }
  .pk-ava.has-frame::after { inset: -2px; padding: 1.5px; }
  .pk-ava.ava-legend { font-size: 10px; }
  @media (prefers-reduced-motion: reduce) { .pt-inner { transition: none; } .puja-tile.pickable { animation: none; } }
  .tiles-pill.puja { color: #bae6fd; background: rgba(56, 189, 248, .14); border-color: rgba(125, 211, 252, .45); }

  /* ════════════════════════════════════════════════════════════════════
     FICHAS: pips siempre dentro de su mitad + atril de pie
     ════════════════════════════════════════════════════════════════════ */
  /* La rejilla 3×3 ya no crece por el tamaño del pip: cada celda cabe en su mitad */
  .tile .half {
    container-type: size;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    min-width: 0; min-height: 0;
    place-items: center;
  }
  /* El pip mide como máximo ~80 % de su celda (27 % del lado corto de la mitad) */
  .tile .pip {
    width: min(var(--pip, 8px), 27cqmin);
    height: min(var(--pip, 8px), 27cqmin);
    flex: none;
  }
  .tile .pip::after { top: 14%; left: 20%; width: 32%; height: 26%; }
  /* Fichas del tablero (acostadas y dobles/esquinas) */
  .tile.h, .tile.d { --pip: 7px; }
  .tile.h .half, .tile.d .half { padding: 3px; }
  .tile.h .seam { margin: 5px 0; width: 2px; }
  .tile.d .seam { margin: 0 5px; height: 2px; }
  .tile.h .spinner, .tile.d .spinner { width: 5px; height: 5px; }
  .puja-tile .pt-front .tile { --pip: 7px; }

  /* Atril: 10 fichas de pie en dos filas de 5 */
  #mesa .hand {
    --tw: 44px; --th: 80px;
    grid-template-columns: repeat(5, var(--tw));
    gap: 10px 12px;
    padding: 12px 10px 14px;
  }
  #mesa .hand .tile.v.rack-tile {
    width: var(--tw); height: var(--th);
    border-radius: calc(var(--tw) * .17);
    --pip: calc(var(--tw) * .2);
    transform: none;
  }
  #mesa .hand .tile.rack-tile::before { border-radius: calc(var(--tw) * .15); }
  #mesa .hand .tile.v.rack-tile .half { padding: calc(var(--tw) * .1); }
  #mesa .hand .tile.v.rack-tile .pip { width: min(var(--pip), 27cqmin); height: min(var(--pip), 27cqmin); }
  #mesa .hand .tile.v.rack-tile .seam { width: auto; height: 2px; margin: 0 calc(var(--tw) * .12); }
  #mesa .hand .tile.v.rack-tile .spinner { width: calc(var(--tw) * .14); height: calc(var(--tw) * .14); }
  #mesa .hand .tile.rack-tile.playable { transform: translateY(-5px); }
  #mesa .hand .tile.rack-tile.playable:hover { transform: translateY(-7px) scale(1.03); }
  #mesa .hand .tile.rack-tile.selected { transform: translateY(-9px) scale(1.05) !important; }
  #mesa .hand::before { top: calc(12px + var(--th) + 4px); }

  /* ── Acceso por MMR y peaje ── */
  .cm-advanced { margin-top: 12px; border-radius: 14px; border: 1px solid rgba(242, 193, 77, .25); background: rgba(255,255,255,.03); padding: 0 10px; }
  .cm-advanced > summary {
    list-style: none; cursor: pointer; padding: 10px 0;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brass);
  }
  .cm-advanced > summary::-webkit-details-marker { display: none; }
  .cm-advanced > summary::after { content: "▾"; float: right; transition: transform .2s; }
  .cm-advanced[open] > summary::after { transform: rotate(180deg); }
  .cm-advanced > summary small { letter-spacing: 0; text-transform: none; color: #bae6fd; font-weight: 600; }
  .cm-advanced[open] { padding-bottom: 10px; }
  .cm-advanced .cm-label:first-of-type { margin-top: 0; }
  .cm-access { display: grid; grid-template-columns: 1fr 1fr; }
  .cm-access button { border-radius: 14px; padding: 9px 10px; text-align: left; }
  .cm-access button b { display: block; font-size: 12.5px; line-height: 1.2; }
  .cm-access button small { font-size: 10.5px; opacity: .8; }
  .cm-mmr-row { display: flex; gap: 6px; margin-top: 8px; }
  .cm-mmr-presets { display: flex; gap: 4px; }
  .cm-mmr-presets button {
    padding: 0 9px; border-radius: 10px; font-size: 12px; font-weight: 700;
    border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ivory);
  }
  .toll-tag {
    margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 99px; background: rgba(251, 191, 36, .18); color: #fbbf24;
  }
  .pt-mmr { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 99px; font-weight: 700; color: #bae6fd; background: rgba(56, 189, 248, .14); }
  .pt-mmr.below { color: #fbbf24; background: rgba(251, 191, 36, .16); }
  .pt-join.toll { background: linear-gradient(180deg, #fde68a, #f59e0b); color: #3a2508; }
  .my-mmr-chip {
    display: inline-block; margin: -2px 0 8px; padding: 3px 10px; border-radius: 99px;
    font-size: 12px; font-weight: 700; color: #bae6fd;
    background: rgba(56, 189, 248, .12); border: 1px solid rgba(125, 211, 252, .35);
  }
  .toll-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .toll-compare div { padding: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
  .toll-compare small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
  .toll-compare b { font-family: Fraunces, serif; font-size: 22px; color: #e0f2fe; }
  .toll-compare .mine b { color: #fbbf24; }
  .mmr-line { margin: 0; width: 100%; font-size: 12.5px; font-weight: 700; text-align: center; padding: 6px 10px; border-radius: 10px; }
  .mmr-line.up { color: #86efac; background: rgba(74, 222, 128, .1); }
  .mmr-line.down { color: #fca5a5; background: rgba(248, 113, 113, .1); }
  #toll-pay { white-space: nowrap; font-size: 14px; padding: 12px 10px; }

  /* ════════════════════════════════════════════════════════════════════
     PIPS A PRUEBA DE NAVEGADORES · tamaño fijo por tipo de ficha
     (sin depender de container queries; si existen, solo afinan)
     ════════════════════════════════════════════════════════════════════ */
  .tile .half { overflow: hidden; }
  .tile .pip { width: var(--pip, 8px); height: var(--pip, 8px); }
  .tile.d, .tile.h { --pip: 6px; }                    /* fichas del tablero 34×60 */
  .puja-tile .pt-front .tile { --pip: 7px; }           /* puja 42×74 */
  #mesa .hand .tile.v.rack-tile { --pip: calc(var(--tw) * .17); }
  #mesa .hand .tile.v.rack-tile .pip { width: var(--pip); height: var(--pip); }
  @supports (width: 1cqmin) {
    .tile .pip, #mesa .hand .tile.v.rack-tile .pip { width: min(var(--pip, 8px), 27cqmin); height: min(var(--pip, 8px), 27cqmin); }
  }

  /* Acceso por MMR siempre visible en Crear mesa */
  .cm-access-block { margin-top: 12px; padding: 10px; border-radius: 14px; border: 1px solid rgba(240, 193, 74, .35); background: rgba(240, 193, 74, .05); }
  .cm-access-block .cm-label { margin-top: 0; }
  .toll-rule { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(251, 191, 36, .1); border: 1px dashed rgba(251, 191, 36, .45); }
  .toll-rule span { font-size: 16px; line-height: 1.2; }
  .toll-rule p { margin: 0; font-size: 11.5px; line-height: 1.4; color: #fde68a; text-align: left; }

  /* Doble contención: la cara y cada mitad recortan su contenido */
  .tile .face { overflow: hidden; border-radius: inherit; }
  .tile .half { overflow: hidden; min-width: 0; min-height: 0; }
  .cm-toll-row { margin-top: 8px; }
  .cm-toll-row .cm-label { margin-top: 0; }
  .cm-toll-presets { margin-top: 6px; }
  .cm-toll-presets button { height: 32px; }
  .cm-toll-presets button.on { background: var(--brass); color: #2a1c08; border-color: transparent; }
  #cm-toll-field span { font-size: 14px; }

  /* ════════════════════════════════════════════════════════════════════
     ATRIL EN UNA SOLA FILA DESLIZABLE · 10 fichas de pie
     ════════════════════════════════════════════════════════════════════ */
  #mesa .hand {
    --tw: 44px; --th: 80px;
    display: flex; grid-template-columns: none;
    gap: 6px;
    padding: 12px 10px 16px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding: 0 10px;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #mesa .hand::-webkit-scrollbar { display: none; }
  #mesa .hand::before { display: none; }
  #mesa .hand > .tile { flex: none; scroll-snap-align: center; }
  #mesa .hand > .tile:first-child { margin-left: auto; }
  #mesa .hand > .tile:last-child { margin-right: auto; }
  /* Bordes difuminados solo cuando hay más fichas fuera de la vista */
  #mesa .hand.scrolls {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  #mesa .hand .spectator-note { flex: 1; }

  /* ════════════════════════════════════════════════════════════════════
     ATRIL PANORÁMICO · las 10 fichas completas en una sola fila
     ════════════════════════════════════════════════════════════════════ */
  #mesa .hand-zone.rack { margin: 5px 2px 6px; }
  #mesa .hand {
    gap: 4px;
    padding: 12px 6px 14px;
    overflow: visible;
    justify-content: center;
    scroll-snap-type: none;
  }
  #mesa .hand.scrolls { -webkit-mask-image: none; mask-image: none; }
  #mesa .hand > .tile:first-child, #mesa .hand > .tile:last-child { margin: 0; }
  #mesa .hand .tile.v.rack-tile { border-radius: calc(var(--tw) * .2); }
  #mesa .hand .tile.v.rack-tile .half { padding: calc(var(--tw) * .11); }
  #mesa .hand .tile.v.rack-tile .seam { margin: 0 calc(var(--tw) * .13); }

  /* ════════════════════════════════════════════════════════════════════
     RIVALES AL ESTILO CLÁSICO · cajón con sus fichas boca abajo
     ════════════════════════════════════════════════════════════════════ */
  #felt .seat-pod, #felt .seat-pod.left, #felt .seat-pod.right { flex-direction: column; align-items: center; gap: 5px; }
  .pod-head { display: flex; align-items: center; gap: 7px; }
  #felt .seat-pod.left .pod-head, #felt .seat-pod.right .pod-head { flex-direction: column; gap: 3px; }
  #felt .seat-pod.top, #felt .seat-pod.bottom { padding: 5px 9px 6px; }
  #felt .seat-pod.left, #felt .seat-pod.right { width: 62px; padding: 6px 4px 7px; }

  /* Cajón: base de madera con borde dorado donde reposan las fichas */
  #felt .pod-tray {
    display: flex; gap: 3px; margin: 0;
    padding: 4px 5px;
    border-radius: 7px;
    background: linear-gradient(180deg, #2a1708, #160b03);
    border: 1px solid rgba(240, 193, 74, .45);
    box-shadow: inset 0 1px 0 rgba(255, 236, 190, .25), inset 0 -2px 4px rgba(0,0,0,.5);
  }
  /* Arriba (y abajo si espectas): fila de fichas de pie, mirando al centro */
  #felt .pod-tray.h { flex-direction: row; }
  #felt .pod-tray.h .back { width: 15px; height: 27px; margin: 0; border-radius: 3px; }
  /* A los lados: columna de fichas acostadas dentro del cajón lateral */
  #felt .seat-pod.left .pod-tray.v, #felt .seat-pod.right .pod-tray.v {
    display: flex; flex-direction: column; grid-template-columns: none; gap: 2px; padding: 4px;
  }
  #felt .pod-tray.v .back { width: 30px; height: 15px; margin: 0; border-radius: 3px; }
  /* Ficha acostada: la mitad EE. UU. a un lado y la de Cuba al otro */
  #felt .pod-tray.v.back-usacuba .back { flex-direction: row !important; }
  /* Llegada de fichas al repartir */
  #felt .pod-tray .back { animation: trayIn .35s ease both; }
  #felt .pod-tray .back:nth-child(2) { animation-delay: .03s; } #felt .pod-tray .back:nth-child(3) { animation-delay: .06s; }
  #felt .pod-tray .back:nth-child(4) { animation-delay: .09s; } #felt .pod-tray .back:nth-child(5) { animation-delay: .12s; }
  #felt .pod-tray .back:nth-child(6) { animation-delay: .15s; } #felt .pod-tray .back:nth-child(7) { animation-delay: .18s; }
  #felt .pod-tray .back:nth-child(8) { animation-delay: .21s; } #felt .pod-tray .back:nth-child(9) { animation-delay: .24s; }
  #felt .pod-tray .back:nth-child(10) { animation-delay: .27s; }
  #felt .seat-pod:not(.dealt) .pod-tray .back { animation: none; }
  @keyframes trayIn { from { opacity: 0; transform: translateY(-6px) scale(.8); } }
  #felt .pod-reveal { max-width: 150px; text-align: center; }
  @media (prefers-reduced-motion: reduce) { #felt .pod-tray .back { animation: none !important; } }
  /* Tamaños definitivos de los dorsos en los cajones (ganan a reglas anteriores) */
  #felt .seat-pod .pod-tray.h .back { width: 15px !important; height: 27px !important; flex: none !important; margin: 0 !important; }
  #felt .seat-pod.left .pod-tray.v .back, #felt .seat-pod.right .pod-tray.v .back {
    width: 32px !important; height: 16px !important; flex: none !important; margin: 0 !important;
  }
  #felt .seat-pod.left .pod-tray.v, #felt .seat-pod.right .pod-tray.v { align-items: center; }

  /* ════════════════════════════════════════════════════════════════════
     JUGADORES EN LÍNEA · tarjetas panorámicas en cuadrícula
     ════════════════════════════════════════════════════════════════════ */
  .online-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    max-height: none; overflow: visible;
    padding: 2px 0 8px;
  }
  .online-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 14px 10px 10px;
    border-radius: 18px;
    text-align: center;
    background:
      radial-gradient(120px 70px at 50% 0%, rgba(240, 193, 74, .14), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.05), transparent 50%),
      var(--panel);
    border: 1px solid rgba(242, 193, 77, .2);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
    transition: border-color .2s, transform .15s;
  }
  .online-card.friend { border-color: rgba(240, 193, 74, .4); }
  .online-card.reserved { border-color: rgba(74, 222, 128, .55); box-shadow: 0 0 0 1px rgba(74, 222, 128, .25), 0 10px 22px rgba(0,0,0,.28); }
  .online-card.st-off { opacity: .6; }
  .online-card.seated { opacity: .45; }
  .online-card:hover { border-color: rgba(240, 193, 74, .6); }
  .oc-ava-wrap { position: relative; display: grid; margin-bottom: 4px; }
  .oc-ava { width: 56px; height: 56px; font-size: 22px; }
  .oc-ava.ava-legend { font-size: 30px; }
  .oc-ava.has-frame::after { inset: -6px; padding: 3.5px; }
  .oc-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #12263d; z-index: 3; }
  .oc-dot.on { background: var(--ok); }
  .oc-dot.busy { background: #f59e0b; }
  .oc-dot.off { background: #64748b; }
  .oc-name { max-width: 100%; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oc-mmr {
    font-size: 12px; font-weight: 800; color: #bae6fd; font-variant-numeric: tabular-nums;
    padding: 2px 9px; border-radius: 99px; background: rgba(56, 189, 248, .14); border: 1px solid rgba(125, 211, 252, .35);
  }
  .oc-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #94a3b8; }
  .oc-friend { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); background: rgba(240,193,74,.14); padding: 1px 6px; border-radius: 99px; }
  .oc-btn {
    width: 100%; margin-top: 6px;
    padding: 8px 10px; border-radius: 12px; border: 0;
    font-size: 12.5px; font-weight: 800;
    background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #3a2508;
  }
  .oc-btn.reserved { background: rgba(74, 222, 128, .18); color: #bbf7d0; border: 1px solid rgba(74, 222, 128, .45); }
  .oc-btn:disabled { background: rgba(255,255,255,.06); color: #94a3b8; cursor: default; }

  /* MMR visible en cada asiento de la mesa */
  .mmr-chip {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: 99px;
    font-size: 10px; font-weight: 800; color: #bae6fd; white-space: nowrap; font-variant-numeric: tabular-nums;
    background: rgba(56, 189, 248, .14); border: 1px solid rgba(125, 211, 252, .35);
  }
  #felt .seat-pod.left .mmr-chip, #felt .seat-pod.right .mmr-chip { font-size: 9px; padding: 1px 4px; }
  .fc-rating { color: #bae6fd !important; }

  /* ════════════════════════════════════════════════════════════════════
     DORSO USA · CUBA SATINADO · sin brillos excesivos
     ════════════════════════════════════════════════════════════════════ */
  .pod-backs.back-usacuba .back, .back-demo.back-usacuba .back {
    background: linear-gradient(160deg, #cfa955 0%, #b68a33 50%, #8d6826 100%) !important;
    border-color: rgba(214, 182, 118, .45) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 205, .22),
      inset 0 -1px 1px rgba(60, 30, 0, .3),
      0 1px 0 #7a5410,
      0 2px 4px rgba(0, 0, 0, .4) !important;
  }
  .pod-backs.back-usacuba .back::after, .back-demo.back-usacuba .back::after {
    background: linear-gradient(160deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 40%, transparent 60%, rgba(0, 0, 0, .1) 100%);
  }
  .pod-backs.back-usacuba .back > .bk-usa, .pod-backs.back-usacuba .back > .bk-cuba,
  .back-demo.back-usacuba .back > .bk-usa, .back-demo.back-usacuba .back > .bk-cuba {
    filter: saturate(.8) brightness(.94);
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .3);
  }
  .puja-slot.winner .puja-tile { filter: drop-shadow(0 0 10px rgba(240, 193, 74, .6)); }

  /* ════════════════════════════════════════════════════════════════════
     SOCIAL PRO · Amigos y Jugadores en línea (cristal esmerilado + oro)
     ════════════════════════════════════════════════════════════════════ */
  .glass {
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 45%, rgba(0, 0, 0, .08)),
      rgba(16, 34, 58, .55);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(240, 193, 74, .24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 0, 0, .35);
  }
  .glass-field {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 4px 4px 12px; border-radius: 14px;
    background: rgba(8, 19, 31, .55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(240, 193, 74, .28);
  }
  .glass-field:focus-within { border-color: rgba(240, 193, 74, .7); box-shadow: 0 0 0 3px rgba(240, 193, 74, .14); }
  .glass-field input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 0 !important; color: #fff; outline: none; }

  /* Cabecera */
  .social-hero {
    position: relative; margin: 0 0 14px; padding: 14px 14px 12px; border-radius: 20px;
    background:
      radial-gradient(220px 120px at 100% 0%, rgba(240, 193, 74, .2), transparent 60%),
      radial-gradient(200px 120px at 0% 100%, rgba(56, 189, 248, .16), transparent 60%),
      linear-gradient(160deg, rgba(21, 51, 90, .9), rgba(10, 22, 38, .92));
    border: 1px solid rgba(240, 193, 74, .32);
    box-shadow: 0 14px 30px rgba(0,0,0,.32);
  }
  .social-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--brass); }
  .social-hero h1.page { margin: 2px 0 8px; }
  .social-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .ss-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #e2e8f0; }
  .ss-chip i { width: 8px; height: 8px; border-radius: 50%; }
  .ss-chip.on i { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
  .ss-chip.game i { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
  .social-hero .add-friend-box { margin: 0; }
  .af-ico { font-size: 13px; opacity: .8; }
  .btn-add-friend { border-radius: 11px !important; padding: 9px 16px !important; }

  /* Solicitudes: tira horizontal de tarjetas */
  .pending-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
  .pending-strip::-webkit-scrollbar { height: 0; }
  .req-card { flex: 0 0 240px; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; }
  .req-ava { width: 42px; height: 42px; font-size: 17px; }
  .req-info { flex: 1; min-width: 0; }
  .req-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .req-info small { font-size: 11px; color: #94a3b8; }
  .req-actions { display: flex; gap: 6px; }
  .req-actions .soc-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 15px; }

  /* Filtros */
  .search-wrap { margin-bottom: 8px; }
  .search-wrap .search { margin: 0 !important; }
  .friend-filters { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; }
  .friend-filters::-webkit-scrollbar { height: 0; }
  .friend-filters button {
    flex: none; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
    border: 1px solid rgba(240, 193, 74, .3); background: rgba(255,255,255,.04); color: var(--ivory);
  }
  .friend-filters button.on { background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #2a1c08; border-color: transparent; }

  /* Tarjetas de amigo y de jugador en línea */
  .friend-grid, .online-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .friend-tile, .online-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 11px 11px; border-radius: 20px; text-align: center; cursor: pointer;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 45%, rgba(0, 0, 0, .08)),
      rgba(16, 34, 58, .55);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(240, 193, 74, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px rgba(0, 0, 0, .32);
    transition: transform .18s ease, border-color .2s, box-shadow .2s;
  }
  /* Halo superior según el estado */
  .friend-tile::before, .online-card::before {
    content: ""; position: absolute; left: 50%; top: -40px; width: 140px; height: 90px; transform: translateX(-50%);
    border-radius: 50%; pointer-events: none; opacity: .5;
    background: radial-gradient(closest-side, rgba(240, 193, 74, .35), transparent);
  }
  .friend-tile.st-online::before, .online-card.st-on::before { background: radial-gradient(closest-side, rgba(74, 222, 128, .32), transparent); }
  .friend-tile.st-ingame::before, .online-card.st-busy::before { background: radial-gradient(closest-side, rgba(245, 158, 11, .32), transparent); }
  .friend-tile.st-offline, .online-card.st-off { opacity: .62; filter: saturate(.7); }
  .friend-tile:hover, .online-card:hover { transform: translateY(-2px); border-color: rgba(240, 193, 74, .55); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 32px rgba(0,0,0,.4); }
  .friend-tile:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  .ft-ava-wrap { position: relative; display: grid; margin-bottom: 4px; }
  .ft-ava, .oc-ava { width: 58px; height: 58px; font-size: 23px; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
  .ft-ava.ava-legend, .oc-ava.ava-legend { font-size: 31px; }
  .ft-ava.has-frame::after { inset: -6px; padding: 3.5px; }
  /* Estado de conexión luminoso */
  .ft-dot, .oc-dot { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #10223a; z-index: 3; }
  .ft-dot.online, .oc-dot.on { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7), 0 0 10px #4ade80; animation: statusGlow 2s ease-out infinite; }
  .ft-dot.ingame, .oc-dot.busy { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
  .ft-dot.offline, .oc-dot.off { background: #64748b; }
  @keyframes statusGlow { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6), 0 0 10px #4ade80; } 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0), 0 0 10px #4ade80; } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0), 0 0 10px #4ade80; } }
  .ft-name, .oc-name { max-width: 100%; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft-status { font-size: 11px; font-weight: 600; }
  .ft-status.online { color: #86efac; } .ft-status.ingame { color: #fcd34d; } .ft-status.offline { color: #94a3b8; }
  .ft-stats { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
  .ft-stats > span { flex: 1; display: flex; flex-direction: column; padding: 5px 4px; border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); }
  .ft-stats b { font-family: Fraunces, serif; font-size: 15px; color: #fde68a; line-height: 1.1; }
  .ft-stats small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
  .ft-actions { display: flex; gap: 6px; width: 100%; margin-top: 6px; }
  .soc-btn, .oc-btn {
    flex: 1; padding: 8px 6px; border-radius: 11px; border: 1px solid transparent;
    font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer;
    transition: transform .12s, filter .15s;
  }
  .soc-btn:active, .oc-btn:active { transform: scale(.96); }
  .soc-btn:disabled, .oc-btn:disabled { opacity: .45; cursor: default; transform: none; }
  .soc-btn.gold, .oc-btn.invite { background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #3a2508; box-shadow: 0 4px 12px rgba(240, 193, 74, .25); }
  .soc-btn.ghost { background: rgba(255,255,255,.05); color: #e2e8f0; border-color: rgba(255,255,255,.16); }
  .soc-btn.watch { background: rgba(56, 189, 248, .16); color: #e0f2fe; border-color: rgba(125, 211, 252, .45); }
  .soc-btn.ok, .oc-btn.reserved { background: rgba(74, 222, 128, .16); color: #bbf7d0; border-color: rgba(74, 222, 128, .45); }
  .soc-btn.no { background: rgba(248, 113, 113, .12); color: #fca5a5; border-color: rgba(248, 113, 113, .4); }
  .oc-btn { width: 100%; margin-top: 8px; }
  .online-card.reserved { border-color: rgba(74, 222, 128, .6); }
  @media (prefers-reduced-motion: reduce) { .ft-dot.online, .oc-dot.on { animation: none; } }

  /* ── Selector de estilo de juego en Crear mesa ── */
  .cm-required { color: #f87171; font-weight: 800; }
  .cm-style { display: grid; grid-template-columns: 1fr 1fr; }
  .cm-style button {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 11px 10px; border-radius: 16px; text-align: left;
  }
  .cm-style .st-ico { font-size: 22px; line-height: 1; margin-bottom: 3px; }
  .cm-style button b { font-size: 13.5px; }
  .cm-style button small { font-size: 10.5px; opacity: .85; line-height: 1.3; }
  .cm-style button.on::after { content: "✓"; position: absolute; top: 8px; right: 10px; font-weight: 900; }
  .cm-style-rules { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.4; color: #cbd5e1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }

  /* ════════════════════════════════════════════════════════════════════
     ICONO DE FICHA DE DOMINÓ (sustituye a cualquier dado)
     ════════════════════════════════════════════════════════════════════ */
  .ico-domino {
    display: inline-block; flex: none;
    width: .62em; height: 1.12em; vertical-align: -.2em;
    border-radius: .14em;
    background:
      radial-gradient(circle at 50% 25%, #10223a 0 .075em, transparent .09em),
      radial-gradient(circle at 30% 64%, #10223a 0 .075em, transparent .09em),
      radial-gradient(circle at 70% 86%, #10223a 0 .075em, transparent .09em),
      linear-gradient(180deg, transparent calc(50% - .035em), #7a4a0a calc(50% - .035em) calc(50% + .035em), transparent calc(50% + .035em)),
      linear-gradient(150deg, #fff3cf 0%, #f2c75a 40%, #c98a1c 75%, #8a5a10 100%);
    box-shadow: inset 0 0 0 .04em rgba(80, 40, 0, .55), 0 .05em .12em rgba(0, 0, 0, .35);
  }
  .ico-domino.lg { font-size: 22px; }
  .ico-domino.xl { font-size: 44px; transform: rotate(-12deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
  .seg-tabs button.on .ico-domino { box-shadow: inset 0 0 0 .04em rgba(80, 40, 0, .7); }

  /* ════════════════════════════════════════════════════════════════════
     CREAR MESA · invitar por asiento antes de abrir la sala
     ════════════════════════════════════════════════════════════════════ */
  .cm-seats-block { margin-top: 12px; padding: 10px; border-radius: 14px; border: 1px solid rgba(125, 211, 252, .3); background: rgba(56, 189, 248, .05); }
  .cm-seats-block .cm-label { margin-top: 0; }
  .cm-seats-hint { margin: 0 0 8px; font-size: 11.5px; line-height: 1.4; color: #cbd5e1; }
  .cm-seat-map { position: relative; height: 232px; }
  .cm-seat-map.seats-2 { height: 210px; }
  .csm-felt {
    position: absolute; inset: 56px 70px; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 45%, #1f4d80 0%, #102d4e 60%, #071526 100%);
    border: 1.5px solid rgba(240, 193, 74, .5);
    box-shadow: inset 0 0 18px rgba(0,0,0,.55);
  }
  .cm-seat-map.seats-2 .csm-felt { inset: 62px 40px; }
  .csm-seat {
    position: absolute; width: 96px;
    display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center;
  }
  .csm-seat.pos-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
  .csm-seat.pos-top { top: 0; left: 50%; transform: translateX(-50%); }
  .csm-seat.pos-left { left: -4px; top: 50%; transform: translateY(-50%); }
  .csm-seat.pos-right { right: -4px; top: 50%; transform: translateY(-50%); }
  .csm-seat b { font-size: 11.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .csm-seat small { font-size: 9.5px; color: #94a3b8; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .csm-seat .team-tag, .csm-seat .toll-tag { margin: 2px 0 0; }
  .csm-slot { padding: 0; border: 0; background: none; border-radius: 50%; }
  .csm-chip { width: 42px; height: 42px; font-size: 17px; }
  .csm-chip.ava-legend { font-size: 22px; }
  .csm-seat.empty .csm-slot {
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 2px dashed rgba(240, 193, 74, .55); background: rgba(240, 193, 74, .07);
    color: var(--brass); font-size: 22px; line-height: 1;
  }
  .csm-seat.empty.role-partner .csm-slot { border-color: rgba(74, 222, 128, .6); color: #86efac; background: rgba(74, 222, 128, .08); }
  .csm-seat.picking .csm-slot { box-shadow: 0 0 0 3px rgba(240, 193, 74, .45); animation: dotPulse 1.2s ease-in-out infinite; }
  .csm-seat.filled .csm-slot { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 4px rgba(74, 222, 128, .7); }
  .csm-seat.me .csm-chip { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 4px var(--brass); }
  .csm-remove {
    position: absolute; top: -4px; right: 18px;
    width: 20px; height: 20px; border-radius: 50%; padding: 0;
    font-size: 10px; font-weight: 900; line-height: 1;
    background: #1e293b; color: #fca5a5; border: 1px solid rgba(248, 113, 113, .5);
  }
  .cm-picker { margin-top: 10px; padding: 10px; border-radius: 16px; }
  .cm-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .cm-picker-head b { font-size: 13.5px; color: var(--brass); }
  .cm-picker-note { margin: 0 0 6px; font-size: 11.5px; color: #86efac; }
  .cm-picker-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
  .cm-picker-tabs button { flex: 1; padding: 6px; border-radius: 99px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: transparent; color: var(--ivory); }
  .cm-picker-tabs button.on { background: var(--brass); color: #2a1c08; border-color: transparent; }
  .cm-picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
  .cm-picker-list::-webkit-scrollbar { width: 0; }
  .cp-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
  .cp-row.chosen { border-color: rgba(74, 222, 128, .55); background: rgba(74, 222, 128, .08); }
  .cp-row.st-off { opacity: .55; }
  .cp-ava { width: 36px; height: 36px; font-size: 15px; }
  .cp-row .oc-dot { width: 11px; height: 11px; border-width: 2px; }
  .cp-info { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; }
  .cp-info b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-info small { font-size: 10.5px; color: #94a3b8; }
  .cp-info .toll-tag { align-self: flex-start; }
  .cp-row .soc-btn { flex: none; padding: 7px 12px; }

  /* ════════════════════════════════════════════════════════════════════
     SÚPER CATÁLOGO DE AVATARES 3D · medallones por edición
     ════════════════════════════════════════════════════════════════════ */
  .ava-3d {
    position: relative; isolation: isolate;
    color: initial;
    text-shadow: 0 .06em .08em rgba(0, 0, 0, .45);
    border: 0 !important;
    box-shadow:
      inset 0 .08em .1em rgba(255, 255, 255, .55),
      inset 0 -.12em .18em rgba(0, 0, 0, .45),
      0 .06em .16em rgba(0, 0, 0, .45) !important;
    animation: none !important;
  }
  /* Brillo especular superior (volumen 3D) */
  .ava-3d::before {
    content: ""; position: absolute; inset: 6% 14% 52% 14%; border-radius: 50%; z-index: -1;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
  }
  .ava-3d.ed-bronce    { background: radial-gradient(circle at 34% 28%, #ffd9b0 0%, #c0773d 42%, #6e3a14 82%, #3a1d08 100%) !important; }
  .ava-3d.ed-plata     { background: radial-gradient(circle at 34% 28%, #ffffff 0%, #c7cfdb 40%, #6c7685 80%, #353c47 100%) !important; }
  .ava-3d.ed-oro       { background: radial-gradient(circle at 34% 28%, #fff7d6 0%, #f2c75a 40%, #a8690e 80%, #5a3404 100%) !important; }
  .ava-3d.ed-neon      { background: radial-gradient(circle at 34% 28%, #f5d0fe 0%, #a855f7 40%, #1e1b4b 85%) !important; box-shadow: inset 0 .08em .1em rgba(255,255,255,.5), inset 0 -.12em .18em rgba(0,0,0,.5), 0 0 .35em rgba(217, 70, 239, .7) !important; }
  .ava-3d.ed-obsidiana { background: radial-gradient(circle at 34% 28%, #6b7280 0%, #1f2937 45%, #030712 90%) !important; box-shadow: inset 0 .08em .1em rgba(255,255,255,.35), inset 0 -.12em .18em rgba(0,0,0,.6), 0 0 0 .05em rgba(240, 193, 74, .75), 0 .06em .16em rgba(0,0,0,.5) !important; }
  .ava-3d.ed-diamante  {
    background: conic-gradient(from 210deg at 50% 50%, #e0f2fe, #7dd3fc, #c4b5fd, #f0abfc, #a5f3fc, #e0f2fe) !important;
    box-shadow: inset 0 .08em .1em rgba(255,255,255,.75), inset 0 -.12em .18em rgba(30, 64, 175, .45), 0 0 .4em rgba(125, 211, 252, .75) !important;
  }
  .ed-tag {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.35); color: #e2e8f0;
  }
  .ed-tag.ed-oro { color: #fde68a; } .ed-tag.ed-neon { color: #f0abfc; } .ed-tag.ed-diamante { color: #a5f3fc; }
  .ed-tag.ed-plata { color: #e2e8f0; } .ed-tag.ed-bronce { color: #fdba74; } .ed-tag.ed-obsidiana { color: #fbbf24; }
  .ed-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
  .ed-dot.ed-bronce { background: #c0773d; } .ed-dot.ed-plata { background: #c7cfdb; } .ed-dot.ed-oro { background: #f2c75a; }
  .ed-dot.ed-neon { background: #a855f7; box-shadow: 0 0 6px #d946ef; } .ed-dot.ed-obsidiana { background: #111827; box-shadow: 0 0 0 1px #f0c14a; }
  .ed-dot.ed-diamante { background: conic-gradient(#e0f2fe, #7dd3fc, #c4b5fd, #f0abfc, #e0f2fe); }

  /* Filtros del catálogo */
  .av-filters { margin: 0 0 10px; }
  .av-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
  .av-chips::-webkit-scrollbar { height: 0; }
  .av-chips button {
    flex: none; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(240, 193, 74, .28); background: rgba(255,255,255,.04); color: var(--ivory); white-space: nowrap;
  }
  .av-chips button.on { background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #2a1c08; border-color: transparent; }
  .av-count { margin: 2px 0 0; font-size: 11.5px; color: #94a3b8; }
  .shop-grid.cat-avatars { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .shop-grid.cat-avatars .shop-item { padding: 24px 6px 8px; gap: 4px; content-visibility: auto; contain-intrinsic-size: 150px; }
  .shop-grid.cat-avatars .shop-item.clickable { cursor: pointer; }
  .shop-grid.cat-avatars .rarity-tag { font-size: 8px; padding: 1px 5px; top: 6px; left: 6px; }
  .shop-grid.cat-avatars .ed-tag { top: 6px; right: 6px; font-size: 7.5px; padding: 1px 5px; }
  .shop-grid.cat-avatars .si-preview { height: 62px; }
  .shop-grid.cat-avatars .ava-demo { width: 58px; height: 58px; font-size: 30px; }
  .shop-grid.cat-avatars .si-name { font-size: 11.5px; }
  .shop-grid.cat-avatars .si-buy { padding: 5px 6px; font-size: 11.5px; }
  .av-more {
    grid-column: 1 / -1; margin-top: 4px; padding: 10px; border-radius: 14px;
    border: 1px dashed rgba(240, 193, 74, .45); background: rgba(240, 193, 74, .06); color: var(--brass); font-weight: 700;
  }
  /* Vista previa grande */
  .buy-preview.avatar-xl { height: auto; flex-direction: column; gap: 8px; display: flex; align-items: center; padding: 10px 0 4px; }
  .buy-preview.avatar-xl .ava-demo { width: 132px; height: 132px; font-size: 72px; }
  .buy-preview.avatar-xl .has-frame::after { inset: -10px; padding: 6px; }
  .hd-badge { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a5f3fc; padding: 2px 9px; border-radius: 99px; background: rgba(56, 189, 248, .14); border: 1px solid rgba(125, 211, 252, .4); }

  /* Mis avatares (perfil y modal) */
  .my-avatars-card { border-color: rgba(125, 211, 252, .3); }
  .my-avatars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; max-height: 236px; overflow-y: auto; padding: 2px; }
  .my-avatars-grid.modal { width: 100%; max-height: 52vh; margin: 6px 0 8px; }
  .my-avatars-grid::-webkit-scrollbar { width: 0; }
  .my-ava {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 3px 6px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--ivory);
  }
  .my-ava.on { border-color: var(--ok); background: rgba(74, 222, 128, .1); box-shadow: 0 0 0 1px rgba(74, 222, 128, .35); }
  .my-ava small { font-size: 8.5px; line-height: 1.15; color: #cbd5e1; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .my-ava-chip { width: 44px; height: 44px; font-size: 22px; }

  /* ════════════════════════════════════════════════════════════════════
     BOTONES DE INVITAR · discretos y minimalistas
     ════════════════════════════════════════════════════════════════════ */
  .inv, #qp-btn-invite {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    width: auto !important; flex: none !important;
    margin-top: 6px; padding: 4px 11px 4px 9px;
    border-radius: 99px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    color: #e9d6a7;
    background: transparent;
    border: 1px solid rgba(240, 193, 74, .38);
    box-shadow: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .inv::before, #qp-btn-invite::before { content: "+"; font-size: 13px; font-weight: 700; line-height: 1; color: var(--brass); }
  .inv:hover, #qp-btn-invite:hover { background: rgba(240, 193, 74, .08); border-color: rgba(240, 193, 74, .65); color: #fff3c4; }
  .inv:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  .inv.done { color: #a7f3d0; border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .06); }
  .inv.done::before { content: "✓"; color: #4ade80; font-size: 11px; }
  .inv:disabled { opacity: .45; cursor: default; background: transparent; }
  .inv:disabled::before { content: ""; }
  .inv:disabled.done { opacity: 1; }
  .ft-actions { justify-content: center; align-items: center; }
  .ft-actions .soc-btn.ghost { flex: none; padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 99px; }
  .ft-actions .inv { margin-top: 0; }
  .cp-row .inv { margin-top: 0; }
  #qp-btn-invite .ico-domino { display: none; }

  /* ════════════════════════════════════════════════════════════════════
     TABLERO ANCLADO · las fichas jugadas no se mueven
     ════════════════════════════════════════════════════════════════════ */
  .chain-slot { transition: none !important; }
  .chain { transition: none !important; margin: 0 !important; }
  /* La ficha nueva aparece en su sitio (solo opacidad, sin desplazarse ni rotar) */
  .chain .tile.fresh { animation: tileSettle .28s ease-out both !important; }
  @keyframes tileSettle { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .chain .tile.fresh { animation: none !important; } }
  .chain-more {
    position: absolute; right: 18px; bottom: 74px; z-index: 6;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(240, 193, 74, .5); background: rgba(6, 14, 26, .78); color: var(--brass);
    font-size: 14px; display: grid; place-items: center;
  }
  /* El ajuste de scroll que compensa el crecimiento del lienzo debe ser instantáneo */
  #felt .chain-wrap, #felt .chain-wrap.scrollable { scroll-behavior: auto !important; }

  /* MMR siempre visible junto a los diamantes */
  .wallet-pair { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; }
  .wallet-pair .dia-pill { padding: 3px 9px 3px 7px; font-size: 12.5px; }
  .mmr-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 2px 9px 2px 7px; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: #fde68a; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, rgba(240, 193, 74, .16), rgba(120, 80, 10, .25));
    border: 1px solid rgba(240, 193, 74, .4);
  }
  .mmr-pill small { font-size: 9px; letter-spacing: .08em; color: #e9d6a7; font-weight: 800; }
  .mmr-pill.big { padding: 8px 14px 8px 11px; font-size: 16px; }
  .mmr-pill.big small { font-size: 10px; }
  .mmr-pill.bump-up { animation: diaUp .6s ease; }
  .mmr-pill.bump-down { animation: diaDown .6s ease; }
  .wallet-strip { flex-wrap: wrap; }
  /* Barra superior de Inicio compacta: diamantes + MMR + regalo + idioma + avatar caben siempre */
  #inicio .top { gap: 8px; }
  #inicio .hello { flex: 1; min-width: 0; }
  #inicio .hello b { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #inicio .top-actions { flex: none; gap: 6px; }
  #inicio .gift-btn { width: 32px; height: 32px; font-size: 15px; }
  #inicio .lang button { padding: 4px 7px; font-size: 11px; }
  #inicio .avatar { width: 38px; height: 38px; font-size: 16px; }
  #inicio .avatar.ava-legend { font-size: 20px; }

  /* ════════════════════════════════════════════════════════════════════
     CARTEL COMPACTO DE JUGADORES · el paño queda despejado
     ════════════════════════════════════════════════════════════════════ */
  #felt .seat-pod.compact {
    padding: 3px 7px 3px 3px; gap: 3px;
    border-radius: 14px;
    background: rgba(6, 14, 26, .42);
    border-color: rgba(240, 193, 74, .16);
    box-shadow: 0 4px 10px rgba(0,0,0,.28);
  }
  #felt .seat-pod.compact.left, #felt .seat-pod.compact.right { width: 50px; padding: 4px 3px 5px; }
  #felt .seat-pod.compact .pod-head { gap: 6px; }
  #felt .seat-pod.compact .pod-ava { width: 30px; height: 30px; font-size: 13px; }
  #felt .seat-pod.compact .pod-ava.ava-legend { font-size: 16px; }
  #felt .seat-pod.compact .pod-ava.has-frame::after { inset: -4px; padding: 2.5px; }
  #felt .seat-pod.compact .pod-info { gap: 0; }
  #felt .seat-pod.compact .pod-name { font-size: 10.5px; line-height: 1.15; max-width: 84px; }
  #felt .seat-pod.compact.left .pod-name, #felt .seat-pod.compact.right .pod-name { font-size: 9.5px; max-width: 46px; }
  /* MMR: una línea fina bajo el nombre */
  .pod-mmr { font-size: 9px; font-weight: 700; color: #93c5fd; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
  #felt .seat-pod.compact.left .pod-mmr, #felt .seat-pod.compact.right .pod-mmr { font-size: 8px; }
  .pod-pts { color: var(--brass); }
  /* Fichas restantes: insignia circular en la esquina del avatar */
  .pod-count {
    position: absolute; right: -5px; bottom: -4px; z-index: 4;
    min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px;
    display: grid; place-items: center;
    font-size: 9.5px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
    color: #2a1c08; background: linear-gradient(180deg, #fde68a, #e2a83a);
    border: 1.5px solid #0a1626;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
  }
  .pod-count.low { color: #fff; background: linear-gradient(180deg, #f87171, #dc2626); animation: lowPulse 1.2s ease-in-out infinite; }
  .pod-count.bump { animation: pillBump .45s ease; }
  .pod-count.low.bump { animation: pillBump .45s ease, lowPulse 1.2s ease-in-out .45s infinite; }
  .pod-count.puja { background: #1e3a5f; color: #bae6fd; }
  .pod-susti { position: absolute; left: -5px; bottom: -4px; z-index: 4; font-size: 10px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  /* La pareja se reconoce por el aro del avatar (A dorado, B azul) */
  #felt .seat-pod.compact.team-0 .pod-ava { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 3.5px rgba(240, 193, 74, .85); }
  #felt .seat-pod.compact.team-1 .pod-ava { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 3.5px rgba(56, 189, 248, .85); }
  #felt .seat-pod.compact.turn { border-color: rgba(74, 222, 128, .7); box-shadow: 0 0 14px rgba(74, 222, 128, .28); }
  #felt .seat-pod.compact.turn .pod-ava { box-shadow: 0 0 0 2px #0c1c30, 0 0 0 3.5px #4ade80, 0 0 10px rgba(74, 222, 128, .6); }
  #felt .seat-pod.compact .pod-think { right: auto; left: -4px; top: -4px; padding: 2px 3px; }
  #felt .seat-pod.compact .pod-think i { width: 3px; height: 3px; }
  /* Cajones de dorsos un poco más finos */
  #felt .seat-pod.compact .pod-tray { padding: 3px 4px; border-radius: 6px; gap: 2px; }
  #felt .seat-pod.compact .pod-tray.h .back { width: 12px !important; height: 22px !important; }
  #felt .seat-pod.compact.left .pod-tray.v .back, #felt .seat-pod.compact.right .pod-tray.v .back { width: 26px !important; height: 13px !important; }
  #felt .seat-pod.compact.left .pod-tray.v, #felt .seat-pod.compact.right .pod-tray.v { gap: 2px; padding: 3px; }
  #felt .seat-pod.compact .pod-reveal { font-size: 8.5px; max-width: 110px; }

  /* ════════════════════════════════════════════════════════════════════
     MODAL DE INVITACIÓN · Mis amigos / Jugadores en línea
     ════════════════════════════════════════════════════════════════════ */
  #modal-invitar { z-index: 60; }
  .invite-sheet { gap: 8px; }
  .inv-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--brass); }
  .invite-sheet .end-box-title { font-size: 20px; margin-top: -4px; }
  .inv-tabs { width: 100%; margin: 4px 0 0; }
  .inv-tabs button { font-size: 12.5px; }
  .inv-tab-desc { margin: 0; width: 100%; text-align: left; font-size: 11.5px; color: #94a3b8; }
  .invite-sheet .cm-picker-list { width: 100%; max-height: 50vh; }
  .csm-inv { margin-top: 3px; padding: 2px 8px 2px 6px; font-size: 10px; }
  .csm-inv::before { font-size: 11px; }
  .inv-kicker { text-transform: uppercase; }

  /* ════════════════════════════════════════════════════════════════════
     FRENTE CLÁSICO · resina blanca marfil con pips de colores
     (el dorso USA · Cuba no cambia)
     ════════════════════════════════════════════════════════════════════ */
  :root {
    --ivory-face: radial-gradient(130% 95% at 28% 18%, #ffffff 0%, #fcfaf5 40%, #f1ebdf 78%, #e4dccc 100%);
    --ivory-edge-1: #ddd3c1; --ivory-edge-2: #c8bba4; --ivory-edge-3: #ab9d85;
  }
  .tile, body.skin-classic .tile, body.skin-obsidian .tile, body.skin-marble .tile {
    background: var(--ivory-face) !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    box-shadow:
      inset 0 1px 1px #ffffff,
      inset 0 -2px 3px rgba(120, 100, 70, .25),
      0 1px 0 var(--ivory-edge-1),
      0 2px 0 var(--ivory-edge-2),
      0 3px 0 var(--ivory-edge-3),
      0 5px 10px rgba(0, 0, 0, .42);
  }
  /* Brillo suave de resina */
  .tile::before { background: linear-gradient(125deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .15) 32%, transparent 60%) !important; }
  /* Línea central grabada en oscuro y pasador de latón */
  .tile .seam, body.skin-obsidian .tile .seam {
    background: linear-gradient(180deg, #4a3c28 0%, #2b2216 50%, #4a3c28 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .85), inset 0 1px 1px rgba(0, 0, 0, .55) !important;
  }
  .tile .spinner {
    background: radial-gradient(circle at 35% 30%, #fff8dc 0%, #f2cf6b 40%, #b8862a 78%, #6b4a10 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(255, 255, 255, .9) !important;
  }
  /* Pips cóncavos con color vivo sobre el marfil */
  .tile .pip { box-shadow: inset 0 1.4px 2px rgba(0, 0, 0, .55), inset 0 -1px 1.4px rgba(255, 255, 255, .35), 0 .6px 0 rgba(255, 255, 255, .9) !important; }
  .tile .pip::after { background: rgba(255, 255, 255, .75); }

  /* Tablero: aristas marfil; los extremos abiertos conservan el aro dorado */
  .chain-slot .tile {
    box-shadow: inset 0 1px 1px #fff, inset 0 -1.5px 2px rgba(120, 100, 70, .25),
      0 1px 0 var(--ivory-edge-1), 0 2px 0 var(--ivory-edge-3), 0 4px 8px rgba(0, 0, 0, .4) !important;
  }
  .chain-slot .tile.endcap {
    box-shadow: inset 0 1px 1px #fff, 0 1px 0 var(--ivory-edge-1), 0 2px 0 var(--ivory-edge-3),
      0 0 0 2px rgba(240, 193, 74, .95), 0 0 12px rgba(240, 193, 74, .5), 0 4px 8px rgba(0, 0, 0, .4) !important;
  }
  /* Atril: jugables con aro dorado, bloqueadas atenuadas */
  .tile.playable {
    box-shadow: inset 0 1px 1px #fff, 0 1px 0 var(--ivory-edge-1), 0 2px 0 var(--ivory-edge-2), 0 3px 0 var(--ivory-edge-3),
      0 0 0 2.5px #f0c14a, 0 0 18px rgba(240, 193, 74, .75), 0 12px 22px rgba(0, 0, 0, .55) !important;
  }
  .tile.selected { box-shadow: 0 0 0 3px var(--brass), 0 0 18px rgba(240, 193, 74, .8), 0 12px 24px rgba(0, 0, 0, .5) !important; }
  .tile.locked { opacity: .5; filter: grayscale(.25) brightness(.85); }
  .tile.waiting { opacity: .92; filter: none; }

  /* Fichas de la portada (con su fuego) también en marfil */
  .tile.hero-tile { background: var(--ivory-face) !important; border: 1px solid rgba(255, 255, 255, .95) !important; }
  .tile.hero-tile .seam { background: linear-gradient(180deg, #4a3c28, #2b2216 50%, #4a3c28) !important; box-shadow: 0 1px 0 rgba(255,255,255,.85), inset 0 1px 1px rgba(0,0,0,.55) !important; }
  .tile.hero-tile-left, .tile.hero-tile-right, .tile.hero-tile-center {
    box-shadow:
      inset 0 1.5px 2px #ffffff, inset 0 -2.5px 3px rgba(120, 100, 70, .3),
      -1px 1px 0 var(--ivory-edge-1), -2px 2px 0 var(--ivory-edge-2), -3px 3px 0 var(--ivory-edge-3), -4px 4px 0 #8f8068,
      0 0 18px rgba(255, 110, 0, .55), -8px 12px 20px rgba(0, 0, 0, .65) !important;
  }
  .tile.hero-tile-right { box-shadow: inset 0 1.5px 2px #fff, inset 0 -2.5px 3px rgba(120,100,70,.3), 1px 1px 0 var(--ivory-edge-1), 2px 2px 0 var(--ivory-edge-2), 3px 3px 0 var(--ivory-edge-3), 4px 4px 0 #8f8068, 0 0 18px rgba(255,110,0,.55), 8px 12px 20px rgba(0,0,0,.65) !important; }
  .tile.hero-lead::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); }

  /* Fichas decorativas de los bordes */
  .piece {
    background: var(--ivory-face);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 1px #fff, 0 1px 0 var(--ivory-edge-1), 0 2px 0 var(--ivory-edge-3), 0 4px 10px rgba(0, 0, 0, .5);
  }
  .dseam { background: rgba(60, 45, 25, .55); }

  /* Icono de ficha (sustituye a los dados): también marfil con pips oscuros */
  .ico-domino {
    background:
      radial-gradient(circle at 50% 25%, #1e3a8a 0 .075em, transparent .09em),
      radial-gradient(circle at 30% 64%, #b91c1c 0 .075em, transparent .09em),
      radial-gradient(circle at 70% 86%, #b91c1c 0 .075em, transparent .09em),
      linear-gradient(180deg, transparent calc(50% - .035em), #3a2d1c calc(50% - .035em) calc(50% + .035em), transparent calc(50% + .035em)),
      radial-gradient(130% 95% at 28% 18%, #ffffff 0%, #f6f1e7 60%, #ddd3c1 100%);
    box-shadow: inset 0 0 0 .04em rgba(120, 100, 70, .45), 0 .05em .12em rgba(0, 0, 0, .35);
  }

  /* Nota del frente en Personalización */
  .tile-face-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
  .tile-face-note p { margin: 0; font-size: 12px; line-height: 1.4; color: #cbd5e1; }
  .tfn-sample { flex: none; width: 26px; height: 46px; border-radius: 5px; position: relative; background: var(--ivory-face); box-shadow: inset 0 0 0 1px #fff, 0 1px 0 var(--ivory-edge-1), 0 2px 0 var(--ivory-edge-3), 0 4px 8px rgba(0,0,0,.4); }
  .tfn-sample::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: #3a2d1c; }
  .tfn-sample i { position: absolute; width: 6px; height: 6px; border-radius: 50%; }
  .tfn-sample i:nth-child(1) { left: 10px; top: 8px; background: #06b6d4; }
  .tfn-sample i:nth-child(2) { left: 5px; top: 28px; background: #ef4444; }
  .tfn-sample i:nth-child(3) { right: 5px; bottom: 5px; background: #ef4444; }

  /* ════════════════════════════════════════════════════════════════════
     SELECTOR DE IDIOMA · lista desplegable con banderas
     ════════════════════════════════════════════════════════════════════ */
  .lang-select {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(240, 193, 74, .4);
    background: rgba(8, 19, 31, .6);
    color: var(--ivory);
  }
  .lang-select:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(240, 193, 74, .18); }
  .lang-select select {
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; outline: none;
  }
  .lang-select select option { background: #0c1527; color: #fff; }
  .lang-select::after { content: "▾"; font-size: 10px; color: var(--brass); pointer-events: none; }
  /* Compacto (barra superior de Inicio): bandera + código; el select invisible cubre el chip */
  .lang-select.compact { padding: 4px 8px 4px 7px; font-size: 11px; font-weight: 800; }
  .lang-select.compact select { position: absolute; inset: 0; width: 100%; opacity: 0; }
  .lang-select.compact .ls-flag { font-size: 13px; line-height: 1; }
  /* Completo (Perfil y Acceso) */
  .lang-select.full { padding: 7px 12px 7px 10px; font-size: 13px; font-weight: 600; min-width: 0; }
  .lang-select.full select { padding-right: 4px; max-width: 220px; }
  .lang-select.full .ls-flag { display: none; }
  .lang-select.auth { margin-left: 4px; }
  .auth-lang { display: flex; align-items: center; justify-content: center; gap: 6px; }
  /* Árabe: lectura de derecha a izquierda (el tablero y las fichas no se espejan) */
  body.rtl #felt, body.rtl .hand, body.rtl .chain-wrap, body.rtl .puja-groups { direction: ltr; }
  body.rtl .pod-name, body.rtl .tc-log, body.rtl .cp-info, body.rtl .ms-info, body.rtl .settings-text { text-align: right; }

  /* Bordes limpios: sin fichas decorativas flotando alrededor de la interfaz */
  .edge-tiles, .piece.deco { display: none !important; }

  /* Botón "Ordenar fichas" del atril: pequeño y discreto */
  .sort-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px 3px 7px; border-radius: 99px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: none;
    color: #e9d6a7; background: transparent;
    border: 1px solid rgba(240, 193, 74, .38);
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  }
  .sort-btn svg { width: 12px; height: 12px; color: var(--brass); }
  .sort-btn:hover { background: rgba(240, 193, 74, .08); border-color: rgba(240, 193, 74, .65); color: #fff3c4; }
  .sort-btn:active { transform: scale(.95); }
  .sort-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  #mesa.is-spectator .sort-btn { display: none; }
  /* Reacomodo suave al ordenar */
  #mesa .hand.sorted .tile { animation: sortIn .32s ease both; }
  #mesa .hand.sorted .tile:nth-child(2n) { animation-delay: .03s; }
  #mesa .hand.sorted .tile:nth-child(3n) { animation-delay: .06s; }
  @keyframes sortIn { from { opacity: .3; transform: translateY(6px) scale(.96); } }
  @media (prefers-reduced-motion: reduce) { #mesa .hand.sorted .tile { animation: none; } }
  .mmr-line p { margin: 0; }
  .mmr-line small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; opacity: .85; }
  /* "Crear mesa" ya es la pestaña: el botón grande del panel queda como acción principal sin repetir el título */
  .lobby-tabs button { font-size: 13.5px; }
  /* Único botón principal "Crear mesa", visible en ambas pestañas */
  #jugar .go.create-main { margin: 2px 0 10px; }
  #jugar .online-actions { margin-top: 0; }

  /* ════════════════════════════════════════════════════════════════════
     LOBBY PRO · dos acciones principales
     ════════════════════════════════════════════════════════════════════ */
  .lobby-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 4px 0 16px; }
  .la-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    width: 100%; text-align: left;
    padding: 16px 16px; border-radius: 20px;
    color: var(--ivory); cursor: pointer;
    transition: transform .15s ease, box-shadow .2s, border-color .2s;
  }
  .la-card:active { transform: scale(.985); }
  .la-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
  /* Crear mesa: tarjeta dorada protagonista */
  .la-create {
    border: 1px solid rgba(255, 236, 180, .7);
    background:
      radial-gradient(220px 120px at 100% 0%, rgba(255, 255, 255, .35), transparent 60%),
      linear-gradient(160deg, #f6d27a 0%, #e2a83a 55%, #b9801f 100%);
    color: #2a1c08;
    box-shadow: 0 14px 30px rgba(226, 168, 58, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  .la-create::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    transform: translateX(-120%); animation: sheen 3.6s ease-in-out infinite; pointer-events: none;
  }
  /* Mesas públicas: cristal esmerilado con borde dorado */
  .la-tables {
    border: 1px solid rgba(240, 193, 74, .35);
    background:
      radial-gradient(200px 110px at 100% 0%, rgba(56, 189, 248, .22), transparent 60%),
      linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 45%), rgba(16, 34, 58, .6);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.32);
  }
  .la-tables:hover { border-color: rgba(240, 193, 74, .65); }
  .la-ico {
    position: relative; flex: none;
    width: 50px; height: 50px; border-radius: 15px;
    display: grid; place-items: center; font-size: 24px;
  }
  .la-create .la-ico { background: rgba(42, 28, 8, .14); box-shadow: inset 0 0 0 1px rgba(42, 28, 8, .18); }
  .la-tables .la-ico { background: rgba(56, 189, 248, .14); box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .35); }
  .la-plus {
    position: absolute; right: 5px; bottom: 4px;
    width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center;
    font-style: normal; font-size: 13px; font-weight: 900; line-height: 1;
    background: #2a1c08; color: #f6d27a;
  }
  .la-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .la-text b { font-family: Fraunces, serif; font-size: 21px; font-weight: 640; line-height: 1.1; }
  .la-text small { font-size: 12px; line-height: 1.3; opacity: .85; }
  .la-create .la-text small { color: #4a3210; }
  .la-tables .la-text small { color: #bae6fd; }
  .la-arrow { font-size: 28px; font-weight: 300; line-height: 1; opacity: .7; }
  .la-count {
    flex: none; min-width: 30px; padding: 4px 8px; border-radius: 99px; text-align: center;
    font-size: 13px; font-weight: 800; color: var(--ok);
    background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .4);
  }
  /* Vista de mesas públicas: cabecera con cierre */
  .tables-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
  .tables-head .section { margin: 0; }
  .tables-close {
    width: 30px; height: 30px; border-radius: 50%; padding: 0;
    border: 1px solid rgba(240, 193, 74, .4); background: rgba(255,255,255,.04); color: var(--brass); font-size: 13px;
  }
  /* Las tarjetas se destacan según la vista activa */
  .la-tables.on { border-color: rgba(74, 222, 128, .6); box-shadow: 0 0 0 1px rgba(74, 222, 128, .3), 0 12px 26px rgba(0,0,0,.32); }
  #jugar .missions-card { margin-bottom: 4px; }
  @media (prefers-reduced-motion: reduce) { .la-create::after { animation: none; } }
  .dl.rake { color: #94a3b8; background: rgba(148, 163, 184, .1); font-weight: 600; }

  /* ── Reglas y guía ── */
  #jugar .screen-header-nav { justify-content: space-between; }
  .guide-btn {
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px;
    padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700;
    color: #e9d6a7; background: rgba(240, 193, 74, .08); border: 1px solid rgba(240, 193, 74, .4);
  }
  .guide-btn:hover { background: rgba(240, 193, 74, .16); color: #fff3c4; }
  .guide-box { max-width: 380px; }
  .guide-tabs { width: 100%; margin: 2px 0 4px; }
  .guide-tabs button { font-size: 12px; padding: 8px 4px; }
  .guide-body { width: 100%; text-align: left; font-size: 12.5px; line-height: 1.5; color: #cbd5e1; }
  .guide-body h3 { margin: 10px 0 4px; font-family: Fraunces, serif; font-size: 15px; font-weight: 640; color: var(--brass); }
  .guide-body h3:first-child { margin-top: 2px; }
  .guide-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
  .guide-body b { color: #fff; }
  .guide-tip { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(240, 193, 74, .08); border: 1px dashed rgba(240, 193, 74, .4); color: #fde68a; font-size: 12px; }
  .guide-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }
  .guide-table th, .guide-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
  .guide-table th { color: #94a3b8; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
  .guide-table td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
  .guide-table .up { color: #86efac; } .guide-table .down { color: #fca5a5; }
  body.rtl .guide-body { text-align: right; } body.rtl .guide-body ul { padding-left: 0; padding-right: 18px; }

  /* ════════════════════════════════════════════════════════════════════
     TÍTULOS DE RANGO junto al MMR
     ════════════════════════════════════════════════════════════════════ */
  .r1 { --rk: #94a3b8; } .r2 { --rk: #7dd3fc; } .r3 { --rk: #a78bfa; }
  .r4 { --rk: #f0c14a; } .r5 { --rk: #fb923c; } .r6 { --rk: #f43f5e; }
  /* Barra superior */
  .mmr-pill { border-color: color-mix(in srgb, var(--rk, #f0c14a) 55%, transparent); }
  .mmr-pill .rk-ico { font-size: 11px; line-height: 1; }
  .mmr-pill .rk-name {
    max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 8.5px; font-weight: 800; letter-spacing: .02em; color: var(--rk, #e9d6a7); text-transform: none;
  }
  .mmr-pill.big { gap: 8px; }
  .mmr-pill.big .rk-ico { font-size: 20px; }
  .mmr-pill.big .rk-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
  .mmr-pill.big .rk-name { max-width: 150px; font-size: 10.5px; }
  .mmr-pill.big b small { font-size: 9px; letter-spacing: .08em; color: #e9d6a7; }
  /* Perfil */
  .perfil-rank {
    display: flex; align-items: center; gap: 10px; margin: 6px auto 4px; max-width: 290px;
    padding: 8px 12px; border-radius: 14px; text-align: left;
    background: color-mix(in srgb, var(--rk, #f0c14a) 12%, rgba(8, 19, 31, .6));
    border: 1px solid color-mix(in srgb, var(--rk, #f0c14a) 50%, transparent);
  }
  .pr-ico { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
  .pr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pr-text b { font-family: Fraunces, serif; font-size: 16px; font-weight: 640; color: var(--rk, #fde68a); }
  .pr-text small { font-size: 11px; color: #cbd5e1; }
  .pr-text small .pr-mmr { font-family: inherit; font-size: 11px; font-weight: 800; color: #fff; }
  /* Barra de progreso 100 % MMR: del umbral del título actual al del siguiente */
  .pr-bar {
    position: relative; display: block; height: 8px; margin-top: 4px; border-radius: 99px; overflow: hidden;
    background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06);
  }
  .pr-bar i {
    display: block; height: 100%; min-width: 8px; border-radius: inherit; transition: width .5s ease;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rk, #f0c14a) 65%, #000), var(--rk, #f0c14a) 70%, color-mix(in srgb, var(--rk, #f0c14a) 50%, #fff));
    box-shadow: 0 0 10px color-mix(in srgb, var(--rk, #f0c14a) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
  }
  .pr-bar.maxed i { background: linear-gradient(90deg, #f0c14a, #fde68a, #f0c14a); }
  .pr-scale { display: flex; justify-content: space-between; margin-top: 3px; font-size: 10px; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; }
  /* Mesa: emblema + título (arriba/abajo) o solo emblema (laterales) */
  .rank-chip { display: inline-flex; align-items: center; gap: 2px; color: var(--rk); font-weight: 800; }
  .rank-chip i { font-style: normal; font-size: 9px; line-height: 1; }
  .rank-chip span { font-size: 8.5px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #felt .seat-pod.compact .pod-mmr { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
  .guide-table.ranks td:first-child { font-weight: 700; color: #fff; }
  .mmr-pill.stacked { padding: 3px 9px 3px 6px; gap: 5px; border-radius: 12px; justify-content: flex-start; }
  .mmr-pill.stacked .rk-ico { font-size: 14px; }
  .mmr-pill.stacked .rk-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; min-width: 0; }
  .mmr-pill.stacked .rk-name { max-width: 96px; font-size: 8.5px; }
  .mmr-pill.stacked b { font-size: 12px; }
  .mmr-pill.stacked b small { font-size: 8px; letter-spacing: .06em; color: #e9d6a7; }
  #inicio .hello b { font-size: 21px; }
  #inicio .top-actions { gap: 5px; }
  #inicio .lang-select.compact .ls-code { display: none; }
  #inicio .lang-select.compact { padding: 4px 6px; gap: 3px; }
  #inicio .hello b { font-size: 20px; }
  #inicio .mmr-pill.stacked .rk-name { max-width: 88px; }
  .mmr-pill.stacked .rk-name { white-space: normal; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  @media (max-width: 380px) { #inicio .hello b { font-size: 17px; } #inicio .hello { font-size: 12px; } }
  @media (max-width: 400px) {
    #inicio .gift-btn { display: none; }
    #inicio .avatar { width: 34px; height: 34px; font-size: 15px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     MESA DESPEJADA · insignias mínimas pegadas al borde de cada asiento
     ════════════════════════════════════════════════════════════════════ */
  #felt .seat-pod.compact,
  #felt .seat-pod.compact.turn,
  #felt .seat-pod.compact.me {
    background: none; border: 0; box-shadow: none; padding: 0; gap: 4px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Arriba y abajo: avatar + burbuja en una sola línea, contra el riel */
  #felt .seat-pod.compact.top { top: 3px; flex-direction: row; align-items: center; }
  #felt .seat-pod.compact.bottom { bottom: 3px; flex-direction: row; align-items: center; }
  #felt .seat-pod.compact.top .pod-head, #felt .seat-pod.compact.bottom .pod-head { flex-direction: row; gap: 4px; }
  /* Izquierda y derecha: columna estrecha pegada al borde */
  #felt .seat-pod.compact.left, #felt .seat-pod.compact.right { width: 38px; padding: 0; gap: 3px; flex-direction: column; align-items: center; }
  #felt .seat-pod.compact.left { left: 3px; }
  #felt .seat-pod.compact.right { right: 3px; }
  #felt .seat-pod.compact.left .pod-head, #felt .seat-pod.compact.right .pod-head { flex-direction: column; gap: 2px; }
  /* Avatar pequeño con la insignia de fichas en su esquina */
  #felt .seat-pod.compact .pod-ava { width: 26px; height: 26px; font-size: 11px; }
  #felt .seat-pod.compact .pod-ava.ava-legend { font-size: 14px; }
  #felt .seat-pod.compact .pod-count { min-width: 14px; height: 14px; font-size: 8.5px; right: -5px; bottom: -4px; }
  /* Burbuja: nombre, título y MMR en letra mínima */
  #felt .seat-pod.compact .pod-info {
    padding: 2px 7px 2px 6px; border-radius: 9px; gap: 0;
    background: rgba(6, 14, 26, .72); border: 1px solid rgba(240, 193, 74, .2);
    line-height: 1.1;
  }
  #felt .seat-pod.compact.turn .pod-info { border-color: rgba(74, 222, 128, .6); }
  #felt .seat-pod.compact .pod-name { font-size: 9px; max-width: 78px; }
  #felt .seat-pod.compact .pod-mmr { font-size: 7.5px; gap: 2px; }
  #felt .seat-pod.compact .rank-chip span { font-size: 7.5px; max-width: 70px; }
  #felt .seat-pod.compact .rank-chip i { font-size: 8px; }
  #felt .seat-pod.compact.left .pod-info, #felt .seat-pod.compact.right .pod-info { padding: 1px 3px; border-radius: 6px; max-width: 38px; text-align: center; }
  #felt .seat-pod.compact.left .pod-name, #felt .seat-pod.compact.right .pod-name { font-size: 7.5px; max-width: 32px; }
  #felt .seat-pod.compact.left .pod-mmr, #felt .seat-pod.compact.right .pod-mmr { font-size: 7px; justify-content: center; }
  /* Dorsos de los rivales: fila/columna fina pegada al borde */
  #felt .seat-pod.compact .pod-tray { padding: 2px; border-radius: 4px; gap: 1px; }
  #felt .seat-pod.compact .pod-tray.h .back { width: 9px !important; height: 16px !important; border-radius: 2px; }
  #felt .seat-pod.compact.left .pod-tray.v .back, #felt .seat-pod.compact.right .pod-tray.v .back { width: 20px !important; height: 10px !important; border-radius: 2px; }
  #felt .seat-pod.compact.left .pod-tray.v, #felt .seat-pod.compact.right .pod-tray.v { padding: 2px; gap: 1px; }
  #felt .seat-pod.compact .pod-think { left: -3px; top: -3px; }

  /* ════════════════════════════════════════════════════════════════════
     TERMINAL DE JUGADA · ordenado y sin recortes
     ════════════════════════════════════════════════════════════════════ */
  #mesa .table-console { padding: 7px 8px; gap: 6px; }
  .tc-row { display: flex; align-items: flex-start; gap: 8px; }
  #mesa .tc-status {
    flex: 1; min-width: 0;
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.3; font-size: 12.5px;
  }
  .tc-timer {
    flex: none; min-width: 40px; padding: 2px 8px; border-radius: 99px; text-align: center;
    font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--brass); background: rgba(240, 193, 74, .1); border: 1px solid rgba(240, 193, 74, .35);
  }
  .tc-timer.warn { color: #fecaca; background: rgba(239, 68, 68, .18); border-color: rgba(248, 113, 113, .6); }
  #mesa .tc-lines { min-height: 0; }
  #mesa .tc-line.new { white-space: normal; overflow: visible; line-height: 1.3; }
  #mesa .tc-bar { gap: 6px; align-items: center; }
  /* Las frases rápidas se deslizan con bordes difuminados en vez de cortarse */
  #mesa .reacts {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
    padding-right: 16px; scrollbar-width: none;
  }
  #mesa .reacts .react-phrase { height: 32px; }

  /* ── Mesas públicas: estilo de juego bien visible ── */
  .pt-style {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin: -1px -2px 4px; padding: 5px 9px; border-radius: 10px;
    border: 1px solid transparent;
  }
  .pt-style.cubano { background: linear-gradient(90deg, rgba(0, 42, 143, .35), rgba(207, 20, 43, .22)); border-color: rgba(125, 211, 252, .35); }
  .pt-style.clasico { background: linear-gradient(90deg, rgba(240, 193, 74, .2), rgba(240, 193, 74, .06)); border-color: rgba(240, 193, 74, .4); }
  .pts-ico { font-size: 14px; line-height: 1; }
  .pt-style.clasico .pts-ico { color: var(--brass); }
  .pt-style b { font-size: 13px; letter-spacing: .01em; }
  .pt-style small { font-size: 10.5px; color: #cbd5e1; }

  /* ── Fin de partida: tarjeta de MMR y rango (sustituye a la de nivel/XP) ── */
  .mmr-card {
    width: 100%; text-align: left; position: relative;
    padding: 10px 12px; border-radius: 15px;
    background: color-mix(in srgb, var(--rk, #f0c14a) 10%, rgba(8, 19, 31, .7));
    border: 1px solid color-mix(in srgb, var(--rk, #f0c14a) 55%, transparent);
  }
  .mc-head { display: flex; align-items: center; gap: 10px; }
  .mc-ico { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
  .mc-rank { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .mc-rank small { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }
  .mc-rank b { font-family: Fraunces, serif; font-size: 16px; font-weight: 640; color: var(--rk, #fde68a); line-height: 1.15; }
  .mc-num { display: flex; flex-direction: column; align-items: flex-end; }
  .mc-num b { font-family: Fraunces, serif; font-size: 22px; font-weight: 640; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
  .mc-num small { font-size: 9px; letter-spacing: .1em; color: #94a3b8; }
  .mc-delta { position: absolute; right: 12px; top: -11px; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
  .mmr-card.up .mc-delta { background: #16a34a; color: #fff; box-shadow: 0 4px 12px rgba(22, 163, 74, .45); }
  .mmr-card.down .mc-delta { background: #dc2626; color: #fff; box-shadow: 0 4px 12px rgba(220, 38, 38, .45); }
  .mc-bar { display: block; height: 7px; margin: 9px 0 5px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; }
  .mc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--rk, #f0c14a); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
  .mc-sub { display: block; font-size: 11px; color: #cbd5e1; }
  .mc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .mc-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.08); color: #fde68a; }
  .mmr-card.promoted { animation: lvlGlow 1.2s ease 2; }
  /* Perfil: insignia del avatar y estadística de rango */
  .ab-rank { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
  .ab-rank i { font-style: normal; }
  .stat-rank i { font-style: normal; font-size: 26px; line-height: 1; }

  /* ── Misiones: anuncio con recompensa ── */
  .ms-ad {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, .14), rgba(56, 189, 248, .1));
    border: 1px solid rgba(192, 132, 252, .45);
  }
  .ms-ad-ico { font-size: 24px; }
  .ms-ad > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ms-ad b { font-size: 13.5px; }
  .ms-ad small { font-size: 11.5px; color: #ddd6fe; }
  .ms-ad .ms-ad-left { color: #94a3b8; font-size: 10.5px; margin-top: 1px; }
  #modal-anuncio { z-index: 70; }
  .ad-box { max-width: 330px; width: 90%; gap: 10px; }
  .ad-sponsor { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #c4b5fd; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(196, 181, 253, .5); }
  .ad-art {
    position: relative; width: 100%; height: 150px; border-radius: 16px; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, rgba(240, 193, 74, .35), transparent 60%), linear-gradient(160deg, #1e3a8a, #0a1626);
    border: 1px solid rgba(240, 193, 74, .35);
  }
  .ad-art b { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(0,0,0,.5); color: #fff; }
  .ad-progress { display: block; width: 100%; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
  .ad-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a855f7, #f0c14a); }
  #ad-close:disabled { opacity: .55; box-shadow: none; }

  /* ── Guía: tres pestañas independientes ── */
  .guide-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 6px; }
  .guide-tabs .gt {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 10px 6px 9px; border-radius: 14px; min-height: 70px;
    background: rgba(255, 255, 255, .04);
    border: 1.5px solid rgba(240, 193, 74, .28);
    color: var(--ivory); cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
  }
  .guide-tabs .gt:hover { border-color: rgba(240, 193, 74, .6); background: rgba(240, 193, 74, .07); }
  .guide-tabs .gt:active { transform: scale(.97); }
  .guide-tabs .gt:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  .guide-tabs .gt b { font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center; }
  .gt-ico {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
    font-size: 16px; background: rgba(240, 193, 74, .1); border: 1px solid rgba(240, 193, 74, .3);
  }
  .gt-ico .ico-domino { font-size: 16px; }
  .guide-tabs .gt.on {
    background: linear-gradient(180deg, rgba(240, 193, 74, .22), rgba(240, 193, 74, .08));
    border-color: var(--brass);
    box-shadow: 0 0 0 1px rgba(240, 193, 74, .25), 0 6px 16px rgba(240, 193, 74, .18);
  }
  .guide-tabs .gt.on b { color: #fde68a; }
  .guide-tabs .gt.on .gt-ico { background: linear-gradient(180deg, #f6d27a, #e2a83a); border-color: transparent; }

  /* ════════════════════════════════════════════════════════════════════
     BARRA DE EXPRESIONES · rejilla simétrica de dos filas
     Fila 1: micro · altavoz · 3 emojis · chat   |   Fila 2: 3 frases rápidas
     ════════════════════════════════════════════════════════════════════ */
  #mesa .tc-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-items: center; justify-items: center;
    gap: 6px 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(240, 193, 74, .14);
  }
  /* Los botones de voz y de reacciones pasan a ser celdas de la rejilla */
  #mesa.is-online .tc-bar .voice-dock { display: contents; }
  #mesa .tc-bar .reacts {
    display: contents;
    -webkit-mask-image: none; mask-image: none; padding: 0;
  }
  #mesa .tc-bar #voice-fab { grid-row: 1; grid-column: 1; }
  #mesa .tc-bar #speaker-btn { grid-row: 1; grid-column: 2; }
  #mesa .tc-bar .chat-fab { grid-row: 1; grid-column: 6; }
  /* Botones redondos del mismo tamaño en toda la fila */
  #mesa .tc-bar #voice-fab, #mesa .tc-bar #speaker-btn, #mesa .tc-bar .chat-fab,
  #mesa .tc-bar .reacts > button:not(.react-phrase) {
    width: 38px; height: 38px; margin: 0; flex: none;
    border-radius: 50%; font-size: 18px;
  }
  #mesa .tc-bar #speaker-btn { font-size: 16px; border-color: rgba(240, 193, 74, .32); background: rgba(255,255,255,.06); }
  /* Emojis rápidos: fila 1, columnas 3–5 (el resto vive en el chat completo) */
  #mesa .tc-bar .reacts > button:not(.react-phrase) { grid-row: 1; }
  #mesa .tc-bar .reacts > button:not(.react-phrase):nth-child(n+7) { display: none; }
  #mesa.is-online .tc-bar .reacts > button:nth-child(4) { grid-column: 3; }
  #mesa.is-online .tc-bar .reacts > button:nth-child(5) { grid-column: 4; }
  #mesa.is-online .tc-bar .reacts > button:nth-child(6) { grid-column: 5; }
  /* Práctica (sin voz): emojis centrados en las columnas 2–4 */
  #mesa:not(.is-online) .tc-bar .reacts > button:nth-child(4) { grid-column: 2; }
  #mesa:not(.is-online) .tc-bar .reacts > button:nth-child(5) { grid-column: 3; }
  #mesa:not(.is-online) .tc-bar .reacts > button:nth-child(6) { grid-column: 4; }
  /* Frases rápidas: fila 2, tres botones iguales, el texto nunca se corta */
  #mesa .tc-bar .reacts > .react-phrase {
    grid-row: 2; grid-column: span 2;
    width: 100%; height: auto; min-height: 32px;
    padding: 5px 6px; border-radius: 11px;
    font-size: 11.5px; font-weight: 700; line-height: 1.2;
    white-space: normal; text-align: center; overflow-wrap: anywhere;
    color: #f1e4c2; background: rgba(240, 193, 74, .09);
    border: 1px solid rgba(240, 193, 74, .3);
  }
  #mesa .tc-bar .reacts > .react-phrase:active { transform: scale(.97); }
  #mesa .tc-bar .reacts > button:focus-visible, #mesa .tc-bar #voice-fab:focus-visible,
  #mesa .tc-bar #speaker-btn:focus-visible, #mesa .tc-bar .chat-fab:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  /* Temporizador circular junto al estado del turno */
  #mesa .tc-row { align-items: center; }
  #mesa .tc-timer {
    width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; line-height: 1; border-width: 2px;
  }
  #mesa .tc-timer.warn { animation: pulsePass .8s infinite; }
  /* Práctica: emojis + chat ocupan las columnas 2–5, centrados respecto a la barra */
  #mesa:not(.is-online) .tc-bar .chat-fab { grid-column: 5; }
  #felt .seat-pod.compact.top .rank-chip span, #felt .seat-pod.compact.bottom .rank-chip span { max-width: 112px; }
  #felt .seat-pod.compact.top .pod-name, #felt .seat-pod.compact.bottom .pod-name { max-width: 112px; }

  /* ════════════════════════════════════════════════════════════════════
     MI INVENTARIO (perfil)
     ════════════════════════════════════════════════════════════════════ */
  .inventory-card { border-color: rgba(240, 193, 74, .32); }
  .inv-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
  .inv-tabs::-webkit-scrollbar { height: 0; }
  .inv-tabs button {
    flex: none; display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(240, 193, 74, .28); background: rgba(255,255,255,.04); color: var(--ivory);
  }
  .inv-tabs button b { font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: rgba(255,255,255,.1); }
  .inv-tabs button.on { background: linear-gradient(180deg, #f6d27a, #e2a83a); color: #2a1c08; border-color: transparent; }
  .inv-tabs button.on b { background: rgba(42, 28, 8, .18); }
  .inv-hint { margin: 2px 0 8px; font-size: 11.5px; color: #94a3b8; }
  .inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; }
  .inv-grid::-webkit-scrollbar { width: 0; }
  .inv-item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px 7px; border-radius: 14px; cursor: pointer; color: var(--ivory);
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    transition: border-color .15s, transform .12s;
  }
  .inv-item:active { transform: scale(.96); }
  .inv-item.rar-epic { border-color: rgba(192, 132, 252, .35); }
  .inv-item.rar-legend { border-color: rgba(251, 191, 36, .45); }
  .inv-item.on { border-color: var(--ok); background: rgba(74, 222, 128, .1); box-shadow: 0 0 0 1px rgba(74, 222, 128, .35); }
  .inv-prev { height: 48px; display: grid; place-items: center; }
  .inv-prev .ava-demo { width: 44px; height: 44px; font-size: 22px; }
  .inv-prev .stk { font-size: 32px; }
  .inv-prev .emoji-demo { font-size: 30px; }
  .inv-prev .tnt-demo { font-size: 24px; }
  .inv-prev .back-demo .back { width: 22px; height: 38px; }
  .inv-prev .snd-demo { height: 26px; }
  .inv-name { font-size: 9.5px; line-height: 1.15; text-align: center; color: #cbd5e1; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .inv-state { font-size: 9.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; color: #e9d6a7; border: 1px solid rgba(240, 193, 74, .35); }
  .inv-item.on .inv-state { color: #052e16; background: #4ade80; border-color: transparent; }
  .inv-grid.cat-taunts { grid-template-columns: 1fr 1fr; }
  /* Sticker favorito en la barra de reacciones */
  #mesa .tc-bar .reacts > .react-stk.fav { box-shadow: 0 0 0 2px rgba(240, 193, 74, .7); }

/* ════════════════════════════════════════════════════════════════════
   COLECCIÓN ÉLITE · Guerreros Legendarios + Oro y Platino + Stickers de Élite
   ════════════════════════════════════════════════════════════════════ */
  /* Rareza Mítica (entre Épico y Legendario) */
  .rarity-tag.rar-mythic { background: linear-gradient(90deg, #f43f5e, #c026d3); color: #fff; }
  .shop-item.rar-mythic { border-color: rgba(244, 63, 94, .55); }
  .inv-item.rar-mythic { border-color: rgba(244, 63, 94, .45); }

  /* Pestaña de máxima exclusividad */
  .shop-tabs .elite-tab {
    background: linear-gradient(135deg, #3a2508, #7c4a0b 45%, #f0c14a 100%);
    color: #fff7d6; border-color: rgba(253, 230, 138, .6);
    box-shadow: 0 0 12px rgba(240, 193, 74, .35);
  }
  .shop-tabs .elite-tab.on { background: linear-gradient(135deg, #fde68a, #f0c14a 50%, #b7791f); color: #3a2508; }

  /* Cabecera de la colección */
  .elite-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center;
    padding: 14px; border-radius: 18px;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(253, 230, 138, .22), transparent 55%),
      linear-gradient(135deg, #1c1407, #2b1d07 50%, #0f172a);
    border: 1px solid rgba(240, 193, 74, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 26px rgba(0, 0, 0, .35);
  }
  .elite-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 247, 214, .16) 50%, transparent 65%);
    background-size: 250% 100%; animation: eliteSweep 4.5s ease-in-out infinite;
  }
  .eh-crest {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
    background: radial-gradient(circle at 35% 30%, #fff7d6, #f0c14a 45%, #7c4a0b 90%);
    box-shadow: 0 0 0 2px rgba(255, 247, 214, .4), 0 0 16px rgba(240, 193, 74, .55);
  }
  .eh-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .eh-text b { font-size: 15px; color: #fde68a; letter-spacing: .02em; }
  .eh-text small { font-size: 11.5px; color: #e7d9b4; line-height: 1.35; }
  .eh-tiers { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }

  /* Insignias de rareza de élite */
  .elite-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 8px 3px 6px; border-radius: 6px; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .35);
  }
  .elite-badge i { font-style: normal; font-size: 9px; }
  .elite-badge.rar-epic   { background: linear-gradient(135deg, #7c3aed, #a855f7); }
  .elite-badge.rar-mythic { background: linear-gradient(135deg, #be123c, #e11d48 45%, #c026d3); }
  .elite-badge.rar-legend { background: linear-gradient(135deg, #fde68a, #f0c14a 45%, #b7791f); color: #3a2508; }
  .shop-item .elite-badge { position: absolute; top: 8px; left: 8px; z-index: 3; }
  #modal-compra .elite-badge { position: static; }

  /* Tarjeta de élite: borde metálico giratorio + destello + aura por rareza */
  .shop-item.elite {
    --tier: #a855f7; --tier2: #e9d5ff;
    overflow: hidden; isolation: isolate;
    border: 0 !important;
    background:
      radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 70%),
      linear-gradient(180deg, #141a2b, #0b1020) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 60%, transparent), 0 12px 26px rgba(0, 0, 0, .4), 0 0 18px color-mix(in srgb, var(--tier) 30%, transparent) !important;
  }
  .shop-item.elite.tier-mythic { --tier: #f43f5e; --tier2: #fbcfe8; }
  .shop-item.elite.tier-legend { --tier: #f0c14a; --tier2: #fff7d6; }
  .shop-item.elite::before {
    content: ""; position: absolute; inset: -60%; z-index: -2;
    background: conic-gradient(from 0deg, transparent 0 62%, var(--tier2) 72%, var(--tier) 80%, transparent 90%);
    animation: eliteSpin 5s linear infinite;
  }
  .shop-item.elite::after {
    content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: 16.5px;
    background:
      radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--tier) 22%, transparent), transparent 70%),
      linear-gradient(180deg, #141a2b, #0b1020);
  }
  .elite-shine {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .18) 50%, transparent 62%);
    background-size: 260% 100%; animation: eliteSweep 3.8s ease-in-out infinite;
  }
  .shop-item.elite .si-preview { position: relative; height: 84px; }
  .shop-item.elite .si-preview::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; translate: -50% -50%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--tier) 45%, transparent), transparent 68%);
    animation: eliteAura 2.8s ease-in-out infinite;
  }
  .shop-item.elite .si-name { color: var(--tier2); }
  .shop-item.elite.equipped { box-shadow: 0 0 0 2px var(--ok), 0 12px 26px rgba(0, 0, 0, .4) !important; }
  .si-buy.elite-price {
    background: linear-gradient(135deg, #fff7d6, #f0c14a 40%, #b7791f) !important; color: #2b1a04 !important;
    font-weight: 900; letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 12px rgba(240, 193, 74, .35);
  }
  .si-buy.elite-price.short { filter: saturate(.55) brightness(.85); }
  .buy-preview.elite { position: relative; }
  .buy-preview.elite::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
    background: conic-gradient(from 0deg, transparent, rgba(253, 230, 138, .45), transparent 30%, rgba(253, 230, 138, .35), transparent 60%);
    animation: eliteSpin 6s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 70%, transparent 72%);
            mask: radial-gradient(circle, transparent 52%, #000 54%, #000 70%, transparent 72%);
  }
  .buy-preview.elite.tier-mythic::before { background: conic-gradient(from 0deg, transparent, rgba(244, 63, 94, .55), transparent 30%, rgba(192, 38, 211, .45), transparent 60%); }
  .buy-preview.elite > * { position: relative; z-index: 1; }

  /* Medallones de élite (se ven igual en tienda, perfil, inventario y mesa) */
  .ava-3d.ed-epico {
    background: radial-gradient(circle at 34% 28%, #ede9fe 0%, #8b5cf6 38%, #3b0764 82%, #1e0536 100%) !important;
    box-shadow: inset 0 .08em .1em rgba(255,255,255,.55), inset 0 -.12em .18em rgba(0,0,0,.55), 0 0 0 .06em #c4b5fd, 0 0 .35em rgba(168, 85, 247, .65) !important;
  }
  .ava-3d.ed-mitico {
    background: radial-gradient(circle at 34% 28%, #ffe4e6 0%, #f43f5e 36%, #831843 74%, #2a0414 100%) !important;
    box-shadow: inset 0 .08em .1em rgba(255,255,255,.55), inset 0 -.12em .18em rgba(0,0,0,.55), 0 0 0 .06em #fb7185, 0 0 0 .12em rgba(192, 38, 211, .55), 0 0 .45em rgba(244, 63, 94, .7) !important;
    animation: eliteAvaPulse 2.6s ease-in-out infinite !important;
  }
  .ava-3d.ed-legendario {
    background: radial-gradient(circle at 34% 28%, #fffbeb 0%, #fbbf24 32%, #b45309 64%, #1c0f02 100%) !important;
    box-shadow: inset 0 .08em .1em rgba(255,255,255,.7), inset 0 -.12em .18em rgba(0,0,0,.55), 0 0 0 .06em #fde68a, 0 0 0 .13em #7c4a0b, 0 0 .55em rgba(251, 191, 36, .8) !important;
    animation: eliteAvaPulse 2.2s ease-in-out infinite !important;
  }
  .ava-3d.ed-oropuro {
    background: linear-gradient(135deg, #fff7d6 0%, #f6d365 22%, #c8961e 45%, #fff1b8 58%, #b7791f 78%, #5a3404 100%) !important;
    background-size: 220% 220% !important;
    box-shadow: inset 0 .08em .12em rgba(255,255,255,.85), inset 0 -.14em .2em rgba(90, 52, 4, .65), 0 0 0 .07em #fde68a, 0 0 .5em rgba(246, 211, 101, .85) !important;
    animation: eliteMetal 3.6s ease-in-out infinite, eliteAvaPulse 2.4s ease-in-out infinite !important;
  }
  .ava-3d.ed-platino {
    background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 20%, #9ca3af 42%, #f8fafc 56%, #94a3b8 76%, #334155 100%) !important;
    background-size: 220% 220% !important;
    box-shadow: inset 0 .08em .12em rgba(255,255,255,.95), inset 0 -.14em .2em rgba(30, 41, 59, .6), 0 0 0 .07em #f1f5f9, 0 0 0 .13em rgba(148, 163, 184, .6), 0 0 .5em rgba(226, 232, 240, .8) !important;
    animation: eliteMetal 3.2s ease-in-out infinite !important;
  }
  .ava-3d.ed-joyas {
    background:
      radial-gradient(circle at 18% 70%, #22d3ee 0 5%, transparent 6%),
      radial-gradient(circle at 80% 68%, #f43f5e 0 5%, transparent 6%),
      radial-gradient(circle at 50% 90%, #34d399 0 5%, transparent 6%),
      radial-gradient(circle at 22% 24%, #a78bfa 0 4%, transparent 5%),
      radial-gradient(circle at 80% 22%, #e0f2fe 0 4%, transparent 5%),
      linear-gradient(135deg, #fff7d6 0%, #f6d365 25%, #c8961e 48%, #fff1b8 60%, #e5e7eb 72%, #94a3b8 100%) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 220% !important;
    box-shadow: inset 0 .08em .12em rgba(255,255,255,.9), inset 0 -.14em .2em rgba(60, 36, 4, .6), 0 0 0 .07em #fde68a, 0 0 0 .14em rgba(125, 211, 252, .55), 0 0 .6em rgba(240, 171, 252, .7) !important;
    animation: eliteMetal 3s ease-in-out infinite, eliteAvaPulse 2s ease-in-out infinite !important;
  }
  .ed-tag.ed-epico { color: #c4b5fd; } .ed-tag.ed-mitico { color: #fda4af; } .ed-tag.ed-legendario { color: #fde68a; }
  .ed-tag.ed-oropuro { color: #fde68a; } .ed-tag.ed-platino { color: #f1f5f9; } .ed-tag.ed-joyas { color: #a5f3fc; }
  .shop-item.elite .ed-tag { z-index: 3; background: rgba(0, 0, 0, .5); }
  .ed-dot.ed-epico { background: #8b5cf6; } .ed-dot.ed-mitico { background: #f43f5e; box-shadow: 0 0 6px #c026d3; }
  .ed-dot.ed-legendario { background: #fbbf24; box-shadow: 0 0 6px #f59e0b; }
  .ed-dot.ed-oropuro { background: linear-gradient(135deg, #fff7d6, #c8961e); } .ed-dot.ed-platino { background: linear-gradient(135deg, #fff, #94a3b8); }
  .ed-dot.ed-joyas { background: conic-gradient(#22d3ee, #f43f5e, #34d399, #f6d365, #22d3ee); }

  /* Stickers de Élite animados: efectos de partículas alrededor del sticker */
  .stk-coins, .stk-goldfire, .stk-crowns, .stk-fireworks, .stk-champagne, .stk-jackpot { position: relative; }
  .stk-coins::before, .stk-coins::after,
  .stk-crowns::before, .stk-crowns::after,
  .stk-jackpot::before, .stk-jackpot::after,
  .stk-champagne::before, .stk-champagne::after {
    position: absolute; left: 50%; top: -10%; font-size: .32em; pointer-events: none;
    animation: stkRain 1.6s linear infinite;
  }
  .stk-coins::before { content: "🪙"; translate: -140% 0; }
  .stk-coins::after  { content: "🪙"; translate: 60% 0; animation-delay: .8s; }
  .stk-coins { animation: stkBob 1.6s ease-in-out infinite; filter: drop-shadow(0 0 .12em rgba(250, 204, 21, .8)); }
  .stk-crowns::before { content: "✨"; translate: -150% 10%; animation: stkTwinkle 1.4s ease-in-out infinite; }
  .stk-crowns::after  { content: "✨"; translate: 70% 30%; animation: stkTwinkle 1.4s ease-in-out .7s infinite; }
  .stk-crowns { animation: stkGlow 2s ease-in-out infinite; filter: drop-shadow(0 0 .18em rgba(253, 230, 138, .95)); }
  .stk-jackpot::before { content: "💎"; translate: -150% 0; }
  .stk-jackpot::after  { content: "💎"; translate: 70% 0; animation-delay: .55s; }
  .stk-jackpot { animation: stkSpinY 2.4s ease-in-out infinite; filter: drop-shadow(0 0 .18em rgba(125, 211, 252, .95)); }
  .stk-champagne::before { content: "🫧"; top: -20%; translate: -40% 0; animation: stkFizz 1.3s ease-out infinite; }
  .stk-champagne::after  { content: "🎊"; top: -20%; translate: 30% 0; animation: stkFizz 1.3s ease-out .6s infinite; }
  .stk-champagne { animation: stkPop 1.3s ease-in-out infinite; }
  .stk-goldfire {
    animation: stkBurn 1s ease-in-out infinite;
    filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 .2em rgba(251, 191, 36, .95));
  }
  .stk-fireworks { animation: stkGlow 1.8s ease-in-out infinite; filter: drop-shadow(0 0 .16em rgba(253, 230, 138, .9)); }
  .stk-fireworks::before, .stk-fireworks::after {
    content: ""; position: absolute; left: 50%; top: 40%; width: 1.5em; height: 1.5em; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, transparent 46%, #fde68a 48%, transparent 52%), conic-gradient(from 0deg, #f472b6 0 4%, transparent 4% 12.5%, #fde68a 12.5% 16.5%, transparent 16.5% 25%, #7dd3fc 25% 29%, transparent 29% 37.5%, #4ade80 37.5% 41.5%, transparent 41.5% 50%, #f472b6 50% 54%, transparent 54% 62.5%, #fde68a 62.5% 66.5%, transparent 66.5% 75%, #7dd3fc 75% 79%, transparent 79% 87.5%, #4ade80 87.5% 91.5%, transparent 91.5%);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, #000 60%, transparent 62%);
            mask: radial-gradient(circle, transparent 30%, #000 32%, #000 60%, transparent 62%);
    animation: stkBurstRing 1.8s ease-out infinite; z-index: -1;
  }
  .stk-fireworks::after { animation-delay: .9s; rotate: 22deg; }
  /* Sticker lanzado en la mesa: brillo de élite extra */
  .sticker-drop .stk-coins, .sticker-drop .stk-goldfire, .sticker-drop .stk-crowns,
  .sticker-drop .stk-fireworks, .sticker-drop .stk-champagne, .sticker-drop .stk-jackpot { font-size: 88px; }

  @keyframes eliteSpin { to { transform: rotate(1turn); } }
  @keyframes eliteSweep { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
  @keyframes eliteAura { 0%, 100% { opacity: .55; scale: .9; } 50% { opacity: 1; scale: 1.08; } }
  @keyframes eliteMetal { 0%, 100% { background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0% 0%; } 50% { background-position: 100% 100%, 0 0, 0 0, 0 0, 0 0, 100% 100%; } }
  @keyframes eliteAvaPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14) saturate(1.1); } }
  @keyframes stkRain { 0% { transform: translateY(-.2em) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(1.9em) rotate(220deg); opacity: 0; } }
  @keyframes stkTwinkle { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: 1; scale: 1.15; } }
  @keyframes stkFizz { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-1.2em); opacity: 0; } }
  @keyframes stkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.08em); } }
  @keyframes stkSpinY { 0%, 100% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(180deg) scale(1.08); } }
  @keyframes stkPop { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) scale(1.06); } }
  @keyframes stkBurstRing { 0% { scale: .3; opacity: 0; } 30% { opacity: 1; } 100% { scale: 1.35; opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .shop-item.elite::before, .elite-shine, .elite-hero::after, .shop-item.elite .si-preview::before, .buy-preview.elite::before,
    .ava-3d.ed-mitico, .ava-3d.ed-legendario, .ava-3d.ed-oropuro, .ava-3d.ed-platino, .ava-3d.ed-joyas,
    [class*="stk-"]::before, [class*="stk-"]::after { animation: none !important; }
  }

/* ════════════════════════════════════════════════════════════════════
   INICIO · Cabecera simétrica (2 filas) + insignia EN VIVO en "Jugar en línea"
   ════════════════════════════════════════════════════════════════════ */
  #inicio .top.home-top { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  #inicio .ht-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  #inicio .ht-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  /* Botones redondos del mismo tamaño: regalos · idioma · avatar */
  #inicio .ht-actions .ht-btn,
  #inicio .ht-actions .avatar { width: 40px; height: 40px; flex: none; }
  #inicio .ht-actions .gift-btn { display: grid !important; place-items: center; font-size: 17px; border-radius: 50%; position: relative; }
  #inicio .ht-actions .lang-select.compact {
    display: grid; place-items: center; padding: 0 !important; border-radius: 50%; position: relative;
  }
  #inicio .ht-actions .lang-select.compact .ls-flag { font-size: 19px; line-height: 1; }
  #inicio .ht-actions .lang-select.compact .ls-code { display: none; }
  #inicio .ht-actions .lang-select.compact select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  #inicio .ht-actions .avatar { font-size: 17px; }
  #inicio .ht-actions .avatar.ava-legend { font-size: 21px; }
  /* Billetera: dos tarjetas gemelas, mismo alto y ancho */
  #inicio .wallet-pair.ht-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #inicio .ht-wallet .dia-pill,
  #inicio .ht-wallet .mmr-pill.stacked {
    height: 46px; width: 100%; min-width: 0; margin: 0;
    display: flex; align-items: center; gap: 8px; justify-content: flex-start;
    padding: 0 12px; border-radius: 14px; box-sizing: border-box;
  }
  #inicio .ht-wallet .dia-ico, #inicio .ht-wallet .rk-ico { font-size: 20px; flex: none; }
  #inicio .ht-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; flex: 1; }
  #inicio .ht-stack small { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
  #inicio .ht-stack b { font-size: 16px; }
  #inicio .ht-plus {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-weight: 900; font-size: 14px; background: rgba(240, 193, 74, .22); color: #fde68a;
  }
  #inicio .ht-wallet .mmr-pill.stacked .rk-stack { flex: 1; }
  #inicio .ht-wallet .mmr-pill.stacked .rk-name { max-width: none; font-size: 10px; -webkit-line-clamp: 1; }
  #inicio .ht-wallet .mmr-pill.stacked b { font-size: 16px; }
  #inicio .ht-wallet .mmr-pill.stacked b small { font-size: 9px; }
  @media (max-width: 400px) {
    #inicio .ht-actions .gift-btn { display: grid !important; }
    #inicio .ht-actions .ht-btn, #inicio .ht-actions .avatar { width: 36px; height: 36px; }
    #inicio .ht-actions { gap: 6px; }
    #inicio .ht-wallet .dia-pill, #inicio .ht-wallet .mmr-pill.stacked { padding: 0 9px; gap: 6px; }
  }

  /* Insignia "EN VIVO": radar de neón con ondas + icono multijugador */
  #inicio .hero { position: relative; }
  .hero-live {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    display: flex; align-items: center; gap: 7px; pointer-events: none;
  }
  .hl-radar {
    position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    color: #052e16; background: radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e 55%, #15803d);
    box-shadow: 0 0 0 2px rgba(187, 247, 208, .55), 0 0 14px rgba(34, 197, 94, .85), 0 0 28px rgba(34, 197, 94, .45);
  }
  .hl-radar svg { width: 20px; height: 20px; position: relative; z-index: 1; }
  .hl-radar i {
    position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(74, 222, 128, .85);
    animation: hlWave 2.1s cubic-bezier(.2, .6, .3, 1) infinite;
  }
  .hl-radar i:nth-child(2) { animation-delay: .7s; }
  .hl-radar i:nth-child(3) { animation-delay: 1.4s; }
  .hl-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 99px;
    font-size: 10px; font-weight: 900; letter-spacing: .14em; color: #fff;
    background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 0 12px rgba(239, 68, 68, .6);
  }
  .hl-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; animation: hlBlink 1.1s ease-in-out infinite; }
  .hero-online-chip {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
    padding: 3px 9px; border-radius: 99px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #bbf7d0;
    background: rgba(34, 197, 94, .16); border: 1px solid rgba(74, 222, 128, .55);
    box-shadow: 0 0 10px rgba(34, 197, 94, .25);
  }
  .hero-online-chip .hl-dot { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
  #inicio .hero { box-shadow: 0 0 0 1px rgba(74, 222, 128, .35), 0 0 22px rgba(34, 197, 94, .18), 0 14px 30px rgba(0, 0, 0, .35); }
  @keyframes hlWave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
  @keyframes hlBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
  @media (prefers-reduced-motion: reduce) { .hl-radar i, .hl-dot { animation: none; } }
  /* EN VIVO arriba a la izquierda: no tapa las fichas del héroe */
  #inicio .hero { padding-top: 54px; align-items: flex-end; }
  .hero-live { left: 14px; right: auto; top: 12px; }
  .hl-radar { width: 30px; height: 30px; }
  .hl-radar svg { width: 17px; height: 17px; }
  .hl-sub { font-size: 11px; font-weight: 800; color: #bbf7d0; text-shadow: 0 0 8px rgba(34, 197, 94, .6); white-space: nowrap; }
  /* Élite: la edición ya va en el nombre; la insignia de rareza manda */
  .shop-item.elite .ed-tag { display: none; }

  /* ════════════════════════════════════════════════════════════════════
     MESA PRIVADA · apuestas con diamantes por código secreto
     ════════════════════════════════════════════════════════════════════ */
  .pv-box { text-align: left; }
  .pv-box .end-box-ico, .pv-box .end-box-title { text-align: center; }
  .pv-ico { font-size: 30px; }
  .pv-lede { margin: 2px 0 10px; font-size: 13px; line-height: 1.45; color: #cbd5e1; text-align: center; }
  .pv-balance {
    display: flex; align-items: center; gap: 4px; width: fit-content; margin: 0 auto 12px; padding: 4px 12px; border-radius: 99px;
    font-size: 12.5px; color: #e2e8f0; background: rgba(240, 193, 74, .1); border: 1px solid rgba(240, 193, 74, .35);
  }
  .pv-balance b { color: var(--brass); font-variant-numeric: tabular-nums; }
  .pv-create {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    border-radius: 14px; border: 1.5px solid rgba(240, 193, 74, .55); color: #fff; text-align: left;
    background: linear-gradient(135deg, rgba(240, 193, 74, .16), rgba(18, 38, 64, .9));
  }
  .pv-create:active { transform: scale(.98); }
  .pv-create-ico {
    flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    font-size: 20px; font-weight: 700; color: #2b1802; background: linear-gradient(135deg, #f0c14a, #d49c25);
  }
  .pv-create-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pv-create-text b { font-size: 14.5px; }
  .pv-create-text small { font-size: 12px; color: #94a3b8; }
  .pv-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: #94a3b8; font-size: 12px; }
  .pv-divider::before, .pv-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
  .pv-code-field input { letter-spacing: .3em; font-family: Fraunces, serif; }
  .pv-code-field input::placeholder { letter-spacing: normal; font-family: inherit; font-size: 14px; font-weight: 500; color: #64748b; }
  .pv-preview {
    margin-top: 10px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  }
  .pv-pv-head { display: flex; align-items: center; gap: 10px; }
  .pv-pv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pv-pv-head b { font-size: 14px; color: #fff; }
  .pv-pv-head small { font-size: 11.5px; color: #94a3b8; }
  .pv-pv-ava { width: 36px; height: 36px; flex: none; }
  .pv-pv-bet { flex: none; font-style: normal; font-weight: 800; color: var(--brass); font-size: 16px; font-variant-numeric: tabular-nums; }
  .pv-pv-pot { margin: 8px 0 0; font-size: 12px; color: #bae6fd; }
  .pv-accept {
    display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; cursor: pointer;
    border-radius: 12px; background: rgba(240, 193, 74, .08); border: 1px solid rgba(240, 193, 74, .35);
    font-size: 12.5px; line-height: 1.4; color: #f1e3bf;
  }
  .pv-accept input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #f0c14a; }
  #pv-join { margin-top: 10px; }
  #pv-join:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
  #pv-join.pv-short { background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #04223a; box-shadow: 0 4px 14px rgba(56, 189, 248, .3); }
  .pv-invites { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
  .pv-invites[hidden] { display: none; }
  .pv-inv-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }
  .pv-inv-row {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; cursor: pointer; text-align: left;
    border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: #fff;
  }
  .pv-inv-row.on { border-color: var(--brass); background: rgba(240, 193, 74, .1); }
  .pv-inv-ava { width: 30px; height: 30px; flex: none; }
  .pv-inv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .pv-inv-text b { font-size: 13px; }
  .pv-inv-text small { font-size: 11px; color: #94a3b8; }
  .pv-inv-row code { flex: none; font-family: Fraunces, serif; font-size: 14px; letter-spacing: .12em; color: var(--brass); }
  .pv-inv-use { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; color: #2b1802; background: #f0c14a; }
  .cm-private-note {
    margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; text-align: left;
    color: #f1e3bf; background: rgba(240, 193, 74, .1); border: 1px solid rgba(240, 193, 74, .4);
  }
  .cm-private-note[hidden], .cm-access-block[hidden] { display: none; }
  /* Código secreto en la sala de espera */
  .pv-codebox {
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(240, 193, 74, .16), rgba(12, 21, 39, .9)); border: 1.5px dashed rgba(240, 193, 74, .6);
  }
  .pv-codebox[hidden] { display: none; }
  .pv-code-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pv-code-info .meta { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
  .pv-code-info b { font-family: Fraunces, serif; font-size: 28px; letter-spacing: .16em; color: var(--brass); font-variant-numeric: tabular-nums; }
  .pv-code-info small { font-size: 11.5px; line-height: 1.35; color: #cbd5e1; }
  .pv-codebox .invite { flex: none; }
  .bet-private { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: #fde68a; text-align: center; }
  .toll-tag.pv-broke { color: #fecaca; background: rgba(239, 68, 68, .16); border-color: rgba(248, 113, 113, .6); }

  /* ════════════════════════════════════════════════════════════════════
     PERFIL PRO · casillas de cristal esmerilado con filo por rareza
     ════════════════════════════════════════════════════════════════════ */
  .vt-cell, .inv-item {
    --edge: #94a3b8;                                   /* común: plata */
    position: relative; isolation: isolate; overflow: hidden;
    border: 1.5px solid transparent !important;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 42%, rgba(8, 16, 30, .55)) padding-box,
      linear-gradient(140deg, color-mix(in srgb, var(--edge) 95%, #fff), color-mix(in srgb, var(--edge) 25%, transparent) 38%,
        color-mix(in srgb, var(--edge) 20%, transparent) 62%, var(--edge)) border-box;
    -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 18px rgba(0, 0, 0, .25),
      0 6px 14px rgba(0, 0, 0, .4), 0 0 14px -5px var(--edge);
  }
  .vt-cell.rar-rare, .inv-item.rar-rare { --edge: #38bdf8; }       /* raro: cian neón */
  .vt-cell.rar-epic, .inv-item.rar-epic { --edge: #c084fc; }       /* épico: violeta neón */
  .vt-cell.rar-mythic, .inv-item.rar-mythic { --edge: #fb7185; }   /* mítico: rosa neón */
  .vt-cell.rar-legend, .inv-item.rar-legend { --edge: #f0c14a; }   /* legendario: oro */
  /* Destello que recorre el filo de las piezas legendarias y míticas */
  .vt-cell::after, .inv-item::after {
    content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none; opacity: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 246, 214, .28) 50%, transparent 58%);
    transform: translateX(-60%);
  }
  .vt-cell.rar-legend::after, .vt-cell.rar-mythic::after,
  .inv-item.rar-legend::after, .inv-item.rar-mythic::after { opacity: 1; animation: vtGlint 4.8s ease-in-out infinite; }
  @keyframes vtGlint { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
  /* Gema de rareza en la esquina */
  .vt-gem {
    position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; transform: rotate(45deg); border-radius: 1.5px;
    background: linear-gradient(135deg, #fff, var(--edge) 55%); box-shadow: 0 0 6px var(--edge);
  }
  .vt-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 88px; padding: 12px 3px 8px; border-radius: 14px; color: var(--ivory, #f8f1e0); font: inherit;
  }
  .vt-cell .stk { font-size: 30px; line-height: 1.1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
  .vt-name { font-size: 9.5px; font-weight: 600; color: #e2e8f0; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Bloqueado: silueta apagada tras un candado dorado y su precio en placa */
  .vt-cell.locked { cursor: pointer; transition: transform .12s ease, box-shadow .2s ease; }
  .vt-cell.locked:active { transform: scale(.95); }
  .vt-cell.locked:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  .vt-cell.locked .vt-ghost { filter: grayscale(1) brightness(.55) blur(1.2px); opacity: .45; }
  .vt-lock {
    position: absolute; left: 50%; top: 40%; width: 30px; height: 30px; transform: translate(-50%, -50%);
    display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(10, 18, 32, .85) 70%);
    border: 1px solid rgba(240, 193, 74, .65);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .55), 0 0 12px -2px rgba(240, 193, 74, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  .vt-lock svg { width: 17px; height: 17px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
  .vt-lock .vt-shackle { fill: none; stroke: #f6dc8c; stroke-width: 2.3; stroke-linecap: round; }
  .vt-lock .vt-body { fill: #e2a83a; stroke: #fff1c2; stroke-width: .9; }
  .vt-lock .vt-hole { fill: #3a2508; stroke: #3a2508; stroke-width: 1.6; stroke-linecap: round; }
  .vt-price {
    position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 8px 2px 6px; border-radius: 99px; font-size: 10.5px; font-weight: 800; line-height: 1.2;
    color: #2a1c08; background: linear-gradient(180deg, #fde68a, #e2a83a);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
    font-variant-numeric: tabular-nums;
  }
  .vt-price span { font-size: 9px; }
  .vt-cell.locked.rar-mythic .vt-price { color: #fff; background: linear-gradient(180deg, #fb7185, #c026d3); }
  @media (hover: hover) {
    .vt-cell.locked:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 18px rgba(0, 0, 0, .45), 0 0 18px -3px var(--edge); }
    .vt-cell.locked:hover .vt-ghost { opacity: .7; filter: grayscale(.4) brightness(.8) blur(.4px); }
  }
  /* Inventario: mismas casillas; la equipada conserva su aro verde */
  .inv-item { border-radius: 14px; }
  .inv-item.on {
    --edge: #4ade80;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px rgba(0, 0, 0, .4), 0 0 0 1px rgba(74, 222, 128, .45), 0 0 16px -3px #4ade80;
  }
  @media (prefers-reduced-motion: reduce) {
    .vt-cell::after, .inv-item::after { animation: none !important; opacity: 0 !important; }
  }
  @media (max-width: 360px) {
    .vitrina-grid { gap: 6px; padding: 8px; }
    .vt-cell { min-height: 80px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     CHAT GLOBAL EN VIVO · lobby de "Jugar en línea"
     ════════════════════════════════════════════════════════════════════ */
  .la-chat {
    border: 1px solid rgba(240, 193, 74, .35);
    background:
      radial-gradient(200px 110px at 100% 0%, rgba(240, 193, 74, .2), transparent 60%),
      linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 45%), rgba(16, 26, 44, .7);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.32);
  }
  .la-chat:hover { border-color: rgba(240, 193, 74, .65); }
  .la-chat.on { border-color: var(--brass); box-shadow: 0 0 0 1px rgba(240, 193, 74, .4), 0 12px 26px rgba(0,0,0,.32); }
  .la-chat .la-ico { background: rgba(240, 193, 74, .14); box-shadow: inset 0 0 0 1px rgba(240, 193, 74, .4); }
  .la-chat .la-text small { color: #f1e3bf; }
  .gc-unread {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
    display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff;
    background: #ef4444; border: 2px solid #0c1527;
  }
  .gc-unread[hidden] { display: none; }
  .gc-live {
    flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #fecaca;
    background: rgba(239, 68, 68, .14); border: 1px solid rgba(248, 113, 113, .45);
  }
  .gc-live i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: gcPulse 1.6s ease-out infinite; }
  .gc-live.small { padding: 1px 7px; font-size: 9.5px; margin-left: 6px; vertical-align: middle; }
  @keyframes gcPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } }
  .gc-head-title { display: inline-flex; align-items: center; gap: 4px; }
  .gc-panel {
    display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
    background: linear-gradient(180deg, rgba(10, 18, 32, .92), rgba(6, 12, 22, .96));
    border: 1px solid rgba(240, 193, 74, .32);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, .08), 0 14px 30px rgba(0, 0, 0, .4);
  }
  .gc-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
    font-size: 11.5px; color: #94a3b8; border-bottom: 1px solid rgba(240, 193, 74, .16);
    background: linear-gradient(90deg, rgba(240, 193, 74, .08), transparent);
  }
  .gc-online { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #bbf7d0; }
  .gc-online .oc-dot { position: static; width: 8px; height: 8px; border: 0; }
  .gc-shield { text-align: right; }
  .gc-log {
    height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px;
    display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(240, 193, 74, .3) transparent;
  }
  .gc-sys {
    align-self: center; max-width: 92%; padding: 6px 12px; border-radius: 12px; text-align: center;
    font-size: 11.5px; line-height: 1.4; color: #f1e3bf; background: rgba(240, 193, 74, .08); border: 1px dashed rgba(240, 193, 74, .35);
  }
  .gc-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; animation: gcIn .22s ease-out both; }
  .gc-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
  @keyframes gcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .gc-ava { width: 30px; height: 30px; flex: none; font-size: 13px; }
  .gc-bubble {
    min-width: 0; padding: 7px 11px 8px; border-radius: 16px 16px 16px 5px;
    background: linear-gradient(165deg, #1b2638, #121b2b); border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .gc-msg.mine .gc-bubble {
    border-radius: 16px 16px 5px 16px;
    background: linear-gradient(165deg, #2a2213, #17130b); border-color: rgba(240, 193, 74, .5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 12px -4px rgba(240, 193, 74, .5), inset 0 1px 0 rgba(255, 236, 180, .12);
  }
  .gc-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; font-size: 11px; }
  .gc-meta b { color: var(--brass); font-weight: 800; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gc-meta .rank-chip { font-size: 11px; }
  .gc-meta time { margin-left: auto; padding-left: 6px; font-size: 10px; color: #64748b; font-variant-numeric: tabular-nums; }
  .gc-bubble p { margin: 0; font-size: 13.5px; line-height: 1.38; color: #e8edf5; overflow-wrap: anywhere; }
  .gc-msg.big .gc-bubble p { font-size: 26px; line-height: 1.2; }
  .gc-emojis {
    display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px 2px; scrollbar-width: none;
    border-top: 1px solid rgba(240, 193, 74, .14);
  }
  .gc-emojis::-webkit-scrollbar { height: 0; }
  .gc-emojis button {
    flex: none; width: 36px; height: 36px; border-radius: 11px; font-size: 19px; cursor: pointer;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .12s ease, border-color .15s ease;
  }
  .gc-emojis button:active { transform: scale(.9); }
  @media (hover: hover) { .gc-emojis button:hover { border-color: rgba(240, 193, 74, .55); } }
  .gc-compose { display: flex; gap: 8px; padding: 8px 10px 4px; }
  .gc-compose input {
    flex: 1; min-width: 0; padding: 11px 14px; border-radius: 99px; outline: none;
    font: inherit; font-size: 14px; color: #fff; background: #0c1527; border: 1.5px solid rgba(240, 193, 74, .3);
  }
  .gc-compose input::placeholder { color: #64748b; }
  .gc-compose input:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(240, 193, 74, .16); }
  .gc-send {
    flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; color: #2b1802;
    background: linear-gradient(135deg, #f6d27a, #d49c25); box-shadow: 0 4px 12px rgba(240, 193, 74, .35);
  }
  .gc-send:active { transform: scale(.92); }
  .gc-hint { min-height: 16px; margin: 0; padding: 0 16px 8px; font-size: 11.5px; color: #94a3b8; }
  .gc-hint.err { color: #f87171; font-weight: 600; }
  .gc-hint.warn { color: #fde68a; font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { .gc-msg, .gc-live i { animation: none !important; } }

  /* ════════════════════════════════════════════════════════════════════
     RANKING GLOBAL · Top 1000 por MMR
     ════════════════════════════════════════════════════════════════════ */
  #posiciones .scroll { padding-bottom: 14px; }
  .lb-head { text-align: center; }
  .lb-head .page { margin-top: 6px; }
  .lb-head .lede { margin-bottom: 14px; }
  .lb-kicker {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 3px 11px; border-radius: 99px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--brass);
    background: rgba(240, 193, 74, .12); border: 1px solid rgba(240, 193, 74, .4);
  }
  .lb-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
  /* Podio Top 3: el #1 al centro y más alto */
  .lb-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 18px 0 16px; }
  .lb-pod {
    position: relative; isolation: isolate; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 30px 6px 10px; border-radius: 18px; text-align: center;
    border: 1.5px solid transparent;
    background:
      linear-gradient(170deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 45%, rgba(6, 12, 22, .75)) padding-box,
      linear-gradient(#0c1626, #0a121f) padding-box,
      linear-gradient(150deg, var(--medal), color-mix(in srgb, var(--medal) 20%, transparent) 45%, var(--medal)) border-box;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .45), 0 0 22px -8px var(--medal), inset 0 1px 0 rgba(255, 255, 255, .2);
  }
  .lb-pod.p1 { --medal: #f0c14a; padding-top: 38px; margin-bottom: 14px; }
  .lb-pod.p2 { --medal: #cbd5e1; }
  .lb-pod.p3 { --medal: #d08b4f; }
  .lb-pod.me { box-shadow: 0 14px 28px rgba(0, 0, 0, .45), 0 0 0 2px #4ade80, inset 0 1px 0 rgba(255, 255, 255, .2); }
  .lb-pod::after {           /* destello del podio */
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--medal) 30%, transparent), transparent 70%);
  }
  .lb-medal { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 26px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
  .lb-pod.p1 .lb-medal { font-size: 32px; top: -20px; animation: lbCrown 3s ease-in-out infinite; }
  @keyframes lbCrown { 0%, 100% { transform: translate(-50%, 0) rotate(-4deg); } 50% { transform: translate(-50%, -3px) rotate(4deg); } }
  .lb-pod-ava { width: 54px; height: 54px; font-size: 24px; box-shadow: 0 0 0 2px var(--medal), 0 6px 14px rgba(0, 0, 0, .5); }
  .lb-pod.p1 .lb-pod-ava { width: 66px; height: 66px; font-size: 30px; }
  .lb-pod-place {
    margin-top: -10px; position: relative; z-index: 1; padding: 1px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 900; color: #1c1405; background: var(--medal); box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  }
  .lb-pod .lb-name { max-width: 100%; margin-top: 2px; font-size: 13px; }
  .lb-pod .lb-title { justify-content: center; font-size: 9.5px; line-height: 1.2; white-space: normal; text-align: center; }
  .lb-pod-mmr { font-size: 11px; font-weight: 700; color: #cbd5e1; }
  .lb-pod-mmr b { font-family: Fraunces, serif; font-size: 19px; color: var(--medal); font-variant-numeric: tabular-nums; }
  .lb-pod.p1 .lb-pod-mmr b { font-size: 23px; }
  .lb-pod .lb-stats { flex-direction: column; align-items: stretch; gap: 3px; width: 100%; margin-top: 4px; }
  .lb-pod .lb-stat { justify-content: center; }
  .lb-pod .lb-stat small { display: none; }
  /* Cabecera de columnas */
  .lb-cols { display: flex; justify-content: space-between; padding: 0 16px 6px 56px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }
  /* Filas de cristal con filo dorado; el color del rango tiñe la insignia */
  .lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .lb-row {
    display: grid; grid-template-columns: 34px 42px minmax(0, 1fr) auto; align-items: center; gap: 9px;
    padding: 10px 12px 10px 8px; border-radius: 16px; border: 1px solid transparent;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 50%, rgba(6, 12, 22, .55)) padding-box,
      linear-gradient(#0f1a2c, #0b1322) padding-box,
      linear-gradient(120deg, rgba(240, 193, 74, .55), rgba(240, 193, 74, .08) 40%, rgba(240, 193, 74, .08) 70%, rgba(240, 193, 74, .35)) border-box;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .lb-row.top10 {
    background:
      linear-gradient(165deg, rgba(240, 193, 74, .12), rgba(255, 255, 255, .02) 50%, rgba(6, 12, 22, .55)) padding-box,
      linear-gradient(#0f1a2c, #0b1322) padding-box,
      linear-gradient(120deg, #f6d27a, rgba(240, 193, 74, .2) 40%, rgba(240, 193, 74, .2) 70%, #f0c14a) border-box;
  }
  .lb-row.me {
    background:
      linear-gradient(165deg, rgba(74, 222, 128, .14), rgba(255, 255, 255, .02) 50%, rgba(6, 12, 22, .55)) padding-box,
      linear-gradient(#0f1a2c, #0b1322) padding-box,
      linear-gradient(120deg, #4ade80, rgba(74, 222, 128, .25) 45%, #4ade80) border-box;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .32), 0 0 16px -4px rgba(74, 222, 128, .6);
  }
  .lb-row.flash { animation: lbFlash 1.6s ease-out; }
  @keyframes lbFlash { 0%, 40% { transform: scale(1.025); box-shadow: 0 0 0 3px #4ade80, 0 0 26px rgba(74, 222, 128, .7); } 100% { transform: none; } }
  .lb-place { text-align: center; font-family: Fraunces, serif; font-size: 17px; font-weight: 700; color: #e2e8f0; font-variant-numeric: tabular-nums; line-height: 1; }
  .lb-place small { font-size: 10px; color: #64748b; margin-right: 1px; }
  .lb-row.top10 .lb-place { color: var(--brass); }
  .lb-ava { width: 42px; height: 42px; font-size: 18px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
  .lb-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .lb-name { display: block; font-size: 14px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-you { font-style: normal; font-size: 9.5px; font-weight: 900; padding: 1px 6px; border-radius: 99px; color: #052e16; background: #4ade80; vertical-align: 2px; }
  .lb-title {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
    font-size: 10.5px; font-weight: 700; color: var(--rk, #f0c14a); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .lb-title i { font-style: normal; font-size: 12px; }
  .lb-stats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
  .lb-stat {
    display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 7px; border-radius: 99px;
    font-size: 10.5px; color: #cbd5e1; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .08);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .lb-stat i { font-style: normal; font-size: 10px; }
  .lb-stat b { font-weight: 800; color: #fff; }
  .lb-stat small { display: none; }
  .lb-stat.dia b { color: #7dd3fc; }
  .lb-mmr { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
  .lb-mmr b { font-family: Fraunces, serif; font-size: 20px; font-weight: 700; color: var(--brass); font-variant-numeric: tabular-nums; }
  .lb-mmr small { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: #94a3b8; }
  .lb-sentinel { height: 1px; }
  .lb-more {
    display: block; width: 100%; margin: 12px 0 0; padding: 11px; border-radius: 14px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--brass);
    background: rgba(240, 193, 74, .08); border: 1px dashed rgba(240, 193, 74, .45);
  }
  .lb-more[hidden], .lb-end[hidden] { display: none; }
  .lb-end { margin: 14px 0 0; text-align: center; font-size: 12px; color: #64748b; }
  /* Tu puesto: barra fija sobre las pestañas inferiores */
  .lb-me {
    position: sticky; bottom: 4px; z-index: 5; margin-top: 14px;
    display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 16px;
    background: linear-gradient(165deg, rgba(20, 50, 34, .92), rgba(8, 18, 30, .94));
    border: 1.5px solid rgba(74, 222, 128, .6);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55), 0 0 18px -6px rgba(74, 222, 128, .6);
  }
  .lb-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .lb-me-text b { font-size: 13.5px; color: #fff; }
  .lb-me-text small { font-size: 11px; color: #bbf7d0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-go {
    flex: none; padding: 8px 12px; border-radius: 99px; border: 0; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 800; color: #052e16; background: linear-gradient(180deg, #86efac, #22c55e);
  }
  @media (min-width: 520px) {
    .lb-stat small { display: inline; color: #94a3b8; }
  }
  @media (max-width: 360px) {
    .lb-row { grid-template-columns: 28px 36px minmax(0, 1fr) auto; gap: 7px; }
    .lb-ava { width: 36px; height: 36px; font-size: 16px; }
    .lb-mmr b { font-size: 17px; }
    .lb-pod .lb-stats { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .lb-pod.p1 .lb-medal, .lb-row.flash { animation: none !important; } }
  /* Buscador del ranking */
  .lb-search {
    position: relative; display: flex; align-items: center; margin: 0 0 6px;
    border-radius: 99px; border: 1.5px solid transparent;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) padding-box,
      linear-gradient(#0c1527, #0c1527) padding-box,
      linear-gradient(120deg, rgba(240, 193, 74, .7), rgba(240, 193, 74, .15) 50%, rgba(240, 193, 74, .5)) border-box;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: box-shadow .2s ease;
  }
  .lb-search:focus-within { box-shadow: 0 8px 18px rgba(0, 0, 0, .35), 0 0 0 3px rgba(240, 193, 74, .2), 0 0 18px -4px rgba(240, 193, 74, .6); }
  .lb-search-ico { position: absolute; left: 15px; color: var(--brass); pointer-events: none; }
  .lb-search input {
    flex: 1; min-width: 0; padding: 12px 44px 12px 42px; border: 0; outline: none; background: transparent;
    font: inherit; font-size: 15px; color: #fff;
  }
  .lb-search input::placeholder { color: #64748b; }
  .lb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .lb-search-clear {
    position: absolute; right: 7px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #2a1c08;
    background: linear-gradient(180deg, #f6d27a, #e2a83a);
  }
  .lb-search-clear[hidden], .lb-search-info[hidden], .lb-podium[hidden], .lb-cols[hidden] { display: none; }
  .lb-search-info { margin: 8px 4px 10px; font-size: 12.5px; font-weight: 700; color: var(--brass); }
  .lb-search-info.empty {
    display: flex; flex-direction: column; gap: 4px; margin: 14px 0; padding: 18px 16px; border-radius: 16px; text-align: center;
    color: #e2e8f0; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(240, 193, 74, .35);
  }
  .lb-search-info.empty small { font-size: 12px; font-weight: 500; color: #94a3b8; }
  .lb-name mark { color: #1c1405; background: linear-gradient(180deg, #fde68a, #f0c14a); border-radius: 4px; padding: 0 1px; }
  /* Buscando, el podio se oculta: los puestos 1–3 se ven como filas con su medalla */
  .lb-list.searching .lb-row[data-place="1"] .lb-place { color: #f0c14a; }
  .lb-list.searching .lb-row[data-place="2"] .lb-place { color: #e2e8f0; }
  .lb-list.searching .lb-row[data-place="3"] .lb-place { color: #e0a370; }
  /* ¿Cómo funciona el Ranking? */
  #posiciones .screen-header-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .lb-info-btn { margin-bottom: 0; flex: none; }
  .lbi-box { max-width: 400px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
  .lbi-body { display: flex; flex-direction: column; gap: 10px; }
  .lbi-sec {
    width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  }
  .lbi-box > .lbi-sec { margin: 10px 0 12px; }
  .lbi-sec h3 { margin: 0 0 6px !important; font-family: Fraunces, serif; font-size: 15px; font-weight: 640; color: var(--brass); }
  .lbi-sec ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
  .lbi-sec p { margin: 0; }
  .lbi-sec.lbi-hl {
    background: linear-gradient(160deg, rgba(240, 193, 74, .12), rgba(240, 193, 74, .03));
    border-color: rgba(240, 193, 74, .4); box-shadow: inset 0 1px 0 rgba(255, 244, 214, .08);
  }
  .lbi-table { margin-top: 2px; }
  .lbi-table th:first-child, .lbi-table td:first-child { width: 62%; padding-left: 0; }
  .lbi-table th:last-child, .lbi-table td:last-child { padding-right: 0; }
  .lbi-table td.up, .lbi-table td.down { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lbi-table th:not(:first-child) { text-align: right; }
  .lbi-table td.up { color: #86efac; }
  .lbi-table td.down { color: #fca5a5; }
  .lbi-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
  .lbi-rank {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; font-size: 12.5px;
    background: color-mix(in srgb, var(--rk) 9%, rgba(0, 0, 0, .25)); border: 1px solid color-mix(in srgb, var(--rk) 35%, transparent);
  }
  .lbi-rank i { font-style: normal; font-size: 17px; }
  .lbi-rn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .lbi-rank b { color: var(--rk); font-weight: 800; line-height: 1.2; }
  .lbi-range { flex: none; font-size: 11.5px; font-weight: 700; color: #cbd5e1; font-variant-numeric: tabular-nums; }
  .lbi-rank em { font-style: normal; font-size: 9.5px; font-weight: 900; padding: 1px 7px; border-radius: 99px; color: #052e16; background: #4ade80; }
  .lbi-rank.mine { border-color: #4ade80; box-shadow: 0 0 0 1px rgba(74, 222, 128, .4), 0 0 14px -4px #4ade80; }
  @media (max-width: 360px) { .lb-info-btn [data-i18n] { font-size: 11px; } }

  /* ════════════════════════════════════════════════════════════════════
     TOP 5 METÁLICO · título de rango y MMR con acabado de metal
     ════════════════════════════════════════════════════════════════════ */
  .metal-1 {   /* Oro puro con destellos */
    --metal: linear-gradient(100deg, #8a5a10 0%, #f0c14a 14%, #fff6cf 24%, #fde68a 32%, #e2a83a 46%, #fff8dc 56%, #f0c14a 66%, #a86a12 82%, #fde68a 100%);
    --metal-glow: rgba(240, 193, 74, .55);
  }
  .metal-2 {   /* Platino épico */
    --metal: linear-gradient(100deg, #6b7280 0%, #e5e7eb 14%, #ffffff 24%, #cbd5e1 36%, #94a3b8 48%, #f8fafc 58%, #e2e8f0 70%, #64748b 86%, #e5e7eb 100%);
    --metal-glow: rgba(226, 232, 240, .45);
  }
  .metal-3 {   /* Bronce de élite, cobrizo profundo */
    --metal: linear-gradient(100deg, #5a2e0e 0%, #b0652a 16%, #f3c39b 28%, #d08b4f 40%, #8a4a1c 54%, #e9b07c 66%, #a85a24 80%, #6b3410 100%);
    --metal-glow: rgba(208, 139, 79, .45);
  }
  .metal-4 {   /* Cobre sutil */
    --metal: linear-gradient(100deg, #7c3a1d 0%, #c7764b 30%, #e6a57e 48%, #b06038 70%, #7c3a1d 100%);
    --metal-glow: rgba(199, 118, 75, .3);
  }
  .metal-5 {   /* Plata oscura sutil */
    --metal: linear-gradient(100deg, #4b5563 0%, #9ca3af 30%, #d1d5db 48%, #6b7280 70%, #4b5563 100%);
    --metal-glow: rgba(156, 163, 175, .28);
  }
  .metal .lb-title-txt, .metal .lb-mmr b, .metal .lb-pod-mmr b {
    background: var(--metal); background-size: 220% 100%; background-position: 0% 50%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px var(--metal-glow)) drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
  }
  .metal .lb-title-txt { font-weight: 900; letter-spacing: .01em; }
  .metal .lb-mmr b, .metal .lb-pod-mmr b { font-weight: 800; }
  /* Oro, platino y bronce: el brillo recorre las letras */
  .metal-1 .lb-title-txt, .metal-1 .lb-mmr b, .metal-1 .lb-pod-mmr b { animation: metalSheen 3.2s ease-in-out infinite; }
  .metal-2 .lb-title-txt, .metal-2 .lb-mmr b, .metal-2 .lb-pod-mmr b { animation: metalSheen 4s ease-in-out infinite; }
  .metal-3 .lb-title-txt, .metal-3 .lb-mmr b, .metal-3 .lb-pod-mmr b { animation: metalSheen 4.8s ease-in-out infinite; }
  @keyframes metalSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  /* Destello de luz del #1 */
  .lb-pod.metal-1 .lb-pod-mmr, .lb-row.metal-1 .lb-mmr { position: relative; }
  .lb-pod.metal-1 .lb-pod-mmr::after, .lb-row.metal-1 .lb-mmr::after {
    content: "✦"; position: absolute; top: -6px; right: -8px; font-size: 11px; color: #fff8dc;
    text-shadow: 0 0 6px #f0c14a, 0 0 12px #f0c14a; animation: metalSpark 2.4s ease-in-out infinite; pointer-events: none;
  }
  @keyframes metalSpark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45%, 55% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
  /* Filas #4 y #5 (y #1–#3 al buscar): borde del mismo metal */
  .lb-row.metal {
    background:
      linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%, rgba(6, 12, 22, .55)) padding-box,
      linear-gradient(#0f1a2c, #0b1322) padding-box,
      var(--metal) border-box;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .32), 0 0 16px -6px var(--metal-glow), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .lb-row.metal .lb-place { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  .lb-row.metal.me { box-shadow: 0 6px 14px rgba(0, 0, 0, .32), 0 0 0 2px #4ade80; }
  @media (prefers-reduced-motion: reduce) {
    .metal .lb-title-txt, .metal .lb-mmr b, .metal .lb-pod-mmr b, .lb-pod.metal-1 .lb-pod-mmr::after, .lb-row.metal-1 .lb-mmr::after { animation: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════════
     NOMBRES DE USUARIO ÚNICOS · estado en vivo bajo el campo
     ════════════════════════════════════════════════════════════════════ */
  .rename-input {
    width: 100%; box-sizing: border-box; margin-bottom: 4px; padding: 12px 14px; border-radius: 14px; outline: none;
    font: inherit; font-size: 17px; font-weight: 700; text-align: center; color: #fff; background: #0c1527;
    border: 1.5px solid #00e5ff; box-shadow: 0 0 12px rgba(0, 229, 255, .25);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .rename-input.name-ok, #signup-nick.name-ok { border-color: #4ade80 !important; box-shadow: 0 0 0 3px rgba(74, 222, 128, .16) !important; }
  .rename-input.name-taken, #signup-nick.name-taken { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2) !important; animation: nameShake .35s ease; }
  @keyframes nameShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
  .name-status { min-height: 18px; margin: 4px 2px 0; font-size: 12px; line-height: 1.35; color: #94a3b8; text-align: left; }
  .rename-status { width: 100%; margin-bottom: 4px; text-align: center; }
  .name-status.checking { color: #94a3b8; }
  .name-status.checking::before {
    content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 50%;
    border: 2px solid rgba(240, 193, 74, .3); border-top-color: var(--brass); animation: nameSpin .7s linear infinite;
  }
  @keyframes nameSpin { to { transform: rotate(360deg); } }
  .name-status.ok { color: #86efac; font-weight: 700; }
  .name-status.same { color: #94a3b8; }
  .name-status.err { color: #fca5a5; }
  /* Alerta clara cuando el nombre ya existe */
  .name-status.taken, .auth-error.name-alert {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 12px;
    font-weight: 700; color: #fecaca; background: rgba(239, 68, 68, .12); border: 1px solid rgba(248, 113, 113, .55);
  }
  .name-status.taken::before, .auth-error.name-alert::before { content: "⛔"; flex: none; }
  .name-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 2px 2px; }
  .name-suggest[hidden] { display: none; }
  .rename-suggest { width: 100%; justify-content: center; margin-bottom: 8px; }
  .name-suggest span { font-size: 11.5px; color: #94a3b8; }
  .name-suggest button {
    padding: 4px 10px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
    color: #f1e3bf; background: rgba(240, 193, 74, .1); border: 1px solid rgba(240, 193, 74, .45);
  }
  .name-suggest button:hover { background: rgba(240, 193, 74, .2); }
  #modal-cambiar-nombre .end-box > div:last-child { margin-top: 10px; }
  @media (prefers-reduced-motion: reduce) { .name-taken { animation: none !important; } .name-status.checking::before { animation: none; } }

  /* ════════════════════════════════════════════════════════════════════
     LONGANA CUBANA · selector de 3 modalidades, poza y robo
     ════════════════════════════════════════════════════════════════════ */
  .cm-style { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cm-style button { padding: 22px 8px 10px; min-width: 0; }
  .cm-style button b { font-size: 12.5px; line-height: 1.2; }
  .cm-style button small { font-size: 10px; }
  .cm-style .st-num {
    position: absolute; top: 7px; left: 8px; width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #2a1c08; background: rgba(240, 193, 74, .85);
  }
  .cm-style .st-cross { font-size: 24px; font-weight: 900; color: #f0c14a; text-shadow: 0 0 10px rgba(240, 193, 74, .6); }
  .cm-style button.on .st-cross { color: inherit; text-shadow: none; }
  .cm-style .st-new {
    position: absolute; top: 7px; left: 30px; padding: 1px 6px; border-radius: 99px; font-style: normal;
    font-size: 8.5px; font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(90deg, #ef4444, #f97316);
  }
  @media (max-width: 360px) { .cm-style { grid-template-columns: 1fr; } }
  /* Mesas públicas: etiqueta de Longana */
  .pt-style.longana { background: linear-gradient(90deg, rgba(16, 185, 129, .22), rgba(240, 193, 74, .12)); border-color: rgba(52, 211, 153, .45); }
  /* Poza de fichas (solo Longana) */
  .pool-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; white-space: nowrap;
    font-size: 11.5px; font-weight: 700; color: #f1e3bf; background: rgba(240, 193, 74, .1); border: 1px solid rgba(240, 193, 74, .45);
  }
  .pool-chip[hidden] { display: none; }
  .pool-chip i { font-style: normal; font-size: 14px; line-height: 1; }
  .pool-chip b { color: #fde68a; font-variant-numeric: tabular-nums; }
  .pool-chip.empty { opacity: .55; }
  /* Sin jugada en Longana: el botón roba de la poza */
  .pass-btn.draw { background: linear-gradient(180deg, #34d399, #059669) !important; color: #022c22 !important; border-color: transparent !important; }

  /* ════════════════════════════════════════════════════════════════════
     PLAY PRO · insignia de alta visibilidad en "Jugar en línea"
     ════════════════════════════════════════════════════════════════════ */
  .hero { position: relative; isolation: isolate; }
  /* Fila de acción bajo el texto de la tarjeta: disco ▶ + etiqueta, sin tocar las fichas */
  .play-pro {
    position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 5px 14px 5px 5px;
    border-radius: 99px; pointer-events: none;
    background: linear-gradient(90deg, rgba(240, 193, 74, .18), rgba(8, 18, 34, .55));
    border: 1px solid rgba(240, 193, 74, .65);
    box-shadow: 0 0 16px -4px rgba(240, 193, 74, .7), inset 0 1px 0 rgba(255, 244, 214, .15);
  }
  .play-pro .pp-disc { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
  /* Halo de neón que late */
  .pp-halo {
    position: absolute; inset: -7px; border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 193, 74, .55) 0%, rgba(56, 189, 248, .25) 45%, transparent 70%);
    filter: blur(5px); animation: ppPulse 2.2s ease-in-out infinite;
    background: radial-gradient(circle, rgba(255, 220, 120, .85) 0%, rgba(240, 193, 74, .45) 40%, rgba(56, 189, 248, .3) 58%, transparent 72%);
  }
  /* Anillo dorado con destello que gira */
  .pp-ring {
    position: absolute; inset: 0; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 0deg, #fff6cf, #f0c14a 18%, #8a5a10 32%, #f0c14a 48%, #fff8dc 58%, #38bdf8 66%, #f0c14a 76%, #a86a12 90%, #fff6cf);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    animation: ppSpin 4s linear infinite;
    filter: drop-shadow(0 0 6px rgba(240, 193, 74, .8));
  }
  /* Núcleo de cristal esmerilado con el triángulo en relieve */
  .pp-core {
    position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background:
      radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .7), rgba(255, 248, 220, .15) 36%, transparent 58%),
      radial-gradient(circle at 50% 120%, rgba(56, 189, 248, .55), transparent 60%),
      linear-gradient(160deg, rgba(240, 193, 74, .5), rgba(120, 72, 10, .55) 48%, rgba(8, 18, 34, .88));
    border: 1px solid rgba(255, 243, 196, .7);
    -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .55), 0 0 22px rgba(240, 193, 74, .45);
  }
  .pp-core svg { width: 24px; height: 24px; margin-left: 3px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(240, 193, 74, .75)); }
  .pp-label { white-space: nowrap; font-size: 13px; font-weight: 900; letter-spacing: .16em; color: #fff; }
  .pp-label b { color: #f6d27a; font-weight: 900; text-shadow: 0 0 8px rgba(240, 193, 74, .8); }
  @keyframes ppSpin { to { transform: rotate(360deg); } }
  @keyframes ppPulse { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
  .hero:hover .pp-core, .hero:focus-visible .pp-core { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .55), 0 0 30px rgba(240, 193, 74, .75); }
  .hero:active .play-pro { transform: scale(.96); }
  @media (prefers-reduced-motion: reduce) { .pp-ring, .pp-halo { animation: none !important; } }

  /* ════════════════════════════════════════════════════════════════════
     LA CHAMPIONS DEL DOMINÓ · estética de torneo mundial
     ════════════════════════════════════════════════════════════════════ */
  /* Pestaña inferior con copa dorada */
  .tabs .tab-champions .champ-tab-ico { filter: drop-shadow(0 0 4px rgba(240, 193, 74, .55)); }
  .tabs .tab-champions.on .champ-tab-ico { filter: drop-shadow(0 0 8px rgba(240, 193, 74, .95)); transform: translateY(-1px) scale(1.08); }
  .tabs .tab-champions span { color: #f6d27a; font-weight: 800; }
  /* Estadio */
  .champ-stadium {
    position: relative; isolation: isolate; overflow: hidden; margin: 2px 0 16px; padding: 46px 16px 18px; border-radius: 24px; text-align: center;
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(255, 236, 170, .28), transparent 70%),
      radial-gradient(120% 60% at 50% 115%, rgba(16, 120, 60, .55), transparent 60%),
      linear-gradient(180deg, #0d1f3c 0%, #081428 55%, #06210f 100%);
    border: 1.5px solid rgba(240, 193, 74, .6);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 244, 214, .12), 0 0 30px -10px rgba(240, 193, 74, .6);
  }
  /* Focos del estadio */
  .champ-lights {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      conic-gradient(from 160deg at 8% -8%, transparent 0 8deg, rgba(255, 248, 220, .16) 12deg, transparent 22deg),
      conic-gradient(from 178deg at 92% -8%, transparent 0 8deg, rgba(255, 248, 220, .16) 12deg, transparent 22deg),
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, .9) 0 3px, transparent 4px),
      radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .9) 0 3px, transparent 4px),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 18px);
    animation: champLights 6s ease-in-out infinite alternate;
  }
  @keyframes champLights { from { opacity: .7; } to { opacity: 1; } }
  /* Estandartes dorados */
  .champ-banners { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; pointer-events: none; }
  .champ-banners i {
    width: 22px; height: 38px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    background: linear-gradient(180deg, #fff6cf, #f0c14a 40%, #a86a12); box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    transform-origin: top center; animation: champFlag 3.6s ease-in-out infinite;
  }
  .champ-banners i:nth-child(even) { height: 30px; background: linear-gradient(180deg, #1e3a8a, #0b1d4a); animation-delay: -1.2s; }
  .champ-banners i:nth-child(3) { width: 26px; height: 44px; }
  @keyframes champFlag { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
  .champ-kicker { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; color: #1c1405; background: linear-gradient(90deg, #fde68a, #f0c14a); }
  .champ-cup { position: relative; width: 104px; height: 104px; margin: 10px auto 2px; }
  .champ-cup svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 16px rgba(240, 193, 74, .6)); animation: champCup 4s ease-in-out infinite; }
  .champ-cup-glow { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 120, .55), transparent 65%); animation: ppPulse 2.6s ease-in-out infinite; }
  @keyframes champCup { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .champ-title {
    margin: 6px 0 2px; font-family: Fraunces, serif; font-size: 28px; font-weight: 700; line-height: 1.1;
    background: linear-gradient(100deg, #a86a12, #fde68a 30%, #fff8dc 45%, #f0c14a 60%, #a86a12); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: metalSheen 4s ease-in-out infinite;
  }
  .champ-sub { margin: 0 0 12px; font-size: 13px; color: #cbd5e1; }
  /* Reloj del Sábado de Champions */
  .champ-clock { display: inline-flex; align-items: flex-start; gap: 4px; padding: 8px 12px; border-radius: 16px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(240, 193, 74, .5); box-shadow: inset 0 0 18px rgba(240, 193, 74, .12); }
  .champ-clock > i { font-style: normal; font-size: 22px; font-weight: 800; color: #f0c14a; line-height: 1.25; }
  .cc-unit { display: flex; flex-direction: column; align-items: center; min-width: 46px; }
  .cc-unit b { font-family: Fraunces, serif; font-size: 28px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(240, 193, 74, .55); }
  .cc-unit small { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }
  .champ-clock.live { border-color: #ef4444; box-shadow: 0 0 18px rgba(239, 68, 68, .5); }
  .champ-when { margin: 8px 0 12px; font-size: 12.5px; font-weight: 700; color: #f6d27a; }
  .champ-cta { display: flex; flex-direction: column; gap: 8px; }
  .champ-register {
    width: 100%; padding: 13px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 900; color: #2a1c08;
    background: linear-gradient(135deg, #fde68a, #f0c14a 45%, #d49c25); box-shadow: 0 6px 16px rgba(240, 193, 74, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  .champ-register.done { color: #052e16; background: linear-gradient(135deg, #86efac, #22c55e); box-shadow: 0 6px 16px rgba(34, 197, 94, .35); }
  .champ-demo {
    width: 100%; padding: 10px; border-radius: 14px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: #bae6fd;
    background: rgba(56, 189, 248, .08); border: 1px dashed rgba(125, 211, 252, .55);
  }
  /* Secciones */
  .champ-section { margin: 0 0 16px; }
  .champ-section[hidden], .champ-final[hidden] { display: none; }
  .champ-h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: Fraunces, serif; font-size: 18px; font-weight: 640; color: var(--brass); }
  .champ-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: gcPulse 1.6s ease-out infinite; }
  .champ-round-sub { margin: -4px 0 8px; font-size: 12px; color: #94a3b8; }
  /* Cartelera de premios */
  .champ-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cp-card {
    --m: #f0c14a; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; text-align: center;
    background: linear-gradient(170deg, rgba(255, 255, 255, .1), rgba(6, 12, 22, .6)) padding-box, linear-gradient(140deg, var(--m), rgba(255, 255, 255, .06) 50%, var(--m)) border-box;
    border: 1.5px solid transparent; box-shadow: 0 8px 16px rgba(0, 0, 0, .35), 0 0 16px -8px var(--m);
  }
  .cp-card.t-silver { --m: #e2e8f0; } .cp-card.t-bronze { --m: #d08b4f; } .cp-card.t-star { --m: #7dd3fc; }
  .cp-ico { font-size: 26px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
  .cp-pos { font-size: 12px; color: #fff; }
  .cp-dia { font-family: Fraunces, serif; font-size: 18px; font-weight: 700; color: #7dd3fc; font-variant-numeric: tabular-nums; }
  .cp-card small { font-size: 9.5px; color: #94a3b8; }
  /* Rondas y partidos */
  .champ-rounds { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .champ-rounds::-webkit-scrollbar { height: 0; }
  .champ-rounds button { flex: none; padding: 6px 11px; border-radius: 99px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ivory); background: rgba(255, 255, 255, .05); border: 1px solid rgba(240, 193, 74, .3); }
  .champ-rounds button.on { color: #2a1c08; background: linear-gradient(180deg, #f6d27a, #e2a83a); border-color: transparent; }
  .champ-rounds button.locked { opacity: .4; cursor: default; }
  .champ-matches { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
  .cm-match {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 7px 8px; border-radius: 14px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  }
  .cm-match.mine { border-color: #4ade80; box-shadow: 0 0 12px -4px #4ade80; }
  .cm-match.live { border-color: rgba(240, 193, 74, .4); }
  .cm-vs { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 900; letter-spacing: .1em; color: #94a3b8; text-transform: uppercase; }
  .cm-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(240, 193, 74, .3); border-top-color: #f0c14a; animation: nameSpin .8s linear infinite; }
  .cm-p { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; min-width: 0; }
  .cm-match .cm-p:last-child { direction: rtl; text-align: right; }
  .cm-match .cm-p:last-child > * { direction: ltr; }
  .cm-ava { grid-row: span 2; width: 26px; height: 26px; font-size: 12px; }
  .cm-p b { font-size: 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-p small, .cm-wc { font-size: 9.5px; color: #94a3b8; font-style: normal; }
  .cm-wc { color: #052e16; background: #4ade80; padding: 0 5px; border-radius: 99px; font-weight: 800; justify-self: start; }
  .cm-mmr { grid-row: 1 / span 2; grid-column: 3; font-size: 11px; font-weight: 800; color: var(--brass); font-variant-numeric: tabular-nums; }
  .cm-p.lose { opacity: .42; }
  .cm-p.lose b { text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, .7); }
  .cm-p.win b { color: #86efac; }
  .cm-check { display: none; }
  .cm-p.me b { color: #4ade80; }
  /* Gran Final */
  .champ-final {
    position: relative; margin: 0 0 16px; padding: 16px 14px; border-radius: 22px; text-align: center;
    background: radial-gradient(100% 70% at 50% 0%, rgba(240, 193, 74, .25), transparent 70%), linear-gradient(170deg, #1a1405, #0a0f1c);
    border: 2px solid #f0c14a; box-shadow: 0 0 30px -6px rgba(240, 193, 74, .7), 0 16px 30px rgba(0, 0, 0, .5);
  }
  .cf-title { display: block; font-family: Fraunces, serif; font-size: 22px; font-weight: 700; color: #fde68a; text-shadow: 0 0 14px rgba(240, 193, 74, .6); }
  .cf-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 12px 0 8px; }
  .cf-duel .cm-p { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; direction: ltr !important; }
  .cf-duel .cm-ava { grid-row: auto; width: 54px; height: 54px; font-size: 24px; box-shadow: 0 0 0 2px #f0c14a, 0 6px 12px rgba(0, 0, 0, .5); }
  .cf-duel .cm-mmr { grid-row: auto; grid-column: auto; }
  .cf-duel .cm-p b { font-size: 13px; max-width: 100%; }
  .cf-vs { font-family: Fraunces, serif; font-size: 26px; font-weight: 800; color: #f0c14a; text-shadow: 0 0 14px rgba(240, 193, 74, .7); }
  .cf-sub { margin: 0 0 10px; font-size: 12px; color: #cbd5e1; }
  .cf-btn { width: 100%; padding: 13px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 900; color: #2a1c08; background: linear-gradient(135deg, #fde68a, #f0c14a 45%, #d49c25); box-shadow: 0 6px 18px rgba(240, 193, 74, .45); animation: ppPulse 2.4s ease-in-out infinite; }
  .cf-skip { margin-top: 8px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: #94a3b8; text-decoration: underline; }
  .cf-auto { display: block; margin-top: 4px; font-size: 11px; color: #64748b; }
  .cf-champ { margin: 4px 0 10px; font-family: Fraunces, serif; font-size: 18px; font-weight: 700; color: #fde68a; }
  .champ-final.decided .cm-p.win .cm-ava { box-shadow: 0 0 0 3px #f0c14a, 0 0 22px rgba(240, 193, 74, .9); }
  /* Clasificación */
  .champ-standings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 460px; overflow-y: auto; }
  .cs-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
  .cs-row .cm-p { grid-row: span 2; }
  .cs-pos { grid-row: span 2; font-family: Fraunces, serif; font-size: 16px; font-weight: 700; color: #e2e8f0; text-align: center; }
  .cs-status { font-size: 10.5px; font-weight: 700; color: #94a3b8; text-align: right; }
  .cs-prize { font-size: 11px; font-weight: 800; color: #7dd3fc; text-align: right; white-space: nowrap; }
  .cs-row.alive .cs-status { color: #86efac; }
  .cs-row.top10 { border-color: rgba(240, 193, 74, .45); background: linear-gradient(90deg, rgba(240, 193, 74, .1), rgba(255, 255, 255, .02)); }
  .cs-row.top10 .cs-pos { color: var(--brass); }
  .cs-row.me { border-color: #4ade80; box-shadow: 0 0 12px -4px #4ade80; }
  .champ-rules { margin: 0; padding: 12px 14px 12px 30px; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.45; color: #cbd5e1; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
  /* Vitrina de trofeos (Perfil) */
  .trophy-card { border-color: rgba(240, 193, 74, .4); }
  .trophy-case { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .trophy-item {
    --m: #f0c14a; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; text-align: center;
    background: linear-gradient(170deg, rgba(255, 255, 255, .1), rgba(6, 12, 22, .6)) padding-box, linear-gradient(140deg, var(--m), rgba(255, 255, 255, .06) 50%, var(--m)) border-box;
    border: 1.5px solid transparent; box-shadow: 0 0 14px -6px var(--m);
  }
  .trophy-item.t-silver { --m: #e2e8f0; } .trophy-item.t-bronze { --m: #d08b4f; } .trophy-item.t-star { --m: #7dd3fc; }
  .ti-ico { font-size: 30px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px var(--m)); }
  .trophy-item b { font-size: 11.5px; color: #fff; }
  .trophy-item small { font-size: 10px; color: #94a3b8; }
  .ti-dia { font-size: 11px; font-weight: 800; color: #7dd3fc; }
  .trophy-empty { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: #94a3b8; }
  @media (prefers-reduced-motion: reduce) { .champ-lights, .champ-banners i, .champ-cup svg, .champ-cup-glow, .champ-title, .cf-btn { animation: none !important; } }
  /* Horario fijo: fases del sábado */
  .champ-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; padding: 0; }
  .champ-steps li {
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px;
    background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); color: #94a3b8; opacity: .7;
  }
  .champ-steps li b { font-size: 13px; color: #e2e8f0; font-variant-numeric: tabular-nums; }
  .champ-steps li span { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
  .champ-steps li.on { opacity: 1; color: #1c1405; background: linear-gradient(180deg, #fde68a, #f0c14a); border-color: transparent; box-shadow: 0 0 14px rgba(240, 193, 74, .55); }
  .champ-steps li.on b { color: #1c1405; }
  .champ-steps li[data-step="live"].on { color: #fff; background: linear-gradient(180deg, #ef4444, #b91c1c); box-shadow: 0 0 14px rgba(239, 68, 68, .55); }
  .champ-steps li[data-step="live"].on b { color: #fff; }
  .champ-clock-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: #f6d27a; }
  .champ-clock.reg { border-color: #4ade80; box-shadow: 0 0 18px rgba(74, 222, 128, .4); }
  .champ-register:disabled { cursor: default; }
  .champ-register.closed { color: #cbd5e1; background: rgba(255, 255, 255, .06); box-shadow: none; border: 1px solid rgba(255, 255, 255, .14); font-weight: 700; font-size: 13px; }
  /* Competidores inscritos */
  .ce-count { margin-left: auto; padding: 1px 9px; border-radius: 99px; font-family: inherit; font-size: 13px; color: #052e16; background: #4ade80; font-variant-numeric: tabular-nums; }
  .ce-note { margin: -2px 0 8px; font-size: 12px; color: #94a3b8; }
  .ce-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(240, 193, 74, .3) transparent; }
  .ce-list:empty { display: none; }
  .ce-chip {
    flex: none; display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center;
    padding: 5px 10px 5px 6px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(240, 193, 74, .3);
  }
  .ce-chip.me { border-color: #4ade80; background: rgba(74, 222, 128, .1); }
  .ce-ava { grid-row: span 2; width: 26px; height: 26px; font-size: 12px; }
  .ce-chip b { font-size: 11.5px; color: #fff; white-space: nowrap; }
  .ce-chip small { font-size: 9.5px; color: #94a3b8; white-space: nowrap; }
  /* Mirar un partido en juego */
  .cm-watch {
    padding: 4px 8px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 800; white-space: nowrap;
    color: #2a1c08; background: linear-gradient(180deg, #fde68a, #f0c14a); border: 0; box-shadow: 0 2px 8px rgba(240, 193, 74, .4);
  }

  /* ════════════════════════════════════════════════════════════════════
     AMIGOS · interfaz de élite: pestañas, LED de estado y tarjetas de cristal
     ════════════════════════════════════════════════════════════════════ */
  /* LED de neón: verde en línea · amarillo en partida · rojo desconectado */
  .led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; font-style: normal; }
  .led.on   { background: #22e57a; box-shadow: 0 0 0 2px rgba(34, 229, 122, .25), 0 0 10px #22e57a, 0 0 18px rgba(34, 229, 122, .6); animation: ledPulse 1.8s ease-in-out infinite; }
  .led.game { background: #facc15; box-shadow: 0 0 0 2px rgba(250, 204, 21, .25), 0 0 10px #facc15, 0 0 18px rgba(250, 204, 21, .55); }
  .led.off  { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .22), 0 0 8px rgba(239, 68, 68, .8); opacity: .85; }
  @keyframes ledPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
  .social-stats .ss-chip { display: inline-flex; align-items: center; gap: 6px; }
  .social-stats .ss-chip.off { color: #fecaca; }
  .friend-filters button { display: inline-flex; align-items: center; gap: 6px; }
  /* Pestañas */
  .fr-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 0 14px; padding: 4px; border-radius: 16px;
    background: rgba(0, 0, 0, .35); border: 1px solid rgba(240, 193, 74, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .fr-tabs button {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 9px 4px; border-radius: 12px;
    font: inherit; font-size: 12px; font-weight: 800; color: #cbd5e1; background: transparent; border: 0; cursor: pointer;
  }
  .fr-tabs button > span:not([aria-hidden]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-tabs button.on { color: #2a1c08; background: linear-gradient(180deg, #f6d27a, #e2a83a); box-shadow: 0 4px 12px rgba(240, 193, 74, .35); }
  .fr-count { padding: 0 6px; border-radius: 99px; font-size: 10.5px; color: #e2e8f0; background: rgba(255, 255, 255, .12); }
  .fr-tabs button.on .fr-count { color: #2a1c08; background: rgba(42, 28, 8, .18); }
  .fr-count.alert { color: #fff; background: #ef4444; }
  .fr-count[hidden] { display: none; }
  .fr-pane[hidden] { display: none; }
  .fr-list { display: flex; flex-direction: column; gap: 8px; }
  .fr-sent-label { margin-top: 16px; }
  /* Tarjeta de cristal esmerilado con filo dorado sutil */
  .fr-card {
    display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 18px; cursor: pointer;
    border: 1px solid transparent;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 50%, rgba(6, 12, 22, .55)) padding-box,
      linear-gradient(#0f1a2c, #0b1322) padding-box,
      linear-gradient(120deg, rgba(240, 193, 74, .6), rgba(240, 193, 74, .08) 40%, rgba(240, 193, 74, .08) 70%, rgba(240, 193, 74, .4)) border-box;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: transform .12s ease, box-shadow .2s ease;
  }
  .fr-card:active { transform: scale(.985); }
  .fr-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  .fr-card.st-offline .fr-ava { filter: grayscale(.55) brightness(.8); }
  .fr-card.req, .fr-card.exact, .fr-card.self { cursor: default; }
  .fr-card.exact { background:
      linear-gradient(165deg, rgba(240, 193, 74, .12), rgba(255, 255, 255, .02) 50%, rgba(6, 12, 22, .55)) padding-box,
      linear-gradient(#0f1a2c, #0b1322) padding-box,
      linear-gradient(120deg, #f6d27a, rgba(240, 193, 74, .25) 45%, #f0c14a) border-box; }
  /* Avatar 3D destacado */
  .fr-ava-wrap { position: relative; width: 58px; height: 58px; }
  .fr-ava { width: 58px; height: 58px; font-size: 26px; box-shadow: 0 8px 16px rgba(0, 0, 0, .5), 0 0 0 2px rgba(240, 193, 74, .35); }
  .fr-ava-wrap .led { position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px; border: 2px solid #0b1322; z-index: 2; }
  .fr-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .fr-name { font-size: 15px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fr-rank { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 11px; font-weight: 800; color: var(--rk, #f0c14a); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .fr-rank i { font-style: normal; font-size: 12px; }
  .fr-meta { font-size: 11px; color: #94a3b8; }
  .fr-meta b { color: var(--brass); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .fr-state.online { color: #86efac; } .fr-state.ingame { color: #fde68a; } .fr-state.offline { color: #fca5a5; }
  /* Acciones minimalistas */
  .fr-acts { display: flex; align-items: center; gap: 5px; }
  @media (max-width: 440px) { .fr-tabs button > span[aria-hidden] { display: none; } .fr-card { gap: 10px; } }
  .fr-act {
    width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; cursor: pointer; font-size: 14px;
    color: #f1e3bf; background: rgba(255, 255, 255, .05); border: 1px solid rgba(240, 193, 74, .35);
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .fr-act:not(:disabled):hover { background: rgba(240, 193, 74, .16); border-color: rgba(240, 193, 74, .7); }
  .fr-act:not(:disabled):active { transform: scale(.9); }
  .fr-act:disabled { opacity: .28; cursor: default; filter: grayscale(1); }
  .fr-act.join:not(:disabled) { border-color: rgba(250, 204, 21, .7); box-shadow: 0 0 10px -2px rgba(250, 204, 21, .6); }
  .fr-act.duel:not(:disabled) { border-color: rgba(34, 229, 122, .6); box-shadow: 0 0 10px -2px rgba(34, 229, 122, .5); }
  .fr-act.del { border-color: rgba(248, 113, 113, .35); }
  .fr-act.del.confirm { width: auto; padding: 0 10px; font: inherit; font-size: 11.5px; font-weight: 800; color: #fff; background: #dc2626; border-color: transparent; }
  .fr-act.ok { color: #052e16; background: linear-gradient(180deg, #86efac, #22c55e); border-color: transparent; }
  .fr-act.no { color: #fecaca; border-color: rgba(248, 113, 113, .45); }
  .fr-wait { font-size: 10.5px; color: #94a3b8; }
  /* Buscar amigos */
  .fr-search-box { margin-bottom: 6px; }
  .fr-search-box input { flex: 1; min-width: 0; }
  .fr-search-info { margin: 0 4px 10px; font-size: 12px; font-weight: 600; color: #94a3b8; }
  .fr-search-info.none { padding: 14px; border-radius: 14px; text-align: center; color: #fecaca; background: rgba(239, 68, 68, .08); border: 1px dashed rgba(248, 113, 113, .45); }
  .fr-add {
    padding: 8px 12px; border-radius: 99px; border: 0; cursor: pointer; white-space: nowrap; font: inherit; font-size: 12px; font-weight: 800;
    color: #2a1c08; background: linear-gradient(180deg, #fde68a, #f0c14a); box-shadow: 0 4px 10px rgba(240, 193, 74, .35);
  }
  .fr-tag { font-size: 11px; font-weight: 800; color: #94a3b8; white-space: nowrap; }
  .fr-tag.ok { color: #86efac; }
  /* Coincidencia exacta del nombre de usuario único: sello dorado sobre la tarjeta */
  .fr-card { position: relative; }
  .fr-exact {
    position: absolute; top: -8px; left: 14px; padding: 1px 8px; border-radius: 99px; font-style: normal;
    font-size: 9.5px; font-weight: 900; letter-spacing: .06em; color: #2a1c08; background: #f0c14a; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  }
  @media (max-width: 360px) {
    .fr-card { grid-template-columns: 48px minmax(0, 1fr); }
    .fr-ava-wrap, .fr-ava { width: 48px; height: 48px; }
    .fr-acts { grid-column: 1 / -1; justify-content: flex-end; }
  }
  @media (prefers-reduced-motion: reduce) { .led.on { animation: none; } }

  /* ════════════════════════════════════════════════════════════════════
     PERFIL · rediseño futurista prémium
     ════════════════════════════════════════════════════════════════════ */
  .pf { padding-bottom: 96px; }
  /* 1 · Identidad épica */
  .pf-id {
    position: relative; isolation: isolate; overflow: hidden; margin: 4px 0 16px; padding: 26px 16px 18px; border-radius: 28px; text-align: center;
    border: 1.5px solid transparent;
    background:
      linear-gradient(180deg, rgba(10, 18, 34, .78), rgba(6, 10, 20, .92)) padding-box,
      linear-gradient(140deg, #fde68a, rgba(240, 193, 74, .15) 35%, rgba(56, 189, 248, .35) 65%, #f0c14a) border-box;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 40px -12px rgba(240, 193, 74, .55), inset 0 1px 0 rgba(255, 244, 214, .12);
  }
  .pf-aurora {
    position: absolute; inset: -40% -20% auto; height: 120%; z-index: -1; pointer-events: none; filter: blur(30px); opacity: .7;
    background: radial-gradient(40% 50% at 30% 50%, rgba(240, 193, 74, .45), transparent 70%), radial-gradient(40% 50% at 70% 40%, rgba(56, 189, 248, .35), transparent 70%),
      radial-gradient(30% 40% at 50% 70%, rgba(168, 85, 247, .3), transparent 70%);
    animation: pfAurora 12s ease-in-out infinite alternate;
  }
  @keyframes pfAurora { from { transform: translateX(-6%) rotate(-4deg); } to { transform: translateX(6%) rotate(4deg); } }
  .pf-id::after {               /* retícula futurista */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
    background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 22px 22px;
    -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%);
  }
  .pf-ava-stage { position: relative; width: 136px; height: 136px; margin: 0 auto 10px; display: grid; place-items: center; animation: pfFloat 5s ease-in-out infinite; }
  @keyframes pfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .pf-orbit {
    position: absolute; inset: 0; border-radius: 50%; padding: 2px; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 55%, #fde68a 70%, #f0c14a 78%, transparent 92%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 6px rgba(240, 193, 74, .9)); animation: ppSpin 6s linear infinite;
  }
  .pf-orbit.two { inset: -9px; background: conic-gradient(from 180deg, transparent 0 60%, #38bdf8 76%, transparent 90%); filter: drop-shadow(0 0 6px rgba(56, 189, 248, .9)); animation-duration: 9s; animation-direction: reverse; }
  #perfil .perfil-avatar-circle#big-ava {
    width: 112px; height: 112px; font-size: 46px; border-radius: 50%; display: grid; place-items: center;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 0 3px rgba(240, 193, 74, .85), 0 0 34px rgba(240, 193, 74, .45);
  }
  .pf-ava-edit, .pf-name-edit {
    display: grid; place-items: center; cursor: pointer; border: 0; color: #2a1c08;
    background: linear-gradient(180deg, #fde68a, #f0c14a); box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 10px rgba(240, 193, 74, .5);
  }
  .pf-ava-edit { position: absolute; right: 6px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; z-index: 3; }
  .pf-name-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .pf-name { margin: 0; font-family: Fraunces, serif; font-size: 28px; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
  .pf-name-edit { width: 28px; height: 28px; border-radius: 9px; flex: none; }
  .pf-verified { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #6ee7b7; }
  /* Título de rango metálico según el MMR */
  .pf-rank-title {
    --metal: linear-gradient(100deg, #8a5a10, #fde68a 30%, #fff8dc 45%, #f0c14a 60%, #8a5a10);
    display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0; padding: 7px 16px; border-radius: 99px;
    background: rgba(0, 0, 0, .4); border: 1px solid color-mix(in srgb, var(--rk, #f0c14a) 60%, transparent);
    box-shadow: 0 0 18px -4px var(--rk, #f0c14a), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .pf-rank-title.r1 { --metal: linear-gradient(100deg, #475569, #e2e8f0 35%, #94a3b8 60%, #475569); }
  .pf-rank-title.r2 { --metal: linear-gradient(100deg, #0e7490, #e0f2fe 35%, #7dd3fc 60%, #0e7490); }
  .pf-rank-title.r3 { --metal: linear-gradient(100deg, #5b21b6, #ede9fe 35%, #a78bfa 60%, #5b21b6); }
  .pf-rank-title.r4 { --metal: linear-gradient(100deg, #8a5a10, #fde68a 30%, #fff8dc 45%, #f0c14a 60%, #8a5a10); }
  .pf-rank-title.r5 { --metal: linear-gradient(100deg, #7c2d12, #fdba74 30%, #fff1e0 45%, #fb923c 60%, #7c2d12); }
  .pf-rank-title.r6 { --metal: linear-gradient(100deg, #7f1d1d, #fda4af 30%, #fff1f2 45%, #f43f5e 60%, #7f1d1d); }
  .pf-rank-ico { font-style: normal; font-size: 20px; filter: drop-shadow(0 0 6px var(--rk, #f0c14a)); }
  .pf-metal {
    font-family: Fraunces, serif; font-size: 18px; font-weight: 800; background: var(--metal); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: metalSheen 4s ease-in-out infinite; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
  }
  .pf-wallet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .pf-pill {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 16px; cursor: pointer; font: inherit; color: #fff;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .pf-pill > span { font-size: 18px; }
  .pf-pill b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .pf-pill small { font-size: 10.5px; color: #94a3b8; }
  .pf-pill.dia { border-color: rgba(125, 211, 252, .5); } .pf-pill.dia b { color: #7dd3fc; }
  .pf-pill.trophies { border-color: rgba(240, 193, 74, .55); } .pf-pill.trophies b { color: #fde68a; }
  .pf-pill.gift { border-color: rgba(74, 222, 128, .45); justify-content: center; } .pf-pill.gift small { color: #bbf7d0; font-weight: 700; }
  .pf-pill .gift-dot { position: absolute; top: 6px; right: 8px; }
  /* Tarjetas flotantes de cristal profundo */
  .pf-card {
    position: relative; margin: 0 0 16px; padding: 16px 14px; border-radius: 24px; border: 1px solid transparent;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 40%, rgba(4, 8, 18, .6)) padding-box,
      linear-gradient(#0c1424, #080e1b) padding-box,
      linear-gradient(140deg, rgba(240, 193, 74, .75), rgba(240, 193, 74, .1) 35%, rgba(56, 189, 248, .25) 70%, rgba(240, 193, 74, .55)) border-box;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 28px -14px rgba(56, 189, 248, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .pf-card-head { margin: 0 0 12px; }
  .pf-card-kicker { display: block; font-size: 10px; font-weight: 900; letter-spacing: .18em; color: #38bdf8; text-shadow: 0 0 10px rgba(56, 189, 248, .6); }
  .pf-card-head h2 { margin: 2px 0 0; font-family: Fraunces, serif; font-size: 20px; font-weight: 700; color: #fde68a; }
  /* 2 · Tarjeta de jugador */
  .pf-mmr-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; }
  .pf-mmr-big { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 18px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(240, 193, 74, .5); box-shadow: 0 0 20px -6px rgba(240, 193, 74, .6); }
  .pf-mmr-big b { font-family: Fraunces, serif; font-size: 34px; line-height: 1; color: #fde68a; text-shadow: 0 0 16px rgba(240, 193, 74, .55); font-variant-numeric: tabular-nums; }
  .pf-mmr-big small { font-size: 10px; font-weight: 900; letter-spacing: .2em; color: #94a3b8; }
  #perfil .pf-rank-box { margin: 0; max-width: none; padding: 0; background: none; border: 0; display: block; }
  #perfil .pf-rank-box .pr-text small { font-size: 12px; color: #e2e8f0; font-weight: 600; }
  #perfil .pf-rank-box .pr-bar { height: 10px; margin-top: 6px; }
  .pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .pf-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 18px; text-align: center;
    background: linear-gradient(170deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .25)); border: 1px solid rgba(255, 255, 255, .09);
  }
  .pf-stat-ico { font-size: 20px; }
  .pf-stat b { font-family: Fraunces, serif; font-size: 24px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
  .pf-stat small { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #94a3b8; text-transform: uppercase; }
  .pf-stat.fire b { color: #fdba74; text-shadow: 0 0 12px rgba(249, 115, 22, .7); }
  .pf-stat.fire .pf-stat-ico { animation: pfFlame 1.4s ease-in-out infinite; }
  @keyframes pfFlame { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.15) rotate(4deg); } }
  .pf-stat.winrate b { color: #86efac; }
  .pf-ring {
    --p: 0; width: 26px; height: 26px; border-radius: 50%;
    background: conic-gradient(#22e57a calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
    filter: drop-shadow(0 0 5px rgba(34, 229, 122, .6));
  }
  .pf-combat .perfil-abandon-row { margin-top: 0; }
  .pf-combat .perfil-nav-actions { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-combat .perfil-menu-link { justify-content: center; padding: 10px 6px; border-radius: 14px; font-size: 12px; background: rgba(56, 189, 248, .07); border: 1px solid rgba(56, 189, 248, .3); }
  /* 3 · Vitrina: los bloques anteriores pasan a ser paneles internos */
  .pf-inv .perfil-card { margin: 0 0 12px; padding: 12px; border-radius: 18px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
  .pf-inv .perfil-card:last-child { margin-bottom: 0; }
  /* 4 · Ajustes */
  .pf-set .perfil-settings { margin: 0 0 12px; padding: 4px 12px; border-radius: 18px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
  .pf-set .perfil-settings-title { display: none; }
  .pf-set .perfil-custom-section { margin: 0 0 12px; border-radius: 18px; background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .08); }
  .pf-set .perfil-account-btns { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-set .perfil-account-btns .perfil-btn-logout { grid-column: 1 / -1; margin: 0; }
  .pf-set .perfil-account-btns .perfil-menu-link, .pf-set .perfil-account-btns .perfil-link-delete {
    justify-content: center; margin: 0; padding: 10px 6px; border-radius: 14px; font-size: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  }
  .pf-set .perfil-account-btns .perfil-link-delete { border-color: rgba(248, 113, 113, .35); }
  @media (prefers-reduced-motion: reduce) { .pf-aurora, .pf-ava-stage, .pf-orbit, .pf-metal, .pf-stat.fire .pf-stat-ico { animation: none !important; } }

  /* ════════════════════════════════════════════════════════════════════
     LA CHAMPIONS · cupos, modalidades (mesas de 4 / parejas 2v2) y mesas
     ════════════════════════════════════════════════════════════════════ */
  .champ-mode {
    display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 12px; padding: 10px 12px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(240, 193, 74, .16), rgba(0, 0, 0, .35)); border: 1px solid rgba(240, 193, 74, .55);
    box-shadow: 0 0 18px -6px rgba(240, 193, 74, .6);
  }
  .cmo-kicker { font-size: 10px; font-weight: 900; letter-spacing: .18em; color: #38bdf8; }
  .cmo-name { font-family: Fraunces, serif; font-size: 17px; color: #fde68a; }
  .cmo-sub { font-size: 12px; color: #e2e8f0; }
  .cmo-next { font-size: 11px; color: #94a3b8; }
  /* Cupos */
  .champ-capacity { margin: 12px 0 10px; padding: 10px 12px; border-radius: 14px; text-align: left; background: rgba(0, 0, 0, .35); border: 1px solid rgba(74, 222, 128, .35); }
  .champ-capacity.full { border-color: rgba(239, 68, 68, .6); }
  .cap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .cap-head b { flex: none; white-space: nowrap; font-family: Fraunces, serif; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
  .cap-head span { font-size: 11.5px; font-weight: 700; color: #86efac; text-align: right; }
  .champ-capacity.full .cap-head span { color: #fca5a5; }
  .cap-bar { display: block; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); }
  .cap-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #86efac); box-shadow: 0 0 10px rgba(34, 197, 94, .6); transition: width .6s ease; }
  .champ-capacity.full .cap-bar i { background: linear-gradient(90deg, #ef4444, #f97316); }
  .cap-mine { margin: 8px 0 0; font-size: 12.5px; font-weight: 800; color: #4ade80; }
  .cap-mine[hidden] { display: none; }
  /* Pareja 2v2 */
  .champ-partner { margin: 0 0 10px; text-align: left; }
  .champ-partner[hidden] { display: none; }
  .cp-title { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
  .cp-options { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .cp-options button {
    flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 99px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 700; color: #e2e8f0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(240, 193, 74, .3);
  }
  .cp-options button[data-partner="auto"] { padding-left: 12px; }
  .cp-options button.on { color: #2a1c08; background: linear-gradient(180deg, #fde68a, #f0c14a); border-color: transparent; }
  .cp-ava { width: 24px; height: 24px; font-size: 11px; }
  /* Demo: selector de modalidad */
  .champ-demo-box { display: flex; flex-direction: column; gap: 6px; }
  .champ-demo-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .champ-demo-modes button { padding: 8px 6px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: #bae6fd; background: rgba(56, 189, 248, .06); border: 1px solid rgba(125, 211, 252, .3); }
  .champ-demo-modes button.on { color: #052033; background: linear-gradient(180deg, #7dd3fc, #38bdf8); border-color: transparent; }
  /* Lista de inscritos: número de orden de llegada */
  .ce-chip { position: relative; }
  .ce-n { position: absolute; top: -7px; left: 8px; padding: 0 5px; border-radius: 99px; font-style: normal; font-size: 9px; font-weight: 900; color: #2a1c08; background: #f0c14a; }
  .ce-chip.mate { border-color: #38bdf8; background: rgba(56, 189, 248, .1); }
  .ce-list { padding-top: 8px; }
  /* Mesas del cuadro */
  .cm-table { padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
  .cm-table.mine { border-color: #4ade80; box-shadow: 0 0 12px -4px #4ade80; }
  .cm-table.live { border-color: rgba(240, 193, 74, .4); }
  .cm-table-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .cm-table-n { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
  .cm-state { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #fde68a; }
  .cm-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cm-table.n2 .cm-sides { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .cm-vs { font-size: 10px; font-weight: 900; color: #94a3b8; text-transform: uppercase; }
  .cm-side { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
  .cm-faces { display: flex; }
  .cm-faces .cm-ava { width: 24px; height: 24px; font-size: 11px; }
  .cm-side.pair .cm-faces .cm-ava + .cm-ava { margin-left: -8px; }
  .cm-side b { font-size: 11.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-side .cm-mmr { font-size: 10.5px; font-weight: 800; color: var(--brass); font-variant-numeric: tabular-nums; }
  .cm-side.win { background: rgba(74, 222, 128, .14); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .5); }
  .cm-side.win b { color: #86efac; }
  .cm-side.lose { opacity: .4; }
  .cm-side.lose b { text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, .7); }
  .cm-side.me b { color: #4ade80; }
  /* Gran Final: mesa de 4 o pareja contra pareja */
  .champ-final .cf-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 12px 0 8px; }
  .champ-final.table4 .cf-duel { grid-template-columns: 1fr 1fr; }
  .champ-final .cm-side { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 6px; }
  .champ-final .cm-faces .cm-ava { width: 44px; height: 44px; font-size: 20px; box-shadow: 0 0 0 2px #f0c14a, 0 6px 12px rgba(0, 0, 0, .5); }
  .champ-final .cm-side b { font-size: 12.5px; max-width: 100%; }
  .champ-final.decided .cm-side.win .cm-ava { box-shadow: 0 0 0 3px #f0c14a, 0 0 22px rgba(240, 193, 74, .9); }
  .cs-row .cm-side { grid-row: span 2; background: none; padding: 0; }

  /* ════════════════════════════════════════════════════════════════════
     MESA · fichas restantes de cada jugador, siempre visibles
     ════════════════════════════════════════════════════════════════════ */
  #felt .pod-tray-wrap { display: flex; align-items: center; gap: 5px; }
  #felt .pod-tray-wrap.v { flex-direction: column; }
  #felt .pod-tray-wrap.h { flex-direction: row; }
  /* Etiqueta de alto contraste: número grande + palabra */
  .pod-tiles {
    flex: none; display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 8px 3px 7px; border-radius: 99px; white-space: nowrap;
    color: #fff; background: linear-gradient(180deg, #13203a, #070d19); border: 1.5px solid #f0c14a;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .55), 0 0 10px -2px rgba(240, 193, 74, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
    line-height: 1; font-variant-numeric: tabular-nums;
  }
  .pod-tiles b { font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
  .pod-tiles small { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fde68a; }
  .pod-tiles.puja { padding: 3px 8px; }
  .pod-tiles.puja small { color: #bae6fd; }
  /* Pocas fichas: alerta roja que late */
  .pod-tiles.low { border-color: #ef4444; background: linear-gradient(180deg, #7f1d1d, #3b0a0a); box-shadow: 0 3px 8px rgba(0, 0, 0, .55), 0 0 14px rgba(239, 68, 68, .75); animation: tilesLow 1.1s ease-in-out infinite; }
  .pod-tiles.low small { color: #fecaca; }
  @keyframes tilesLow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  /* Al cambiar el número, un destello */
  .pod-tiles.bump { animation: tilesBump .45s ease-out; }
  .pod-tiles.low.bump { animation: tilesBump .45s ease-out, tilesLow 1.1s ease-in-out .45s infinite; }
  @keyframes tilesBump { 0% { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(240, 193, 74, .6); } 100% { transform: scale(1); } }
  /* Arriba: la etiqueta va bajo la fila de dorsos (así nunca se sale del paño) */
  #felt .seat-pod.top .pod-tray-wrap.h { flex-direction: column; gap: 4px; }
  /* Laterales: bajo la columna de dorsos, apilada (número arriba, palabra abajo) para caber en el asiento */
  #felt .seat-pod.left .pod-tiles, #felt .seat-pod.right .pod-tiles {
    flex-direction: column; align-items: center; gap: 1px; min-width: 40px; padding: 3px 5px 4px; border-radius: 10px;
  }
  #felt .seat-pod.left .pod-tiles b, #felt .seat-pod.right .pod-tiles b { font-size: 16px; }
  #felt .seat-pod.left .pod-tiles small, #felt .seat-pod.right .pod-tiles small { font-size: 8px; letter-spacing: .02em; }
  /* Tu asiento: junto a tu avatar */
  #felt .seat-pod.bottom .pod-head > .pod-tiles { margin-left: 6px; }
  @media (prefers-reduced-motion: reduce) { .pod-tiles.low, .pod-tiles.bump { animation: none !important; } }

  /* ════════════════════════════════════════════════════════════════════
     INICIO LEGENDARIO · obsidiana profunda, neón dorado y azul eléctrico
     ════════════════════════════════════════════════════════════════════ */
  .home-legend { position: relative; isolation: isolate; overflow: hidden;
    background:
      radial-gradient(120% 60% at 50% -10%, rgba(240, 193, 74, .14), transparent 60%),
      radial-gradient(90% 50% at 110% 40%, rgba(56, 189, 248, .12), transparent 60%),
      linear-gradient(180deg, #070a14 0%, #04060c 55%, #03040a 100%); }
  .home-legend > .scroll { position: relative; z-index: 1; }
  /* Focos de neón que respiran detrás de todo */
  .home-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .home-ambient i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: homeGlow 9s ease-in-out infinite alternate; }
  .home-ambient i:nth-child(1) { width: 260px; height: 260px; left: -90px; top: 60px; background: rgba(240, 193, 74, .45); }
  .home-ambient i:nth-child(2) { width: 240px; height: 240px; right: -100px; top: 380px; background: rgba(56, 189, 248, .4); animation-delay: -3s; }
  .home-ambient i:nth-child(3) { width: 220px; height: 220px; left: 20%; bottom: -80px; background: rgba(168, 85, 247, .3); animation-delay: -6s; }
  @keyframes homeGlow { from { transform: translate(0, 0) scale(.9); opacity: .4; } to { transform: translate(20px, -24px) scale(1.12); opacity: .7; } }
  /* Cristal esmerilado profundo con filo dorado→azul, compartido por todas las tarjetas */
  .home-legend .brand-showcase, .home-legend .hero, .home-legend .menu-card-bot, .home-legend .menu-card-champ, .home-legend .menu-card {
    border: 1.5px solid transparent !important;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 45%, rgba(3, 6, 14, .55)) padding-box,
      linear-gradient(#0a1020, #060a15) padding-box,
      linear-gradient(135deg, rgba(240, 193, 74, .85), rgba(240, 193, 74, .12) 38%, rgba(56, 189, 248, .45) 72%, rgba(240, 193, 74, .6)) border-box !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .6), 0 0 26px -12px rgba(56, 189, 248, .7), 0 0 22px -12px rgba(240, 193, 74, .8), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    transition: transform .18s ease, box-shadow .25s ease;
  }
  .home-legend .menu-card:active, .home-legend .menu-card-bot:active, .home-legend .menu-card-champ:active { transform: scale(.97); }
  @media (hover: hover) {
    .home-legend .menu-card:hover, .home-legend .menu-card-bot:hover, .home-legend .menu-card-champ:hover, .home-legend .hero:hover {
      transform: translateY(-3px);
      box-shadow: 0 24px 44px rgba(0, 0, 0, .65), 0 0 30px -8px rgba(56, 189, 248, .8), 0 0 26px -8px rgba(240, 193, 74, .9), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
    }
  }
  /* Tarjeta principal: más protagonismo y fuego potenciado */
  .home-legend .hero {
    background:
      radial-gradient(70% 90% at 85% 70%, rgba(255, 120, 20, .32), transparent 65%) padding-box,
      radial-gradient(60% 60% at 0% 0%, rgba(56, 189, 248, .14), transparent 60%) padding-box,
      linear-gradient(160deg, #0d1a33 0%, #070d1c 60%, #05070f 100%) padding-box,
      linear-gradient(135deg, #fde68a, rgba(255, 140, 30, .5) 40%, rgba(56, 189, 248, .55) 75%, #f0c14a) border-box !important;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .65), 0 0 34px -8px rgba(255, 140, 30, .75), 0 0 26px -12px rgba(56, 189, 248, .8) !important;
  }
  /* Resplandor de brasas bajo las fichas, con parpadeo de llama real */
  .home-legend .hero-showcase::after {
    content: ""; position: absolute; left: -10%; right: -10%; bottom: -18%; height: 70%; z-index: -1; pointer-events: none; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 190, 60, .85), rgba(255, 90, 0, .55) 45%, rgba(200, 30, 0, .18) 75%, transparent);
    filter: blur(10px); animation: emberFlicker 1.6s ease-in-out infinite;
  }
  @keyframes emberFlicker {
    0%, 100% { opacity: .75; transform: scaleX(1) scaleY(1); }
    20% { opacity: 1; transform: scaleX(1.06) scaleY(1.12); }
    45% { opacity: .65; transform: scaleX(.97) scaleY(.94); }
    70% { opacity: .95; transform: scaleX(1.03) scaleY(1.08); }
  }
  .home-legend .hero-fire-img { animation-duration: 1.8s !important; filter: saturate(1.25) brightness(1.08) drop-shadow(0 0 10px rgba(255, 120, 20, .7)); }
  /* Brasas que suben por toda la tarjeta */
  .home-legend .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .9;
    background-image:
      radial-gradient(2px 2px at 72% 92%, #ffd27a 50%, transparent 52%), radial-gradient(1.6px 1.6px at 84% 96%, #ff9a3c 50%, transparent 52%),
      radial-gradient(2.2px 2.2px at 91% 90%, #ffe7a8 50%, transparent 52%), radial-gradient(1.4px 1.4px at 64% 98%, #ff7b1c 50%, transparent 52%),
      radial-gradient(1.8px 1.8px at 78% 99%, #ffc15a 50%, transparent 52%);
    animation: emberRise 3.2s linear infinite;
  }
  @keyframes emberRise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-120px); opacity: 0; } }
  /* La Champions en el inicio */
  .menu-card-champ {
    position: relative; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 14px; border-radius: 20px;
    text-align: left; color: #fff; cursor: pointer; font: inherit;
  }
  .mcc-cup { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, rgba(255, 236, 170, .35), rgba(60, 40, 6, .85) 70%); border: 1px solid rgba(240, 193, 74, .7);
    box-shadow: 0 0 18px rgba(240, 193, 74, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
  .mcc-cup svg { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(240, 193, 74, .8)); animation: champCup 4s ease-in-out infinite; }
  .mcc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mcc-kicker { font-size: 10px; font-weight: 900; letter-spacing: .16em; color: #38bdf8; text-shadow: 0 0 8px rgba(56, 189, 248, .7); }
  .mcc-text b { font-family: Fraunces, serif; font-size: 20px; font-weight: 700;
    background: linear-gradient(100deg, #a86a12, #fde68a 30%, #fff8dc 45%, #f0c14a 60%, #a86a12); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: metalSheen 4s ease-in-out infinite; }
  .mcc-text small { font-size: 11.5px; line-height: 1.35; color: #cbd5e1; font-variant-numeric: tabular-nums; }
  .menu-card-champ.open .mcc-text small { color: #86efac; font-weight: 700; }
  .mcc-live { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: .1em; color: #fff; background: #dc2626; box-shadow: 0 0 12px rgba(239, 68, 68, .7); }
  .mcc-live[hidden] { display: none; }
  .mcc-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: ledPulse 1.2s ease-in-out infinite; }
  /* Iconos de los accesos: azulejo de cristal con brillo neón */
  .home-legend .menu-card .card-ico, .home-legend .menu-card-bot .card-ico { box-shadow: 0 0 16px -4px rgba(56, 189, 248, .7), inset 0 1px 0 rgba(255, 255, 255, .25) !important; }
  .home-legend .menu-card b { font-size: 16px; }
  @media (prefers-reduced-motion: reduce) {
    .home-ambient i, .home-legend .hero-showcase::after, .home-legend .hero::after, .mcc-cup svg, .mcc-text b, .mcc-live i { animation: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════════
     RESPONSIVO · teléfonos, tablets (vertical/horizontal) y pantallas grandes
     ════════════════════════════════════════════════════════════════════ */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg { max-width: 100%; }
  /* Textos largos: nunca desbordan su caja */
  .phone h1, .phone h2, .phone b, .phone strong, .phone p, .phone small { overflow-wrap: anywhere; }

  /* 1 · Teléfonos: la app ocupa toda la pantalla (sin marco), respetando la muesca y la barra del sistema */
  @media (max-width: 600px) {
    body { padding: 0; place-items: stretch; background: #04060c; }
    .phone {
      width: 100%; height: 100dvh; border-radius: 0; box-shadow: none;
      padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
    }
    .tabs { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  }

  /* 2 · Tablets y pantallas medianas: marco más ancho y alto */
  @media (min-width: 601px) {
    body { padding: 16px; }
    .phone { width: min(760px, 100%); height: calc(100dvh - 32px); max-height: 1180px; }
  }
  /* 3 · Pantallas grandes en horizontal: aún más ancho para la mesa */
  @media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
    .phone { width: min(1180px, 100%); }
  }

  /* Columna cómoda de lectura en pantallas anchas (todo menos la mesa, que usa el ancho completo) */
  @media (min-width: 601px) {
    .phone .screen:not(#mesa) > .scroll { padding-left: max(18px, calc((100% - 720px) / 2)); padding-right: max(18px, calc((100% - 720px) / 2)); }
    .home-legend .menu-grid-2x2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-legend .menu-grid-2x2 > .menu-card:last-child:nth-child(odd) { grid-column: auto; }
    .home-legend .menu-card { min-height: 150px; }
    .champ-prizes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lb-podium { gap: 14px; }
    .pf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .trophy-case { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .vitrina-grid { grid-template-columns: repeat(6, 1fr); }
    .champ-matches, .champ-standings { max-height: 560px; }
    /* Modales: un poco más amplios, siempre centrados */
    .end-box.sheet-box { max-width: 460px; }
    .guide-box, .lbi-box { max-width: 520px; }
  }
  /* La mesa en pantallas anchas: atril centrado y consola con aire */
  @media (min-width: 601px) {
    #mesa .hand { justify-content: center; }
    #mesa .table-console { margin-left: auto; margin-right: auto; width: min(100% - 16px, 760px); }
    #mesa .hand-zone.rack { width: min(100% - 16px, 820px); margin-left: auto; margin-right: auto; }
  }

  /* 4 · Pantallas bajas (teléfonos pequeños o tablets en horizontal): más paño para el tablero */
  @media (max-height: 700px) {
    #mesa .tc-lines { display: none; }
    #mesa .table-console { padding: 4px 8px 5px; margin-top: 4px; }
    #mesa .tc-row { min-height: 0; }
    #mesa .hand-zone .hand { padding-top: 10px; padding-bottom: 8px; }
    #mesa .hand-label { padding-top: 4px; padding-bottom: 2px; }
  }
  @media (max-height: 600px) {
    #mesa #scores { min-height: 0; }
    #mesa .mesa-header-controls { padding-top: 4px; padding-bottom: 2px; }
    #felt .seat-pod .pod-mmr { display: none; }        /* sin la línea de rango: los asientos caben sin montarse */
  }
  /* Paño muy bajo: en los laterales manda la etiqueta de conteo (la columna de dorsos no cabe) */
  @media (max-height: 640px) {
    #felt .seat-pod.left .pod-backs.pod-tray.v, #felt .seat-pod.right .pod-backs.pod-tray.v { display: none; }
    #felt .seat-pod.left .pod-mmr, #felt .seat-pod.right .pod-mmr { display: none; }
  }
  /* 5 · Teléfonos estrechos: asientos laterales compactos y etiqueta de fichas siempre dentro del paño */
  @media (max-width: 360px) {
    #felt .seat-pod.left .pod-name, #felt .seat-pod.right .pod-name { max-width: 48px; }
    #felt .seat-pod.left .pod-tiles, #felt .seat-pod.right .pod-tiles { min-width: 34px; padding: 2px 4px 3px; }
    #felt .seat-pod.left .pod-tiles b, #felt .seat-pod.right .pod-tiles b { font-size: 14px; }
    #felt .seat-pod.top .pod-mmr .rank-chip span { display: none; }
  }

  /* 6 · Áreas táctiles cómodas (mínimo 32–40 px) */
  #btn-exit-mesa { min-height: 36px; min-width: 44px; padding: 6px 10px; display: inline-flex; align-items: center; }
  #toggle-felt-btn { min-height: 34px; }
  #mesa .sort-btn { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .cm-watch { min-height: 32px; padding: 6px 10px; }
  #auth-forgot { min-height: 36px; padding: 8px 4px; }
  .csm-inv, .cm-seat-map .inv { min-height: 30px; padding: 6px 10px; }
  .pf-name-edit { width: 34px; height: 34px; }
  .fr-act { min-width: 34px; min-height: 34px; }
  @media (pointer: coarse) {
    .lb-search-clear { width: 36px; height: 36px; }
    .gc-emojis button { width: 40px; height: 40px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     RECARGA DE DIAMANTES · paquetes Bronce, Plata y Oro
     ════════════════════════════════════════════════════════════════════ */
  .rc-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; width: 100%; margin: 16px 0 4px; padding-top: 6px; }
  .rc-packs[hidden], .rc-confirm[hidden] { display: none; }
  .shop-grid.rc-packs { margin-top: 18px; }
  .rc-pack {
    --m: #d08b4f; --m2: #6b3410;
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 16px 6px 10px; border-radius: 20px;
    font: inherit; color: #fff; text-align: center; cursor: pointer; border: 1.5px solid transparent;
    background:
      radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--m) 30%, transparent), transparent 70%) padding-box,
      linear-gradient(180deg, #0f1a2e, #070c18) padding-box,
      linear-gradient(150deg, var(--m), var(--m2) 45%, var(--m)) border-box;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .5), 0 0 18px -6px var(--m);
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .rc-pack.t-silver { --m: #e5e7eb; --m2: #64748b; }
  .rc-pack.t-gold { --m: #f6d27a; --m2: #a86a12; padding-top: 26px; padding-bottom: 14px; transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .55), 0 0 28px -4px rgba(240, 193, 74, .8); }
  button.rc-pack:active { transform: scale(.96); }
  @media (hover: hover) { button.rc-pack:hover { transform: translateY(-4px); } button.rc-pack.t-gold:hover { transform: translateY(-9px); } }
  .rc-pack.popular::after {        /* brillo que recorre el paquete Oro */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 248, 220, .25) 50%, transparent 60%) no-repeat; background-size: 250% 100%;
    animation: rcShine 3.2s ease-in-out infinite;
  }
  @keyframes rcShine { 0%, 50% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
  .rc-ribbon {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 99px;
    font-size: 10px; font-weight: 900; letter-spacing: .04em; color: #2a1c08; background: linear-gradient(180deg, #fde68a, #f0c14a); box-shadow: 0 4px 10px rgba(240, 193, 74, .55);
  }
  .rc-best { font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #86efac; }
  .rc-gems { position: relative; height: 34px; display: flex; align-items: flex-end; justify-content: center; }
  .rc-gems i { font-style: normal; font-size: 26px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px rgba(125, 211, 252, .7)); }
  .rc-gems.g2 i + i, .rc-gems.g3 i + i { margin-left: -12px; }
  .rc-gems.g3 i:nth-child(2) { transform: translateY(-8px) scale(1.15); z-index: 1; }
  .rc-name { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--m); text-transform: uppercase; }
  .rc-amount { font-family: Fraunces, serif; font-size: 22px; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(125, 211, 252, .45); }
  .rc-amount small { font-size: 14px; }
  .rc-pack.t-gold .rc-amount { font-size: 26px; }
  .rc-bonus { padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 900; color: #052e16; background: #4ade80; }
  .rc-rate { font-size: 10px; color: #94a3b8; }
  .rc-price {
    margin-top: 6px; width: 100%; padding: 8px 4px; border-radius: 12px; font-size: 14px; font-weight: 900; white-space: nowrap; color: #2a1c08;
    background: linear-gradient(180deg, #fde68a, #f0c14a); box-shadow: 0 4px 10px rgba(240, 193, 74, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  .rc-pack.t-bronze .rc-price { background: linear-gradient(180deg, #f3c39b, #c7764b); }
  .rc-pack.t-silver .rc-price { background: linear-gradient(180deg, #f8fafc, #cbd5e1); }
  /* Modal de recarga rápida */
  .rc-box { max-width: 460px; }
  .rc-ico { font-size: 34px; filter: drop-shadow(0 0 12px rgba(125, 211, 252, .8)); }
  .rc-balance { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12.5px; color: #94a3b8; }
  .rc-balance b { color: #7dd3fc; font-size: 15px; }
  .rc-links { display: flex; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; }
  .rc-confirm { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: 10px; }
  .rc-c-title { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #38bdf8; }
  .rc-pack.static { width: min(200px, 70%); cursor: default; transform: none; margin-top: 8px; }
  .rc-c-line { margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
  .rc-demo { margin: 0; padding: 8px 10px; border-radius: 12px; font-size: 11.5px; line-height: 1.4; color: #bae6fd; background: rgba(56, 189, 248, .08); border: 1px dashed rgba(125, 211, 252, .45); }
  .rc-pay:disabled { opacity: .7; cursor: progress; }
  .rc-cancel { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #94a3b8; text-decoration: underline; min-height: 36px; }
  .shop-tabs .recharge-tab { background: linear-gradient(180deg, rgba(125, 211, 252, .18), rgba(56, 189, 248, .06)); border-color: rgba(125, 211, 252, .5); }
  .shop-tabs .recharge-tab.on { color: #052033; background: linear-gradient(180deg, #7dd3fc, #38bdf8); border-color: transparent; }
  @media (max-width: 360px) {
    .rc-ribbon { padding: 2px 6px; font-size: 8.5px; letter-spacing: 0; }
    .rc-gems i { font-size: 19px; }
    .rc-gems.g2 i + i, .rc-gems.g3 i + i { margin-left: -9px; }
    .rc-best { font-size: 8.5px; letter-spacing: .02em; }
    .rc-packs { gap: 6px; }
    .rc-amount { font-size: 18px; } .rc-pack.t-gold .rc-amount { font-size: 21px; }
    .rc-price { font-size: 12px; }
  }
  @media (prefers-reduced-motion: reduce) { .rc-pack.popular::after { animation: none; } }

  /* ════════════════════════════════════════════════════════════════════
     PASE VIP SIN ANUNCIOS
     ════════════════════════════════════════════════════════════════════ */
  .rc-vip-slot { width: 100%; }
  .rc-vip-slot[hidden], .ms-vip-note[hidden], .ms-ad[hidden], .pf-vip[hidden] { display: none !important; }
  .shop-grid.rc-packs .shop-vip { grid-column: 1 / -1; margin-bottom: 14px; }
  .vip-card {
    position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center;
    margin-top: 10px; padding: 14px; border-radius: 20px; text-align: left; border: 1.5px solid transparent;
    background:
      radial-gradient(80% 120% at 0% 0%, rgba(240, 193, 74, .22), transparent 60%) padding-box,
      linear-gradient(160deg, #17110a, #07050a) padding-box,
      linear-gradient(135deg, #fde68a, #a86a12 40%, #f0c14a 70%, #fff6cf) border-box;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 26px -6px rgba(240, 193, 74, .7);
  }
  .vip-shine { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 246, 214, .18) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: rcShine 4s ease-in-out infinite; }
  .vip-crown { grid-row: span 2; font-size: 34px; filter: drop-shadow(0 0 10px rgba(240, 193, 74, .9)); }
  .vip-crown.big { font-size: 44px; }
  .vip-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .vip-kicker { font-size: 10px; font-weight: 900; letter-spacing: .18em; color: #f0c14a; }
  .vip-text b { font-family: Fraunces, serif; font-size: 19px; color: #fff; }
  .vip-perks { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; font-size: 11.5px; color: #e9d6a7; }
  .vip-buy, .vip-on { grid-column: 1 / -1; margin-top: 8px; }
  .vip-buy {
    display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; padding: 10px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; color: #2a1c08;
    background: linear-gradient(180deg, #fde68a, #f0c14a 55%, #d49c25); box-shadow: 0 6px 16px rgba(240, 193, 74, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  .vip-buy b { font-size: 15px; font-weight: 900; }
  .vip-buy small { font-size: 10.5px; font-weight: 700; opacity: .8; }
  .vip-buy:active { transform: scale(.98); }
  .vip-on { display: block; padding: 10px; border-radius: 14px; text-align: center; font-size: 13px; font-weight: 900; color: #052e16; background: linear-gradient(180deg, #86efac, #22c55e); }
  .vip-card.active { box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 30px -4px rgba(74, 222, 128, .6); }
  /* Insignia VIP en el perfil y aviso en misiones */
  .pf-vip {
    display: inline-flex; align-items: center; gap: 4px; margin: 6px auto 0; padding: 3px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 900; letter-spacing: .04em;
    color: #2a1c08; background: linear-gradient(180deg, #fde68a, #f0c14a); box-shadow: 0 0 14px rgba(240, 193, 74, .6);
  }
  .pf-id .pf-vip { display: flex; width: fit-content; }
  .ms-vip-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; font-weight: 700; color: #fde68a; background: rgba(240, 193, 74, .1); border: 1px solid rgba(240, 193, 74, .45); }
  /* Con VIP, nada relacionado con anuncios queda a la vista */
  body.vip .ms-ad, body.vip #modal-anuncio { display: none !important; }
  @media (prefers-reduced-motion: reduce) { .vip-shine { animation: none; } }

  /* ════════════════════════════════════════════════════════════════════
     JUGAR EN FAMILIA / RETOS DE FIESTA
     ════════════════════════════════════════════════════════════════════ */
  .cm-party { margin: 14px 0 4px; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(236, 72, 153, .12), rgba(240, 193, 74, .08)); border: 1px solid rgba(244, 114, 182, .45); }
  .cm-party-head { display: flex; align-items: center; gap: 10px; }
  .cm-party-ico { font-size: 26px; }
  .cm-party-head .settings-text { flex: 1; min-width: 0; }
  .cm-party-body[hidden] { display: none; }
  .cm-party-body { margin-top: 10px; }
  .party-cats { display: flex; flex-wrap: wrap; gap: 6px; }
  .party-cat-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: #e2e8f0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .15); }
  .party-cat-btn.on { color: #2a1c08; background: linear-gradient(180deg, #fbcfe8, #f472b6); border-color: transparent; }
  .party-cat-btn.adult.on { background: linear-gradient(180deg, #fde68a, #f59e0b); }
  .party-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.4; color: #fde68a; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .45); }
  .party-warn[hidden] { display: none; }
  .party-add { display: flex; gap: 6px; }
  .party-add input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 13px; color: #fff; background: #0c1527; border: 1.5px solid rgba(244, 114, 182, .45); outline: none; }
  .party-add input:focus { border-color: #f472b6; box-shadow: 0 0 0 3px rgba(244, 114, 182, .2); }
  .party-custom-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .party-custom-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: 99px; font-size: 12px; color: #fce7f3; background: rgba(244, 114, 182, .14); border: 1px solid rgba(244, 114, 182, .4); }
  .party-custom-chip button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .35); }
  /* Cartel festivo del reto */
  .party-modal.on { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(236, 72, 153, .35), rgba(4, 6, 12, .9) 70%); }
  .party-card {
    position: relative; isolation: isolate; overflow: hidden; width: min(92%, 420px); padding: 26px 18px 18px; border-radius: 28px; text-align: center; color: #fff;
    background: linear-gradient(165deg, #2a0f2e 0%, #140a24 55%, #0a0814 100%); border: 2px solid transparent;
    background-clip: padding-box; box-shadow: 0 0 0 2px #f472b6, 0 0 40px rgba(236, 72, 153, .7), 0 0 80px rgba(240, 193, 74, .35), 0 30px 60px rgba(0, 0, 0, .6);
  }
  .party-card.pop { animation: partyPop .6s cubic-bezier(.2, 1.6, .4, 1); }
  @keyframes partyPop { 0% { transform: scale(.6) rotate(-4deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .party-burst { position: absolute; inset: -50%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(240, 193, 74, .14) 0 10deg, transparent 10deg 20deg); animation: ppSpin 14s linear infinite; }
  .party-kicker { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #2a1c08; background: linear-gradient(90deg, #fde68a, #f472b6); box-shadow: 0 0 16px rgba(244, 114, 182, .7); }
  .party-who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 6px; }
  .party-ava { width: 74px; height: 74px; font-size: 32px; box-shadow: 0 0 0 3px #f472b6, 0 0 24px rgba(244, 114, 182, .8); animation: partyShake 1.2s ease-in-out infinite; }
  @keyframes partyShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
  .party-who b { font-family: Fraunces, serif; font-size: 22px; }
  .party-who small { font-size: 12px; color: #fbcfe8; }
  .party-cat { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: #fde68a; background: rgba(240, 193, 74, .12); border: 1px solid rgba(240, 193, 74, .45); }
  .party-dare { margin: 12px 4px 16px; font-family: Fraunces, serif; font-size: clamp(22px, 6.4vw, 30px); font-weight: 800; line-height: 1.2; color: #fff; text-shadow: 0 0 18px rgba(244, 114, 182, .8), 0 2px 0 rgba(0, 0, 0, .5); }
  .party-actions { display: flex; flex-direction: column; gap: 6px; }
  .party-reroll { min-height: 40px; background: none; border: 1px dashed rgba(244, 114, 182, .6); border-radius: 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; color: #fbcfe8; }
  @media (prefers-reduced-motion: reduce) { .party-card.pop, .party-burst, .party-ava { animation: none; } }

  /* ════════════════════════════════════════════════════════════════════
     SALA DE ESPERA · entrada de jugadores y mesa completa
     ════════════════════════════════════════════════════════════════════ */
  .room-seat.just-seated .ava-chip, .room-seat.just-seated .rs-ava { animation: seatPop .9s cubic-bezier(.18, 1.7, .4, 1) both; animation-delay: var(--t0, 0ms); }
  @keyframes seatPop { 0% { transform: scale(.2); opacity: 0; filter: brightness(2.4); } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; filter: none; } }
  /* Anillo de luz dorada que se expande desde el avatar */
  .room-seat.just-seated::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; pointer-events: none; z-index: 0;
    box-shadow: 0 0 0 3px rgba(253, 230, 138, .95), 0 0 24px 6px rgba(240, 193, 74, .85), 0 0 40px 12px rgba(56, 189, 248, .35);
    animation: seatFlash 1s ease-out both; animation-delay: var(--t0, 0ms);
  }
  @keyframes seatFlash { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
  /* Partículas doradas alrededor del asiento */
  .rs-sparks { position: absolute; top: 26px; left: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
  .rs-sparks i {
    position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
    background: radial-gradient(circle, #fff8dc, #f0c14a 60%, transparent 70%); box-shadow: 0 0 8px #f0c14a;
    animation: seatSpark 1s ease-out both; animation-delay: var(--t0, 0ms);
  }
  .rs-sparks i:nth-child(3n) { width: 4px; height: 4px; background: radial-gradient(circle, #e0f2fe, #38bdf8 60%, transparent 70%); box-shadow: 0 0 8px #38bdf8; }
  @keyframes seatSpark {
    0% { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; }
    100% { transform: rotate(var(--a)) translateX(var(--d)) translateY(-6px) scale(.2); opacity: 0; }
  }
  .room-seat.just-seated b { animation: seatName .9s ease-out both; animation-delay: var(--t0, 0ms); }
  @keyframes seatName { 0%, 30% { color: #fde68a; text-shadow: 0 0 12px rgba(240, 193, 74, .9); } 100% { color: inherit; text-shadow: none; } }
  /* Mesa completa: pulso de fuego/neón dorado en el tapete y aviso */
  .room-table.full .room-felt { border-color: #f0c14a; animation: fullPulse 1.4s ease-in-out infinite; }
  @keyframes fullPulse {
    0%, 100% { box-shadow: inset 0 0 30px rgba(0, 0, 0, .6), 0 0 0 2px rgba(240, 193, 74, .6), 0 0 24px rgba(255, 140, 30, .55), 0 0 50px rgba(240, 193, 74, .3); }
    50% { box-shadow: inset 0 0 30px rgba(0, 0, 0, .6), 0 0 0 4px rgba(253, 230, 138, .9), 0 0 40px rgba(255, 120, 20, .85), 0 0 80px rgba(240, 193, 74, .55); }
  }
  .room-full-banner {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; white-space: nowrap; pointer-events: none;
    padding: 8px 16px; border-radius: 99px; font-size: 15px; font-weight: 900; letter-spacing: .04em; color: #2a1c08;
    background: linear-gradient(90deg, #fde68a, #f0c14a, #fb923c); box-shadow: 0 0 22px rgba(255, 140, 30, .8), 0 8px 18px rgba(0, 0, 0, .5);
    animation: bannerIn .6s cubic-bezier(.2, 1.6, .4, 1) both, bannerGlow 1.4s ease-in-out .6s infinite;
  }
  @keyframes bannerIn { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
  @keyframes bannerGlow { 50% { box-shadow: 0 0 34px rgba(255, 120, 20, 1), 0 8px 18px rgba(0, 0, 0, .5); } }
  #sala.room-is-full .room-chips span { border-color: rgba(240, 193, 74, .6); }
  @media (prefers-reduced-motion: reduce) {
    .room-seat.just-seated *, .room-seat.just-seated::before, .rs-sparks i, .room-table.full .room-felt, .room-full-banner { animation: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════════
     CHAT GLOBAL · panel de comunicaciones futurista
     ════════════════════════════════════════════════════════════════════ */
  .gc-x {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; border: 1.5px solid transparent;
    background:
      radial-gradient(120% 50% at 50% 0%, rgba(56, 189, 248, .12), transparent 60%) padding-box,
      linear-gradient(180deg, #060b16 0%, #03060d 100%) padding-box,
      linear-gradient(140deg, rgba(240, 193, 74, .85), rgba(56, 189, 248, .25) 40%, rgba(34, 211, 238, .6) 70%, rgba(240, 193, 74, .7)) border-box;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .65), 0 0 30px -10px rgba(34, 211, 238, .7), 0 0 24px -12px rgba(240, 193, 74, .8);
  }
  /* Barrido de escáner muy sutil */
  .gc-scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px), linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, .08) 50%, transparent 100%) no-repeat;
    background-size: auto, 100% 30%; animation: gcScan 6s linear infinite; }
  @keyframes gcScan { from { background-position: 0 0, 0 -40%; } to { background-position: 0 0, 0 140%; } }
  /* Cabecera flotante en vivo */
  .gc-head {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 10px 10px 0; padding: 8px 8px 8px 12px; border-radius: 16px;
    background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(34, 211, 238, .35);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .gc-x .gc-head-title { display: inline-flex; align-items: center; gap: 6px; font-family: Fraunces, serif; font-size: 17px; font-weight: 700; color: #fde68a; }
  .gc-head-ico { filter: drop-shadow(0 0 6px rgba(34, 211, 238, .8)); }
  .gc-x .gc-online { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #a5f3fc; }
  .gc-x .gc-close { flex: none; width: 34px; height: 34px; }
  .gc-x .gc-shield { display: block; padding: 6px 14px 0; font-size: 10.5px; color: #64748b; text-align: center; }
  /* Historial */
  .gc-log-wrap { position: relative; }
  .gc-x .gc-log { height: min(52vh, 460px); padding: 12px 12px 18px; gap: 12px; scroll-behavior: smooth; }
  .gc-x .gc-msg { max-width: 92%; gap: 8px; animation: none; }
  .gc-x .gc-msg.fresh { animation: gcEnter .45s cubic-bezier(.2, 1.3, .4, 1) both; }
  .gc-x .gc-msg.mine.fresh { animation-name: gcEnterMine; }
  @keyframes gcEnter { 0% { opacity: 0; transform: translateX(-18px) scale(.94); filter: brightness(1.8); } 100% { opacity: 1; transform: none; filter: none; } }
  @keyframes gcEnterMine { 0% { opacity: 0; transform: translateX(18px) scale(.94); filter: brightness(1.8); } 100% { opacity: 1; transform: none; filter: none; } }
  .gc-x .gc-sys.fresh { animation: gcIn .3s ease-out both; }
  .gc-x .gc-ava { width: 36px; height: 36px; font-size: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 1.5px rgba(34, 211, 238, .45); }
  .gc-x .gc-msg.mine .gc-ava { box-shadow: 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 1.5px rgba(240, 193, 74, .7); }
  .gc-x .gc-bubble {
    padding: 8px 12px 9px; border-radius: 18px 18px 18px 6px; border: 1px solid transparent;
    background:
      linear-gradient(160deg, rgba(34, 211, 238, .1), rgba(255, 255, 255, .03) 45%, rgba(3, 8, 18, .6)) padding-box,
      linear-gradient(#0c1526, #08101e) padding-box,
      linear-gradient(140deg, rgba(34, 211, 238, .6), rgba(34, 211, 238, .08) 50%, rgba(56, 189, 248, .35)) border-box;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  }
  .gc-x .gc-msg.mine .gc-bubble {
    border-radius: 18px 18px 6px 18px;
    background:
      linear-gradient(160deg, rgba(253, 230, 138, .22), rgba(240, 193, 74, .08) 50%, rgba(40, 24, 4, .6)) padding-box,
      linear-gradient(#2a1d08, #150e04) padding-box,
      linear-gradient(140deg, #fde68a, rgba(240, 193, 74, .2) 50%, #f0c14a) border-box;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .45), 0 0 14px -4px rgba(240, 193, 74, .6);
  }
  .gc-x .gc-meta b { color: #67e8f9; }
  .gc-x .gc-msg.mine .gc-meta b { color: #fde68a; }
  .gc-x .gc-bubble p { font-size: 14px; color: #f1f5f9; }
  .gc-x .gc-sys { background: rgba(34, 211, 238, .06); border-color: rgba(34, 211, 238, .35); color: #a5f3fc; }
  /* Aviso de mensajes nuevos */
  .gc-jump {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
    padding: 6px 14px; border-radius: 99px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: #032028;
    background: linear-gradient(180deg, #a5f3fc, #22d3ee); box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 16px rgba(34, 211, 238, .7);
    animation: gcJump .5s cubic-bezier(.2, 1.5, .4, 1) both;
  }
  .gc-jump[hidden] { display: none; }
  @keyframes gcJump { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
  /* Barra de entrada con brillo al enfocar */
  .gc-x .gc-compose { position: relative; align-items: center; gap: 8px; padding: 10px 10px 4px; border-top: 1px solid rgba(34, 211, 238, .18); }
  .gc-emoji-toggle { flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 21px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(240, 193, 74, .4); transition: transform .15s ease; }
  .gc-emoji-toggle.on { background: rgba(240, 193, 74, .2); border-color: #f0c14a; transform: rotate(-12deg) scale(1.06); }
  .gc-input-wrap { position: relative; flex: 1; min-width: 0; border-radius: 99px; padding: 1.5px; background: rgba(34, 211, 238, .25); }
  .gc-input-wrap:focus-within { background: conic-gradient(from var(--gca, 0deg), #22d3ee, #f0c14a, #22d3ee, #a855f7, #22d3ee); animation: gcRing 3s linear infinite; box-shadow: 0 0 18px rgba(34, 211, 238, .45); }
  @property --gca { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes gcRing { to { --gca: 360deg; } }
  .gc-x .gc-compose input { width: 100%; border: 0; border-radius: 99px; background: #050a14; box-shadow: none; }
  .gc-x .gc-compose input:focus { border: 0; box-shadow: none; }
  .gc-x .gc-send { background: linear-gradient(135deg, #fde68a, #f0c14a 50%, #d49c25); box-shadow: 0 4px 14px rgba(240, 193, 74, .45), 0 0 12px rgba(34, 211, 238, .3); }
  /* Selector de emojis flotante */
  .gc-x .gc-emojis {
    position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 5; display: grid; grid-template-columns: repeat(6, 42px); gap: 4px; padding: 10px;
    overflow: visible; border-radius: 18px; border-top: 0;
    background: linear-gradient(165deg, rgba(14, 24, 44, .96), rgba(4, 8, 18, .98)); border: 1px solid rgba(34, 211, 238, .45);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 36px rgba(0, 0, 0, .6), 0 0 22px -6px rgba(34, 211, 238, .7);
    animation: gcPop .22s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 20px 100%;
  }
  .gc-x .gc-emojis[hidden] { display: none; }
  @keyframes gcPop { from { opacity: 0; transform: scale(.7) translateY(8px); } to { opacity: 1; transform: none; } }
  .gc-x .gc-emojis button { width: 42px; height: 42px; border-radius: 12px; font-size: 22px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; }
  @media (hover: hover) { .gc-x .gc-emojis button:hover { background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .5); transform: scale(1.12); } }
  @media (max-width: 360px) { .gc-x .gc-emojis { grid-template-columns: repeat(5, 40px); } .gc-x .gc-emojis button { width: 40px; height: 40px; } .gc-x .gc-online span { display: none; } }
  @media (prefers-reduced-motion: reduce) { .gc-scan, .gc-x .gc-msg.fresh, .gc-input-wrap:focus-within, .gc-jump, .gc-x .gc-emojis { animation: none !important; } }

  .gc-x .gc-head-title, .gc-x .gc-online { white-space: nowrap; }
  .gc-x .gc-head-title { font-size: 16px; }

  /* ════════════════════════════════════════════════════════════════════
     BANDERAS DEL MUNDO · tela ondeando en alta definición
     ════════════════════════════════════════════════════════════════════ */
  .flag-wave { position: relative; display: inline-block; overflow: hidden; line-height: 0; border-radius: 6px; isolation: isolate;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); transform-origin: left center; animation: flagSway 3.6s ease-in-out infinite; }
  .flag-wave img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .flag-emoji { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2em; line-height: 1; }
  /* Pliegues de la tela que avanzan con el viento */
  .flag-folds { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
    background: repeating-linear-gradient(100deg, rgba(0, 0, 0, .32) 0%, rgba(255, 255, 255, .28) 9%, rgba(0, 0, 0, .3) 18%, rgba(255, 255, 255, .22) 27%, rgba(0, 0, 0, .32) 36%);
    background-size: 200% 100%; animation: flagFolds 2.6s linear infinite; }
  /* Brillo de cristal */
  .flag-gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .08) 35%, transparent 55%); }
  @keyframes flagFolds { from { background-position: 0 0; } to { background-position: -200% 0; } }
  @keyframes flagSway { 0%, 100% { transform: perspective(300px) rotateY(0deg) skewY(0deg); } 50% { transform: perspective(300px) rotateY(-10deg) skewY(-1.5deg); } }
  /* Tienda e inventario */
  .flag-card { width: 72px; height: 48px; }
  .inv-prev .flag-card { width: 60px; height: 40px; }
  .shop-grid.cat-flags { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .shop-grid.cat-flags .si-preview { height: 64px; display: grid; place-items: center; }
  .shop-grid.cat-flags .si-name { min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Perfil: estandarte translúcido detrás del avatar y banderín junto al nombre */
  .pf-flag { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .42;
    -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 92%); mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 92%); }
  .pf-flag[hidden], .pf-flag-pin[hidden] { display: none; }
  .flag-banner { width: 100%; height: 100%; border-radius: 0; box-shadow: none; animation-duration: 6s; filter: saturate(1.15); }
  .flag-banner .flag-folds { animation-duration: 4s; opacity: .9; }
  .pf-id.has-flag::before {          /* resplandor que hace brillar la bandera tras el avatar */
    content: ""; position: absolute; left: 50%; top: 26px; width: 220px; height: 220px; margin-left: -110px; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); }
  .pf-flag-pin { display: inline-flex; }
  .flag-pin { width: 30px; height: 20px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) { .flag-wave, .flag-folds { animation: none !important; } }

  /* ════════════════════════════════════════════════════════════════════
     DORSOS EXÓTICOS · pintados con variables (fondo, filo, brillo, animación)
     ════════════════════════════════════════════════════════════════════ */
  .pod-backs.back-x .back, body.back-x .backs .back, .back-demo.back-x .back {
    background: var(--bx-bg) !important; border: 1px solid var(--bx-edge) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -1px 2px rgba(0, 0, 0, .45), 0 0 6px var(--bx-glow), 0 2px 4px rgba(0, 0, 0, .5) !important;
    animation: var(--bx-anim) 2.6s ease-in-out infinite;
  }
  .pod-backs.back-x .back > *, body.back-x .backs .back > *, .back-demo.back-x .back > * { display: none !important; }
  .pod-backs.back-x .back::after, .back-demo.back-x .back::after { display: none !important; }
  @keyframes bxNeon { 0%, 100% { filter: brightness(1) drop-shadow(0 0 2px var(--bx-glow)); } 50% { filter: brightness(1.35) drop-shadow(0 0 6px var(--bx-glow)); } }
  @keyframes bxLava { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3) saturate(1.3); } }
  @keyframes bxCrystal { 0%, 100% { filter: hue-rotate(0deg) brightness(1.05); } 50% { filter: hue-rotate(25deg) brightness(1.25); } }
  /* Vista previa en la tienda: dorsos grandes y con relieve */
  .shop-grid.cat-backs .back-demo .back, .inv-prev .back-demo.back-x .back { border-radius: 5px; }
  .bx-quality { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .3); }
  .bx-quality.q-epic { background: linear-gradient(135deg, #7c3aed, #a855f7); border-color: transparent; }
  .bx-quality.q-legend { color: #2a1c08; background: linear-gradient(135deg, #fde68a, #f0c14a 50%, #b7791f); border-color: transparent; }
  @media (prefers-reduced-motion: reduce) { .pod-backs.back-x .back, .back-demo.back-x .back { animation: none !important; } }

  /* ════════════════════════════════════════════════════════════════════
     PRESENTACIÓN DEL ENFRENTAMIENTO · arena de combate
     ════════════════════════════════════════════════════════════════════ */
  .fight-intro { position: absolute; inset: 0; z-index: 80; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; isolation: isolate;
    background: radial-gradient(70% 50% at 50% 55%, #1a0a05 0%, #07050a 60%, #000 100%); }
  .fight-intro[hidden] { display: none; }
  .fight-intro.out { animation: fiOut .3s ease-in forwards; }
  @keyframes fiOut { to { opacity: 0; transform: scale(1.04); } }
  /* Focos que barren la arena */
  .fi-lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
    background:
      conic-gradient(from 160deg at 15% -10%, transparent 0 10deg, rgba(56, 189, 248, .35) 16deg, transparent 26deg),
      conic-gradient(from 178deg at 85% -10%, transparent 0 10deg, rgba(240, 193, 74, .4) 16deg, transparent 26deg),
      conic-gradient(from 170deg at 50% -15%, transparent 0 8deg, rgba(255, 255, 255, .22) 12deg, transparent 18deg);
    animation: fiSweep 2.4s ease-in-out infinite alternate; }
  @keyframes fiSweep { from { transform: translateX(-6%) rotate(-2deg); } to { transform: translateX(6%) rotate(2deg); } }
  /* Brasas y chispas que suben */
  .fi-embers { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background-image: radial-gradient(2px 2px at 20% 90%, #ffd27a 50%, transparent 52%), radial-gradient(1.6px 1.6px at 40% 95%, #ff7b1c 50%, transparent 52%),
      radial-gradient(2.4px 2.4px at 60% 92%, #ffe7a8 50%, transparent 52%), radial-gradient(1.8px 1.8px at 80% 97%, #ff9a3c 50%, transparent 52%),
      radial-gradient(2px 2px at 10% 99%, #ffc15a 50%, transparent 52%), radial-gradient(1.4px 1.4px at 90% 93%, #ff7b1c 50%, transparent 52%);
    animation: emberRise 2.2s linear infinite; }
  .fight-intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; pointer-events: none;
    background: radial-gradient(60% 100% at 50% 100%, rgba(255, 110, 20, .55), transparent 70%); animation: emberFlicker 1.2s ease-in-out infinite; }
  /* Cada bando con su bandera ondeando */
  .fi-side { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
  .fi-flag { position: absolute; inset: 8% 0; opacity: .55; -webkit-mask: linear-gradient(90deg, #000 30%, transparent); mask: linear-gradient(90deg, #000 30%, transparent); }
  .fi-side.right .fi-flag { -webkit-mask: linear-gradient(270deg, #000 30%, transparent); mask: linear-gradient(270deg, #000 30%, transparent); }
  .fi-flag .flag-wave { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
  .fi-team { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .fi-fighter { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 100%; }
  .fi-ava { width: 104px; height: 104px; font-size: 44px; box-shadow: 0 0 0 3px #f0c14a, 0 0 30px rgba(255, 140, 30, .85), 0 14px 30px rgba(0, 0, 0, .7); }
  .fi-team.many .fi-ava { width: 64px; height: 64px; font-size: 28px; }
  .fi-fighter b { font-family: Fraunces, serif; font-size: 20px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); overflow-wrap: anywhere; }
  .fi-team.many .fi-fighter b { font-size: 14px; }
  .fi-fighter small { font-size: 10.5px; font-weight: 700; color: #fde68a; text-shadow: 0 1px 4px #000; }
  /* Entrada: los bandos llegan desde los lados y chocan en el centro */
  .fight-intro.go .fi-side.left .fi-team { animation: fiInLeft .7s cubic-bezier(.2, .9, .3, 1.15) both, fiRecoilL .35s ease-out .65s both; }
  .fight-intro.go .fi-side.right .fi-team { animation: fiInRight .7s cubic-bezier(.2, .9, .3, 1.15) both, fiRecoilR .35s ease-out .65s both; }
  @keyframes fiInLeft { from { transform: translateX(-120%) scale(.8); opacity: 0; } to { transform: translateX(14%); opacity: 1; } }
  @keyframes fiInRight { from { transform: translateX(120%) scale(.8); opacity: 0; } to { transform: translateX(-14%); opacity: 1; } }
  @keyframes fiRecoilL { from { transform: translateX(14%); } to { transform: translateX(0); } }
  @keyframes fiRecoilR { from { transform: translateX(-14%); } to { transform: translateX(0); } }
  /* El choque: onda expansiva y destello */
  .fi-shock { position: absolute; left: 50%; top: 46%; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 4px #fff8dc, 0 0 40px 18px rgba(255, 170, 60, .9), 0 0 120px 40px rgba(255, 90, 0, .55); }
  .fight-intro.go .fi-shock { animation: fiShock .7s ease-out .62s both; }
  @keyframes fiShock { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
  .fight-intro.go { animation: fiShake .35s ease-in-out .62s both; }
  @keyframes fiShake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
  /* "VS" en llamas */
  .fi-vs { position: absolute; left: 50%; top: 46%; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; }
  .fi-vs b { display: block; font-family: Fraunces, serif; font-size: 78px; font-weight: 900; line-height: 1; font-style: italic;
    background: linear-gradient(180deg, #fff8dc 0%, #fde68a 30%, #f97316 65%, #b91c1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(255, 120, 20, .95)) drop-shadow(0 4px 0 #3b0a00); }
  .fight-intro.go .fi-vs b { animation: fiVs .55s cubic-bezier(.2, 1.8, .4, 1) .7s both, fiVsBurn 1s ease-in-out 1.3s infinite; }
  @keyframes fiVs { 0% { transform: scale(4) rotate(-10deg); opacity: 0; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
  @keyframes fiVsBurn { 0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 120, 20, .95)) drop-shadow(0 4px 0 #3b0a00); } 50% { filter: drop-shadow(0 0 26px rgba(255, 80, 0, 1)) drop-shadow(0 4px 0 #3b0a00); } }
  /* Grito de batalla y modalidad */
  .fi-call { position: absolute; left: 0; right: 0; bottom: 15%; z-index: 6; margin: 0; padding: 0 12px; text-align: center;
    font-family: Fraunces, serif; font-size: clamp(22px, 6.4vw, 40px); font-weight: 900; letter-spacing: .02em; line-height: 1.1;
    background: linear-gradient(100deg, #a86a12, #fde68a 30%, #fff8dc 45%, #f0c14a 60%, #a86a12); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .9)); }
  .fight-intro.go .fi-call { animation: fiCall .6s cubic-bezier(.2, 1.4, .4, 1) 1.15s both, metalSheen 2.4s ease-in-out 1.75s infinite; }
  @keyframes fiCall { from { transform: translateY(30px) scale(.8); opacity: 0; letter-spacing: .4em; } to { transform: none; opacity: 1; letter-spacing: .02em; } }
  .fi-mode { position: absolute; left: 0; right: 0; bottom: 10%; z-index: 6; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a5f3fc; }
  .fight-intro.go .fi-mode { animation: gcIn .4s ease-out 1.5s both; }
  .fi-skip { position: absolute; top: 14px; right: 14px; z-index: 7; min-height: 36px; padding: 6px 14px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800;
    color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .3); }
  @media (min-width: 601px) { .fi-ava { width: 140px; height: 140px; font-size: 60px; } .fi-vs b { font-size: 110px; } }
  @media (prefers-reduced-motion: reduce) { .fight-intro *, .fight-intro.go, .fight-intro::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
  .fight-intro { z-index: 120; }
  @media (max-width: 600px) {
    .fi-team.many .fi-fighter small { display: none; }        /* parejas en teléfono: solo avatar y nombre, nada bajo el "VS" */
    .fi-side.left { padding-right: 34px; } .fi-side.right { padding-left: 34px; }
  }

/* ===== Pasar turno: anillo sutil sincronizado con el sonido de "paso" ===== */
.seat-pod.passed .pod-ava, .who-line.passed .mini { animation: passShake .45s ease, passRing .9s ease-out; }
@keyframes passRing {
  0%   { box-shadow: 0 0 0 0 rgba(148, 197, 255, .55); }
  60%  { box-shadow: 0 0 0 9px rgba(148, 197, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(148, 197, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .seat-pod.passed .pod-ava, .who-line.passed .mini { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   JUGAR EN LÍNEA · LOBBY GALÁCTICO (nebulosas, estrellas y cristal estelar)
   ════════════════════════════════════════════════════════════════════ */
#jugar.galaxy { position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(56, 189, 248, .16), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(168, 85, 247, .14), transparent 60%),
    linear-gradient(180deg, #050816 0%, #03050f 55%, #020309 100%); }
#jugar.galaxy > .scroll { position: relative; z-index: 1; }
.gx-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gx-neb { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; opacity: .55; will-change: transform; }
.gx-neb.n1 { width: 340px; height: 260px; left: -120px; top: 40px; background: radial-gradient(closest-side, rgba(168, 85, 247, .75), rgba(88, 28, 135, .25) 60%, transparent); animation: gxDrift 26s ease-in-out infinite alternate; }
.gx-neb.n2 { width: 320px; height: 300px; right: -130px; top: 300px; background: radial-gradient(closest-side, rgba(34, 211, 238, .6), rgba(14, 116, 144, .25) 60%, transparent); animation: gxDrift 32s ease-in-out -8s infinite alternate-reverse; }
.gx-neb.n3 { width: 300px; height: 240px; left: 15%; bottom: -90px; background: radial-gradient(closest-side, rgba(240, 193, 74, .45), rgba(190, 80, 20, .2) 60%, transparent); animation: gxDrift 28s ease-in-out -14s infinite alternate; }
@keyframes gxDrift { from { transform: translate(0, 0) scale(1) rotate(0deg); } to { transform: translate(40px, -50px) scale(1.18) rotate(18deg); } }
/* Capas de estrellas: cada una se desplaza exactamente un mosaico para un bucle sin saltos */
.gx-stars { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.gx-stars.s1 { height: calc(100% + 180px); background-size: 180px 180px; animation: gxFall1 60s linear infinite;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 110px 80px, #cfe8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 150px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 160px 120px, #fde68a 50%, transparent 51%),
    radial-gradient(1px 1px at 140px 20px, #fff 50%, transparent 51%); opacity: .7; }
.gx-stars.s2 { height: calc(100% + 260px); background-size: 260px 260px; animation: gxFall2 90s linear infinite;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 200px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 200px 60px, #a5f3fc 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 130px 130px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 230px 230px, #fde68a 50%, transparent 52%); opacity: .8; }
.gx-stars.s3 { height: 100%; background-size: 340px 340px; animation: gxTwinkle 4.5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(2.2px 2.2px at 70px 90px, #fff 45%, rgba(165, 243, 252, .5) 60%, transparent 70%),
    radial-gradient(2.2px 2.2px at 260px 40px, #fff7d6 45%, rgba(240, 193, 74, .5) 60%, transparent 70%),
    radial-gradient(2.2px 2.2px at 300px 280px, #fff 45%, rgba(165, 243, 252, .5) 60%, transparent 70%),
    radial-gradient(2.2px 2.2px at 150px 250px, #fff 45%, rgba(216, 180, 254, .5) 60%, transparent 70%); }
@keyframes gxFall1 { to { transform: translate3d(0, -180px, 0); } }
@keyframes gxFall2 { to { transform: translate3d(0, -260px, 0); } }
@keyframes gxTwinkle { from { opacity: .35; } to { opacity: 1; } }
.gx-comet { position: absolute; top: 12%; left: -20%; width: 120px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(165, 243, 252, .9), #fff); box-shadow: 0 0 8px rgba(165, 243, 252, .9);
  transform: rotate(18deg); animation: gxComet 11s ease-in 3s infinite; }
@keyframes gxComet { 0% { opacity: 0; transform: translate(0, 0) rotate(18deg); } 3% { opacity: 1; } 12% { opacity: 0; transform: translate(150vw, 48vw) rotate(18deg); } 100% { opacity: 0; transform: translate(150vw, 48vw) rotate(18deg); } }

/* Cristal oscuro con filo de luz estelar (cian → dorado) para todos los paneles del lobby */
#jugar.galaxy .la-card, #jugar.galaxy .missions-card, #jugar.galaxy .gx-mode, #jugar.galaxy .pt-row {
  border: 1.5px solid transparent !important; color: #eaf4ff;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01) 45%, rgba(2, 5, 14, .6)) padding-box,
    linear-gradient(#081022, #050a17) padding-box,
    linear-gradient(135deg, rgba(103, 232, 249, .85), rgba(103, 232, 249, .1) 38%, rgba(240, 193, 74, .25) 62%, rgba(240, 193, 74, .85)) border-box !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 24px -12px rgba(34, 211, 238, .8), 0 0 20px -12px rgba(240, 193, 74, .8), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  transition: transform .18s ease, box-shadow .25s ease;
}
#jugar.galaxy .la-card { animation: gxFloat 6s ease-in-out infinite; }
#jugar.galaxy .la-tables { animation-delay: -2s; }
#jugar.galaxy .la-chat { animation-delay: -4s; }
@keyframes gxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#jugar.galaxy .la-card:active, #jugar.galaxy .gx-mode:active { transform: scale(.975); animation: none; }
@media (hover: hover) {
  #jugar.galaxy .la-card:hover, #jugar.galaxy .gx-mode:hover {
    box-shadow: 0 22px 42px rgba(0, 0, 0, .6), 0 0 32px -8px rgba(34, 211, 238, .9), 0 0 26px -8px rgba(240, 193, 74, .9) !important; }
}
#jugar.galaxy .la-text small, #jugar.galaxy .la-tables .la-text small, #jugar.galaxy .la-chat .la-text small { color: #a9c4e6; }
#jugar.galaxy .la-text b { background: linear-gradient(90deg, #fff, #cdeffd 50%, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#jugar.galaxy h1.page { background: linear-gradient(90deg, #a5f3fc, #fff 45%, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(34, 211, 238, .35)); }
#jugar.galaxy .lede { color: #9fb6d6; }

/* Crear mesa: núcleo energético estelar con órbitas */
#jugar.galaxy .la-create {
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(240, 193, 74, .28), transparent 60%) padding-box,
    radial-gradient(60% 90% at 100% 0%, rgba(34, 211, 238, .18), transparent 60%) padding-box,
    linear-gradient(160deg, #0d1a33, #060b18) padding-box,
    linear-gradient(135deg, #fde68a, rgba(240, 193, 74, .35) 40%, rgba(103, 232, 249, .7) 75%, #fde68a) border-box !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 0 34px -6px rgba(240, 193, 74, .7), 0 0 26px -10px rgba(34, 211, 238, .8) !important; }
#jugar.galaxy .la-create::after { background: linear-gradient(110deg, transparent 30%, rgba(165, 243, 252, .22) 50%, transparent 70%); }
.gx-core { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: none !important; box-shadow: none !important; }
.core-heart { position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0%, #fff4c2 18%, #f0c14a 45%, #c2410c 78%, #431407 100%);
  box-shadow: 0 0 14px 4px rgba(255, 196, 70, .75), 0 0 30px 8px rgba(255, 120, 20, .35); animation: corePulse 1.8s ease-in-out infinite; }
@keyframes corePulse { 0%, 100% { transform: scale(.92); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.25); } }
.core-orbit { position: absolute; inset: 2px; border-radius: 50%; border: 1.5px solid rgba(103, 232, 249, .75); border-left-color: transparent; border-bottom-color: transparent;
  transform: rotateX(68deg); animation: coreSpin 2.4s linear infinite; }
.core-orbit.o2 { inset: 6px; border-color: rgba(253, 230, 138, .85); border-right-color: transparent; border-top-color: transparent; transform: rotateY(68deg); animation-duration: 3.2s; animation-direction: reverse; }
.core-orbit::after { content: ""; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #a5f3fc; }
@keyframes coreSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
#jugar.galaxy .gx-core .la-plus { right: 2px; bottom: 2px; z-index: 2; background: #020617; color: #fde68a; box-shadow: 0 0 0 1.5px #fde68a, 0 0 10px rgba(240, 193, 74, .8); }
#jugar.galaxy .la-arrow { color: #fde68a; text-shadow: 0 0 10px rgba(240, 193, 74, .8); opacity: 1; }

/* Mesas públicas: radar de ondas de pulso en vivo */
.gx-radar { width: 56px !important; height: 56px !important; border-radius: 50% !important; overflow: hidden;
  background: radial-gradient(circle, rgba(16, 185, 129, .18), rgba(2, 44, 34, .55) 70%) !important;
  box-shadow: inset 0 0 0 1.5px rgba(74, 222, 128, .65), 0 0 16px -2px rgba(74, 222, 128, .55) !important; }
.gx-radar.sm { width: 26px !important; height: 26px !important; display: inline-grid; vertical-align: middle; }
.rd-ring { position: absolute; inset: 25%; border-radius: 50%; border: 1px solid rgba(74, 222, 128, .45); }
.rd-ring.r2 { inset: 8%; }
.gx-radar::before, .gx-radar::after { content: ""; position: absolute; background: rgba(74, 222, 128, .3); }
.gx-radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.gx-radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.rd-sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(74, 222, 128, .75), rgba(74, 222, 128, .18) 18%, transparent 30%); animation: coreSpin 2.6s linear infinite; }
.rd-pulse { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; margin: -50% 0 0 -50%; border-radius: 50%;
  border: 1.5px solid rgba(134, 239, 172, .9); animation: rdPulse 2.6s ease-out infinite; }
.rd-pulse.p2 { animation-delay: 1.3s; }
@keyframes rdPulse { from { transform: scale(.1); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.rd-blip { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #bbf7d0; box-shadow: 0 0 6px #4ade80, 0 0 10px #4ade80; animation: rdBlip 2.6s ease-in-out infinite; }
.rd-blip.b1 { left: 64%; top: 26%; } .rd-blip.b2 { left: 24%; top: 58%; animation-delay: .9s; } .rd-blip.b3 { left: 60%; top: 70%; animation-delay: 1.7s; }
@keyframes rdBlip { 0%, 100% { opacity: .15; transform: scale(.6); } 45% { opacity: 1; transform: scale(1.2); } }
#jugar.galaxy .la-count { color: #bbf7d0; background: rgba(16, 185, 129, .16); border-color: rgba(74, 222, 128, .6); box-shadow: 0 0 12px -2px rgba(74, 222, 128, .7); }
.gx-radar-title { display: inline-flex; align-items: center; gap: 8px; }
.gx-live { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: #86efac; text-shadow: 0 0 8px rgba(74, 222, 128, .7); }

/* Chat Global: proyector holográfico de comunicaciones */
.gx-holo { width: 56px !important; height: 56px !important; border-radius: 16px !important; overflow: visible;
  background: radial-gradient(circle at 50% 90%, rgba(34, 211, 238, .25), transparent 70%), rgba(8, 47, 73, .45) !important;
  box-shadow: inset 0 0 0 1.5px rgba(103, 232, 249, .55) !important; }
.holo-glyph { position: relative; z-index: 1; font-size: 24px; filter: drop-shadow(0 0 6px rgba(103, 232, 249, .95)) hue-rotate(160deg) saturate(1.4);
  animation: holoFlicker 4s steps(1) infinite, gxFloat 3s ease-in-out infinite; opacity: .92; }
@keyframes holoFlicker { 0%, 100% { opacity: .92; } 47% { opacity: .5; } 48% { opacity: .95; } 72% { opacity: .7; } 73% { opacity: .92; } }
.holo-beam { position: absolute; left: 16%; right: 16%; bottom: 6px; top: 8px; clip-path: polygon(40% 100%, 60% 100%, 100% 0, 0 0);
  background: linear-gradient(0deg, rgba(103, 232, 249, .55), rgba(103, 232, 249, .05)); }
.holo-base { position: absolute; left: 30%; right: 30%; bottom: 4px; height: 3px; border-radius: 3px; background: #67e8f9; box-shadow: 0 0 8px #22d3ee; }
.gx-holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(165, 243, 252, .14) 0 1px, transparent 1px 3px); }
#jugar.galaxy .gc-x { box-shadow: 0 20px 44px rgba(0, 0, 0, .65), 0 0 36px -8px rgba(34, 211, 238, .85), 0 0 24px -12px rgba(240, 193, 74, .8); }
#jugar.galaxy .gc-x::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(rgba(103, 232, 249, .06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(103, 232, 249, .06) 1px, transparent 1px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 85%); mask: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 85%); }

/* Modos de juego: insignias cósmicas */
.gx-modes-head { display: flex; flex-direction: column; gap: 1px; margin: 4px 2px 8px; }
.gx-kicker { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: #67e8f9; text-shadow: 0 0 8px rgba(34, 211, 238, .7); }
.gx-modes-head b { font-family: Fraunces, serif; font-size: 19px; color: #f8fafc; }
.gx-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.gx-mode { --gh: 190; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  padding: 12px 4px 10px; border-radius: 18px; text-align: center; cursor: pointer; }
.gx-mode.m-clasico { --gh: 200; } .gx-mode.m-cubano { --gh: 350; } .gx-mode.m-longana { --gh: 42; } .gx-mode.m-party { --gh: 300; }
.gx-badge { position: relative; width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 3px; }
.gx-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, hsl(var(--gh) 95% 65%), transparent 30%, hsl(var(--gh) 95% 75%) 50%, transparent 80%, hsl(var(--gh) 95% 65%));
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%); mask: radial-gradient(closest-side, transparent 78%, #000 80%);
  animation: coreSpin 5s linear infinite; filter: drop-shadow(0 0 5px hsl(var(--gh) 95% 60%)); }
.gx-glyph { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: #fff;
  background: radial-gradient(circle at 35% 30%, hsl(var(--gh) 90% 78%), hsl(var(--gh) 80% 42%) 55%, hsl(var(--gh) 85% 14%) 100%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .55), 0 0 16px -2px hsl(var(--gh) 95% 60%); }
.gx-mode.m-longana .gx-glyph { color: #fff7d6; font-weight: 900; text-shadow: 0 0 8px #fde68a; }
.gx-glyph .ico-domino { transform: scale(.75); }
.gx-mode b { font-size: 12.5px; font-weight: 800; line-height: 1.15; color: #f8fafc; overflow-wrap: anywhere; }
.gx-mode small { font-size: 10px; line-height: 1.2; color: #94a3b8; }
@media (max-width: 380px) {
  .gx-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) {
  .gx-badge { width: 60px; height: 60px; } .gx-glyph { width: 46px; height: 46px; font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-neb, .gx-stars, .gx-comet, #jugar.galaxy .la-card, .core-heart, .core-orbit, .rd-sweep, .rd-pulse, .rd-blip, .holo-glyph, .gx-ring { animation: none !important; }
}
/* Cabecera del chat en móviles: el ✕ nunca se sale del panel */
.gc-x .gc-online { min-width: 0; overflow: hidden; }
.gc-x .gc-online span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 430px) {
  .gc-x .gc-head { gap: 5px; padding-left: 10px; }
  .gc-x .gc-head-ico { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   CREAR MESA · CENTRO DE MANDO LEGENDARIO (cristal holográfico, luz estelar y neón dorado)
   ════════════════════════════════════════════════════════════════════ */
.end-box.sheet-box.cm-legend {
  --cm-cyan: 103, 232, 249; --cm-gold: 240, 193, 74;
  isolation: isolate; max-width: 420px; border: 1.5px solid transparent; padding: 24px 16px 16px; gap: 6px;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 52%) padding-box,
    radial-gradient(1px 1px at 78% 9%, #cff6ff 50%, transparent 52%) padding-box,
    radial-gradient(1.4px 1.4px at 90% 36%, #fde68a 50%, transparent 52%) padding-box,
    radial-gradient(1px 1px at 30% 62%, #fff 50%, transparent 52%) padding-box,
    radial-gradient(1.2px 1.2px at 64% 82%, #a5f3fc 50%, transparent 52%) padding-box,
    radial-gradient(1px 1px at 8% 92%, #fff 50%, transparent 52%) padding-box,
    radial-gradient(110% 40% at 50% 0%, rgba(var(--cm-cyan), .16), transparent 70%) padding-box,
    radial-gradient(80% 40% at 100% 100%, rgba(168, 85, 247, .14), transparent 70%) padding-box,
    linear-gradient(180deg, #081126 0%, #050a18 55%, #03060f 100%) padding-box,
    conic-gradient(from var(--cmA, 0deg), rgba(var(--cm-gold), .95), rgba(var(--cm-cyan), .25), rgba(var(--cm-cyan), .9), rgba(var(--cm-gold), .25), rgba(var(--cm-gold), .95)) border-box;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .8), 0 0 46px -10px rgba(var(--cm-cyan), .7), 0 0 40px -12px rgba(var(--cm-gold), .8);
  animation: cmEdge 9s linear infinite;
}
@property --cmA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cmEdge { to { --cmA: 360deg; } }
#modal-crear-mesa.on .cm-legend { animation: cmEdge 9s linear infinite, cmIn .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes cmIn { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
.cm-sky { position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: -1; pointer-events: none; overflow: hidden; border-radius: 22px 22px 0 0; }
.cm-sky i { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .55; animation: gxDrift 14s ease-in-out infinite alternate; }
.cm-sky i:nth-child(1) { width: 180px; height: 120px; left: -40px; top: -30px; background: rgba(var(--cm-cyan), .5); }
.cm-sky i:nth-child(2) { width: 170px; height: 130px; right: -50px; top: 10px; background: rgba(var(--cm-gold), .45); animation-delay: -5s; }
.cm-sky i:nth-child(3) { width: 140px; height: 90px; left: 35%; top: 90px; background: rgba(168, 85, 247, .4); animation-delay: -9s; }

/* Icono 3D: ficha que gira lentamente dentro de un halo con dos órbitas */
.cm-hero-ico { position: relative; width: 92px; height: 92px; display: grid; place-items: center; perspective: 400px; margin: 0 auto -2px; }
.cm-halo { position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--cm-gold), .55), rgba(var(--cm-cyan), .2) 55%, transparent 72%); animation: corePulse 2.4s ease-in-out infinite; }
.cm-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(var(--cm-cyan), .8); border-left-color: transparent; border-bottom-color: transparent; transform: rotateX(70deg); animation: coreSpin 3s linear infinite; }
.cm-orbit.o2 { inset: 8px; border-color: rgba(var(--cm-gold), .9); border-right-color: transparent; border-top-color: transparent; transform: rotateY(70deg); animation-duration: 4.2s; animation-direction: reverse; }
.cm-orbit::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(var(--cm-cyan), 1); }
.cm-tile3d { position: relative; transform-style: preserve-3d; animation: cmTileSpin 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(var(--cm-gold), .7)); }
@keyframes cmTileSpin { 0%, 100% { transform: rotateY(-24deg) rotateX(10deg) translateY(0); } 50% { transform: rotateY(24deg) rotateX(-6deg) translateY(-5px); } }
.cm-kicker { font-size: 10px; font-weight: 900; letter-spacing: .26em; color: rgb(var(--cm-cyan)); text-shadow: 0 0 10px rgba(var(--cm-cyan), .8); }
.cm-legend .end-box-title { font-family: Fraunces, serif; font-size: 27px; letter-spacing: .01em;
  background: linear-gradient(90deg, #a5f3fc, #fff 40%, #fde68a 75%, #f0c14a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(var(--cm-gold), .45)); }
.cm-legend .modal-corner-back { background: rgba(2, 6, 23, .6); border-color: rgba(var(--cm-cyan), .5); color: #a5f3fc; box-shadow: 0 0 12px -2px rgba(var(--cm-cyan), .6); }

/* Etiquetas de sección: línea de luz que se apaga hacia la derecha */
.cm-legend .cm-label { position: relative; margin: 16px 0 8px; font-size: 10.5px; font-weight: 900; letter-spacing: .18em; color: #a5f3fc; text-shadow: 0 0 8px rgba(var(--cm-cyan), .55); gap: 8px; }
.cm-legend .cm-label::after { content: ""; flex: 1; height: 1px; order: 1; background: linear-gradient(90deg, rgba(var(--cm-cyan), .55), transparent); }
.cm-legend .cm-label > .cm-balance { order: 2; padding: 2px 9px; border-radius: 99px; letter-spacing: 0; text-shadow: none; color: #e0f2fe; background: rgba(var(--cm-cyan), .1); border: 1px solid rgba(var(--cm-cyan), .35); }

/* Tarjetas inmersivas de estilo: Clásico, Cubano, Longana + Familia/Retos */
.cm-style-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cm-legend .cm-style { display: contents; }
.cm-legend .cm-style button, .cm-party-card {
  --sh: 200;
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left;
  padding: 34px 11px 12px !important; border-radius: 18px !important; color: #eaf4ff !important; cursor: pointer;
  border: 1.5px solid transparent !important;
  background:
    radial-gradient(90% 70% at 100% 0%, hsla(var(--sh), 90%, 60%, .28), transparent 65%) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01) 50%) padding-box,
    linear-gradient(#0a1428, #060b18) padding-box,
    linear-gradient(140deg, hsla(var(--sh), 95%, 70%, .75), hsla(var(--sh), 95%, 70%, .08) 45%, rgba(var(--cm-gold), .45)) border-box !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s ease, filter .25s ease;
}
.cm-legend .cm-style button[data-value="clasico"] { --sh: 200; }
.cm-legend .cm-style button[data-value="cubano"] { --sh: 352; }
.cm-legend .cm-style button[data-value="longana"] { --sh: 42; }
.cm-party-card { --sh: 305; }
/* Reflejo holográfico que recorre la tarjeta */
.cm-legend .cm-style button::before, .cm-party-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .0; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 25%, rgba(165, 243, 252, .22) 40%, rgba(253, 230, 138, .22) 50%, rgba(244, 114, 182, .18) 60%, transparent 75%);
  background-size: 250% 100%; animation: cmHolo 3.2s linear infinite;
}
@keyframes cmHolo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.cm-legend .cm-style button.on, .cm-party-card.on {
  transform: translateY(-3px);
  background:
    radial-gradient(100% 80% at 100% 0%, hsla(var(--sh), 95%, 62%, .45), transparent 65%) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 50%) padding-box,
    linear-gradient(#0d1a33, #081022) padding-box,
    linear-gradient(140deg, #fde68a, hsla(var(--sh), 95%, 70%, .9) 45%, #f0c14a) border-box !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .55), 0 0 26px -4px hsla(var(--sh), 95%, 60%, .85), 0 0 18px -6px rgba(var(--cm-gold), .9) !important;
}
.cm-legend .cm-style button.on::before, .cm-party-card.on::before { opacity: 1; }
.cm-legend .cm-style button.on::after { content: "✓"; top: 8px; right: 9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #1a1205; background: linear-gradient(135deg, #fff6cf, #f0c14a); box-shadow: 0 0 10px rgba(var(--cm-gold), .9); }
.cm-legend .cm-style button b, .cm-party-card b { font-size: 13.5px; line-height: 1.2; color: #fff; }
.cm-legend .cm-style button small, .cm-party-card small { font-size: 10.5px; line-height: 1.3; color: #9fb6d6; opacity: 1; }
/* Insignia 3D de cada estilo */
.cm-legend .cm-style .st-ico, .cm-party-card .st-ico {
  width: 44px; height: 44px; margin: 0 0 6px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; line-height: 1;
  background: radial-gradient(circle at 32% 28%, hsla(var(--sh), 95%, 82%, 1), hsla(var(--sh), 80%, 45%, 1) 55%, hsla(var(--sh), 85%, 14%, 1));
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .5), inset 0 -5px 9px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .5), 0 0 16px -3px hsla(var(--sh), 95%, 60%, .9);
  transform: perspective(200px) rotateX(10deg); transition: transform .3s ease;
}
.cm-legend .cm-style button.on .st-ico, .cm-party-card.on .st-ico { transform: perspective(200px) rotateX(0) scale(1.08); animation: cmBob 2.4s ease-in-out infinite; }
@keyframes cmBob { 50% { transform: perspective(200px) translateY(-3px) scale(1.08); } }
.cm-legend .cm-style .st-cross, .cm-legend .cm-style button.on .st-cross { color: #fff7d6; text-shadow: 0 0 8px #fde68a; font-size: 24px; }
.cm-legend .cm-style .st-ico .ico-domino { transform: scale(.8); }
.cm-legend .cm-style .st-num, .cm-party-card .st-num { position: absolute; top: 9px; left: 10px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #a5f3fc; background: rgba(2, 6, 23, .7); box-shadow: inset 0 0 0 1px rgba(var(--cm-cyan), .6); }
.cm-legend .cm-style .st-new { top: 10px; left: 33px; }
.cm-party-state { position: absolute; top: 9px; right: 9px; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .12em; color: #94a3b8; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .35); }
.cm-party-card.on .cm-party-state { color: #fff; background: linear-gradient(90deg, #db2777, #f59e0b); border-color: transparent; box-shadow: 0 0 12px rgba(236, 72, 153, .8); }
.cm-legend .cm-style-rules { margin-top: 10px; border-radius: 14px; color: #cfe3f7; background: rgba(var(--cm-cyan), .06); border: 1px solid rgba(var(--cm-cyan), .22); border-left: 3px solid rgba(var(--cm-gold), .85); }
@media (max-width: 340px) { .cm-style-deck { grid-template-columns: 1fr; } }

/* Botones tácticos iluminados: modalidad, jugadores, temporizador, meta y acceso */
.cm-legend #cm-mode, .cm-legend #cm-size, .cm-legend #cm-timer, .cm-legend #cm-goal, .cm-legend #cm-access { display: grid; gap: 7px; }
.cm-legend #cm-mode, .cm-legend #cm-access { grid-template-columns: 1fr 1fr; }
.cm-legend #cm-size, .cm-legend #cm-goal { grid-template-columns: repeat(3, 1fr); }
.cm-legend #cm-timer { grid-template-columns: repeat(4, 1fr); }
.cm-legend :is(#cm-mode, #cm-size, #cm-timer, #cm-goal, #cm-access) button {
  position: relative; min-width: 0; padding: 11px 8px; border-radius: 0 !important; text-align: center; color: #cfe3f7;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(var(--cm-cyan), .55), rgba(var(--cm-cyan), .55)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(var(--cm-cyan), .25), rgba(var(--cm-cyan), .25)) bottom left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(14, 30, 56, .95), rgba(6, 12, 26, .95)) !important;
  font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  transition: transform .15s ease, color .2s, filter .2s;
}
.cm-legend :is(#cm-mode, #cm-access) button { text-align: left; padding: 11px 12px; }
.cm-legend :is(#cm-mode, #cm-access) button b { display: block; font-size: 12.5px; color: #fff; }
.cm-legend :is(#cm-mode, #cm-access) button small { display: block; font-size: 10.5px; color: #8fa8c8; font-weight: 600; }
.cm-legend :is(#cm-mode, #cm-size, #cm-timer, #cm-goal, #cm-access) button::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(var(--cm-cyan), .2); transition: background .2s, box-shadow .2s;
}
.cm-legend :is(#cm-mode, #cm-size, #cm-timer, #cm-goal, #cm-access) button:active { transform: scale(.95); }
.cm-legend :is(#cm-mode, #cm-size, #cm-timer, #cm-goal, #cm-access) button.on {
  color: #1a1205 !important;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #fde68a, #f0c14a 55%, #c98a17) !important;
  filter: drop-shadow(0 0 8px rgba(var(--cm-gold), .75));
}
.cm-legend :is(#cm-mode, #cm-access) button.on b { color: #1a1205; }
.cm-legend :is(#cm-mode, #cm-access) button.on small { color: #4a3210; }
.cm-legend :is(#cm-mode, #cm-size, #cm-timer, #cm-goal, #cm-access) button.on::after { background: #fff; box-shadow: 0 0 8px #fff, 0 0 14px rgba(var(--cm-gold), 1); }

/* Apuesta y peaje: consola de diamantes con deslizador luminoso */
.cm-legend .bet-input-row { gap: 7px; }
.cm-legend .bet-step, .cm-legend .bet-max { height: 48px; border-radius: 14px; border: 1px solid rgba(var(--cm-cyan), .45); background: linear-gradient(180deg, rgba(14, 30, 56, .95), rgba(6, 12, 26, .95)); color: #a5f3fc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 12px -4px rgba(var(--cm-cyan), .7); }
.cm-legend .bet-step { width: 44px; font-size: 22px; }
.cm-legend .bet-max { color: #1a1205; border-color: transparent; background: linear-gradient(180deg, #fde68a, #f0c14a 60%, #c98a17); box-shadow: 0 0 14px -2px rgba(var(--cm-gold), .8); }
.cm-legend .bet-field { height: 48px; border-radius: 14px; border: 1.5px solid transparent;
  background: linear-gradient(#050b18, #050b18) padding-box, linear-gradient(90deg, rgba(var(--cm-cyan), .8), rgba(var(--cm-gold), .9)) border-box;
  box-shadow: inset 0 0 18px rgba(var(--cm-cyan), .12), 0 0 16px -6px rgba(var(--cm-gold), .8); }
.cm-legend .bet-field input { font-size: 22px; color: #fff; text-shadow: 0 0 12px rgba(var(--cm-gold), .6); }
.cm-legend .bet-field span { filter: drop-shadow(0 0 6px rgba(var(--cm-cyan), .9)); }
.cm-legend .bet-field.invalid { background: linear-gradient(#1a0508, #1a0508) padding-box, linear-gradient(90deg, #ef4444, #f97316) border-box; }
.cm-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 10px 0 0; background: transparent; cursor: pointer; --pct: 0%; }
.cm-range:disabled { opacity: .4; cursor: not-allowed; }
.cm-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, rgb(var(--cm-cyan)), #fde68a var(--pct), rgba(148, 163, 184, .18) var(--pct)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 0 12px -2px rgba(var(--cm-cyan), .6); }
.cm-range::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(148, 163, 184, .18); }
.cm-range::-moz-range-progress { height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--cm-cyan)), #fde68a); }
.cm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border: 0; border-radius: 6px; transform: rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #fff, #a5f3fc 35%, #0891b2 80%); box-shadow: 0 0 0 2px #fde68a, 0 0 16px rgba(var(--cm-cyan), 1), 0 0 26px rgba(var(--cm-gold), .7); }
.cm-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 6px; transform: rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #fff, #a5f3fc 35%, #0891b2 80%); box-shadow: 0 0 0 2px #fde68a, 0 0 16px rgba(var(--cm-cyan), 1); }
.cm-range:focus-visible { outline: 2px solid #fde68a; outline-offset: 4px; border-radius: 8px; }
.cm-range-mmr::-webkit-slider-runnable-track { background: linear-gradient(90deg, #a78bfa, #f472b6 var(--pct), rgba(148, 163, 184, .18) var(--pct)); }
.cm-range-scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: 10px; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }
.cm-legend .cm-mmr-row { flex-wrap: wrap; }
.cm-legend .cm-mmr-row .cm-range { order: 3; flex: 1 0 100%; }
.cm-legend .cm-mmr-presets button, .cm-legend .cm-toll-presets button { border-radius: 10px !important; border: 1px solid rgba(var(--cm-cyan), .4) !important; background: rgba(var(--cm-cyan), .08) !important; color: #e0f2fe !important; font-weight: 800; }
.cm-legend .cm-access-block { margin-top: 16px; padding: 12px; border-radius: 18px; border: 1.5px solid transparent;
  background: radial-gradient(90% 60% at 0% 0%, rgba(168, 85, 247, .16), transparent 65%) padding-box, linear-gradient(#071022, #050a17) padding-box, linear-gradient(140deg, rgba(167, 139, 250, .8), rgba(var(--cm-cyan), .2) 50%, rgba(var(--cm-gold), .7)) border-box; }
.cm-legend .toll-rule { border-radius: 12px; background: rgba(var(--cm-gold), .06); border: 1px dashed rgba(var(--cm-gold), .4); }
.cm-legend .cm-party { border-radius: 18px; border: 1.5px solid transparent;
  background: radial-gradient(90% 60% at 100% 0%, rgba(236, 72, 153, .2), transparent 65%) padding-box, linear-gradient(#0b0d22, #070818) padding-box, linear-gradient(140deg, rgba(244, 114, 182, .85), rgba(var(--cm-gold), .5)) border-box; }
.cm-legend .cm-summary { padding: 10px 12px; border-radius: 14px; color: #e0f2fe; background: rgba(var(--cm-cyan), .07); border: 1px solid rgba(var(--cm-cyan), .25); }

@media (min-width: 761px) {
  .end-box.sheet-box.cm-legend { max-width: 520px; padding: 28px 24px 20px; }
  .cm-style-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .end-box.sheet-box.cm-legend, #modal-crear-mesa.on .cm-legend, .cm-sky i, .cm-halo, .cm-orbit, .cm-tile3d,
  .cm-legend .cm-style button::before, .cm-party-card::before, .cm-legend .cm-style button.on .st-ico, .cm-party-card.on .st-ico { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   DORSOS EXÓTICOS 3D · losa con grosor, bisel, sombra volumétrica, barniz especular y medallón en relieve
   ════════════════════════════════════════════════════════════════════ */
.pod-backs.back-x .back, body.back-x .backs .back, .back-demo.back-x .back {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bx-edge) 80%, #fff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6), inset 1px 0 0 rgba(255, 255, 255, .22),
    inset 0 -2px 2px rgba(0, 0, 0, .55), inset -1px 0 1px rgba(0, 0, 0, .35),
    0 1px 0 color-mix(in srgb, var(--bx-edge) 55%, #000), 0 2px 0 color-mix(in srgb, var(--bx-edge) 30%, #000),
    0 4px 6px -1px rgba(0, 0, 0, .65), 0 7px 12px -4px rgba(0, 0, 0, .5), 0 0 8px var(--bx-glow) !important;
}
/* Barniz: curvatura de la superficie con luz cenital y sombra al pie */
.pod-backs.back-x .back::before, body.back-x .backs .back::before, .back-demo.back-x .back::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 26%, transparent 42%),
    linear-gradient(0deg, rgba(0, 0, 0, .32), transparent 35%);
}
/* Medallón central en alto relieve (se escala con el dorso, también en los mini dorsos de la mesa) */
.pod-backs.back-x .back > .back-crest, body.back-x .backs .back > .back-crest, .back-demo.back-x .back > .back-crest {
  display: block !important; position: absolute; z-index: 1; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; height: auto; translate: -50% -50%;
  border-radius: 50%; border: 0;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 8%, transparent 30%),
    radial-gradient(circle, var(--bx-gem) 0 40%, color-mix(in srgb, var(--bx-gem) 45%, #000) 72%),
    var(--bx-gem);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bx-edge) 85%, #fff), 0 0 0 2.5px color-mix(in srgb, var(--bx-edge) 40%, #000),
    0 2px 3px rgba(0, 0, 0, .6), inset 0 -2px 3px rgba(0, 0, 0, .45), 0 0 6px var(--bx-glow);
}
#felt .pod-backs .back > .back-crest { box-shadow: 0 0 0 .5px color-mix(in srgb, var(--bx-edge) 85%, #fff), 0 1px 1px rgba(0, 0, 0, .6) !important; }

/* Madera tallada: marco rebajado a gubia y rosetón tallado (sin brillo de gema) */
.pod-backs.bxf-wood .back, .pod-backs.bxf-wood .back, .back-demo.bxf-wood .back {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .22), inset 0 0 0 3px rgba(255, 255, 255, .14), inset 0 -2px 3px rgba(0, 0, 0, .5),
    0 1px 0 color-mix(in srgb, var(--bx-edge) 45%, #000), 0 2px 0 color-mix(in srgb, var(--bx-edge) 25%, #000), 0 5px 8px -2px rgba(0, 0, 0, .65) !important; }
.pod-backs.bxf-wood .back > .back-crest, .back-demo.bxf-wood .back > .back-crest {
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--bx-gem) 70%, #000) 0 15deg, var(--bx-gem) 15deg 30deg) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), inset 0 -1px 1px rgba(255, 255, 255, .25), 0 1px 0 rgba(255, 255, 255, .2) !important; }
.pod-backs.bxf-wood .back::before, .back-demo.bxf-wood .back::before { opacity: .55; }

/* Fibra de carbono: reflejo especular que barre el lacado */
.pod-backs.bxf-carbon .back::before, .back-demo.bxf-carbon .back::before {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .1) 52%, transparent 62%), linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 40%);
  background-size: 260% 100%, 100% 100%; animation: bxSpec 3.4s ease-in-out infinite; }
@keyframes bxSpec { 0% { background-position: 130% 0, 0 0; } 60%, 100% { background-position: -130% 0, 0 0; } }

/* Oro fundido: medallón de oro macizo con la gema engastada */
.pod-backs.bxf-gold .back > .back-crest, .back-demo.bxf-gold .back > .back-crest {
  background: radial-gradient(circle at 34% 30%, #fff 0 7%, transparent 22%), radial-gradient(circle, var(--bx-gem) 0 30%, color-mix(in srgb, var(--bx-gem) 40%, #000) 46%, #fff3cf 50%, #d49c25 64%, #7a4603 82%) !important;
  box-shadow: 0 2px 3px rgba(80, 40, 0, .7), inset 0 1px 1px rgba(255, 255, 240, .9), inset 0 -2px 2px rgba(80, 40, 0, .6), 0 0 8px rgba(255, 210, 110, .9) !important; }
.pod-backs.bxf-gold .back::before, .back-demo.bxf-gold .back::before {
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 240, .75) 46%, transparent 58%), linear-gradient(0deg, rgba(90, 50, 0, .35), transparent 40%);
  background-size: 260% 100%, 100% 100%; animation: bxSpec 4.2s ease-in-out infinite; }

/* Neón: tubo de luz en relieve alrededor del medallón */
.pod-backs.bxf-neon .back > .back-crest, .back-demo.bxf-neon .back > .back-crest {
  background: radial-gradient(circle, #04050c 0 52%, transparent 54%) !important;
  box-shadow: 0 0 0 1.5px var(--bx-edge), 0 0 6px 1px var(--bx-glow), inset 0 0 5px var(--bx-glow) !important; }

/* Obsidiana: vetas de oro que brillan y gema negra con bisel dorado */
.pod-backs.bxf-obsidian .back > .back-crest, .back-demo.bxf-obsidian .back > .back-crest {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .7) 0 8%, transparent 26%), radial-gradient(circle, #1c1b24, #000 70%) !important;
  box-shadow: 0 0 0 1.5px #f0c14a, 0 0 8px rgba(240, 193, 74, .85), 0 2px 3px rgba(0, 0, 0, .7) !important; }

/* Vista de tienda: el dorso se inclina en 3D al pasar el cursor */
.shop-grid.cat-backs .back-demo.back-x { perspective: 300px; }
.shop-grid.cat-backs .back-demo.back-x .back { transition: transform .35s cubic-bezier(.2, 1.3, .4, 1); }
@media (hover: hover) {
  .shop-grid.cat-backs .shop-item:hover .back-demo.back-x .back:first-child { transform: rotateY(-18deg) rotateX(8deg) translateY(-3px); }
  .shop-grid.cat-backs .shop-item:hover .back-demo.back-x .back:nth-child(2) { transform: rotate(8deg) rotateY(18deg) translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) { .pod-backs.back-x .back::before, .back-demo.back-x .back::before { animation: none !important; } }

/* ════════════════════════════════════════════════════════════════════
   FICHAS GOLPEADORAS · efecto del golpe final sobre el paño (dominó o tranque)
   ════════════════════════════════════════════════════════════════════ */
.strike-fx { --c1: #a5f3fc; --c2: #22d3ee; --c3: #ffffff; --dur: 2.2s;
  position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; display: grid; place-items: center; }
.strike-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.strike-stage > i { position: absolute; left: 0; top: 0; display: block; }
.fx-flash { width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c3) 85%, transparent) 0, color-mix(in srgb, var(--c2) 45%, transparent) 12%, transparent 40%);
  opacity: 0; animation: fxFlash .7s ease-out both; }
@keyframes fxFlash { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.fx-core { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, var(--c1) 38%, var(--c2) 60%, transparent 72%);
  filter: blur(1px) drop-shadow(0 0 24px var(--c2)); animation: fxCore 1.1s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fxCore { 0% { transform: scale(0); opacity: 1; } 30% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
.fx-ring { width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 6px solid var(--c1);
  box-shadow: 0 0 22px var(--c2), inset 0 0 18px var(--c2); opacity: 0; animation: fxRing 1.3s cubic-bezier(.1, .7, .3, 1) both; }
.fx-ring.r2 { animation-delay: .16s; border-color: var(--c2); }
.fx-ring.r3 { animation-delay: .32s; border-width: 3px; }
@keyframes fxRing { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(9); opacity: 0; border-width: 1px; } }
.fx-rays { width: 0; height: 0; }
.fx-rays b { position: absolute; left: -3px; top: 0; width: 6px; height: 46vmin; max-height: 320px; transform-origin: 50% 0; border-radius: 6px;
  background: linear-gradient(180deg, #fff, var(--c1) 30%, transparent); filter: drop-shadow(0 0 6px var(--c2));
  transform: rotate(var(--r)) scaleY(0); animation: fxRay .9s ease-out both; }
@keyframes fxRay { 0% { transform: rotate(var(--r)) scaleY(0); opacity: 1; } 35% { transform: rotate(var(--r)) scaleY(1); opacity: 1; } 100% { transform: rotate(var(--r)) scaleY(1.15) translateY(30px); opacity: 0; } }
.fx-rays b:nth-child(1) { --r: 0deg; --len: 100%; }
.fx-rays b:nth-child(2) { --r: 37deg; --len: 70%; }
.fx-rays b:nth-child(3) { --r: 60deg; --len: 88%; }
.fx-rays b:nth-child(4) { --r: 97deg; --len: 100%; }
.fx-rays b:nth-child(5) { --r: 120deg; --len: 70%; }
.fx-rays b:nth-child(6) { --r: 157deg; --len: 88%; }
.fx-rays b:nth-child(7) { --r: 180deg; --len: 100%; }
.fx-rays b:nth-child(8) { --r: 217deg; --len: 70%; }
.fx-rays b:nth-child(9) { --r: 240deg; --len: 88%; }
.fx-rays b:nth-child(10) { --r: 277deg; --len: 100%; }
.fx-rays b:nth-child(11) { --r: 300deg; --len: 70%; }
.fx-rays b:nth-child(12) { --r: 337deg; --len: 88%; }
.fx-sparks b { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--c1), 0 0 16px var(--c2);
  opacity: 0; animation: fxSpark 1.4s cubic-bezier(.15, .8, .3, 1) var(--dl) both; }
@keyframes fxSpark { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(calc(var(--x) * 1.6), calc(var(--y) * 1.6 + 40px)) scale(.3); opacity: 0; } }
.fx-sparks b:nth-child(1) { --x: 147px; --y: 29px; --dl: 0ms; }
.fx-sparks b:nth-child(2) { --x: 104px; --y: 37px; --dl: 40ms; }
.fx-sparks b:nth-child(3) { --x: 108px; --y: 150px; --dl: 80ms; }
.fx-sparks b:nth-child(4) { --x: 4px; --y: 130px; --dl: 120ms; }
.fx-sparks b:nth-child(5) { --x: -18px; --y: 149px; --dl: 160ms; }
.fx-sparks b:nth-child(6) { --x: -73px; --y: 82px; --dl: 0ms; }
.fx-sparks b:nth-child(7) { --x: -179px; --y: 47px; --dl: 40ms; }
.fx-sparks b:nth-child(8) { --x: -129px; --y: 14px; --dl: 80ms; }
.fx-sparks b:nth-child(9) { --x: -132px; --y: -72px; --dl: 120ms; }
.fx-sparks b:nth-child(10) { --x: -51px; --y: -98px; --dl: 160ms; }
.fx-sparks b:nth-child(11) { --x: -60px; --y: -175px; --dl: 0ms; }
.fx-sparks b:nth-child(12) { --x: 36px; --y: -125px; --dl: 40ms; }
.fx-sparks b:nth-child(13) { --x: 114px; --y: -97px; --dl: 80ms; }
.fx-sparks b:nth-child(14) { --x: 94px; --y: -58px; --dl: 120ms; }
/* Cartel del ganador */
.fx-banner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, rgba(2, 6, 23, .82), rgba(2, 6, 23, .6)); border: 1.5px solid var(--c1);
  box-shadow: 0 0 30px -4px var(--c2), inset 0 0 20px -8px var(--c2); animation: fxBanner var(--dur) cubic-bezier(.2, 1.4, .4, 1) both; }
.fx-banner small { font-size: 10px; font-weight: 900; letter-spacing: .24em; color: var(--c1); text-shadow: 0 0 8px var(--c2); }
.fx-banner b { font-family: Fraunces, serif; font-size: clamp(18px, 4.6vmin, 30px); color: #fff; text-shadow: 0 0 14px var(--c2), 0 2px 0 rgba(0, 0, 0, .6); }
.fx-banner em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #e2e8f0; opacity: .9; }
@keyframes fxBanner { 0%, 12% { opacity: 0; transform: scale(.3) rotate(-6deg); } 26% { opacity: 1; transform: scale(1.12) rotate(1deg); } 34%, 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9) translateY(-14px); } }
#felt.fx-shake { animation: fxShake .55s ease-out; }
#felt.fx-shake:has(.fx-titanes) { animation: fxShakeHard .8s ease-out; }
@keyframes fxShake { 0%, 100% { transform: none; } 15% { transform: translate(-5px, 3px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-3px, 2px); } 60% { transform: translate(2px, -1px); } }
@keyframes fxShakeHard { 0%, 100% { transform: none; } 10% { transform: translate(-10px, 6px) rotate(-.6deg); } 22% { transform: translate(10px, -6px) rotate(.6deg); } 36% { transform: translate(-7px, 4px); } 50% { transform: translate(6px, -3px); } 66% { transform: translate(-3px, 2px); } }

/* Paleta y carácter de cada golpe */
.fx-energia { --c1: #a5f3fc; --c2: #22d3ee; --c3: #e0f2fe; }
.fx-fuego { --c1: #fdba74; --c2: #f97316; --c3: #fde68a; }
.fx-fuego .fx-ring { border-width: 14px; filter: blur(3px); border-color: #fb923c; box-shadow: 0 0 40px #ea580c, inset 0 0 30px #a855f7; }
.fx-fuego .fx-ring.r2 { border-color: #c084fc; }
.fx-fuego .fx-sparks b { background: #fde68a; border-radius: 50% 50% 50% 0; }
.fx-neon { --c1: #f0abfc; --c2: #d946ef; --c3: #67e8f9; }
.fx-neon .fx-ring { border-radius: 22%; animation-name: fxRingSpin; }
.fx-neon .fx-ring.r2 { border-color: #22d3ee; box-shadow: 0 0 22px #22d3ee; }
@keyframes fxRingSpin { 0% { transform: scale(.1) rotate(0); opacity: 1; } 100% { transform: scale(8) rotate(90deg); opacity: 0; } }
.fx-rayos { --c1: #fde68a; --c2: #f0c14a; --c3: #fff7d6; }
.fx-rayos .fx-rays b { width: 5px; clip-path: polygon(50% 0, 100% 18%, 30% 38%, 100% 56%, 20% 78%, 60% 100%, 0 100%, 60% 70%, 0 52%, 70% 34%, 0 16%); width: 26px; left: -13px;
  background: linear-gradient(180deg, #fff, #fde68a 40%, #f0c14a 80%, transparent); animation: fxBolt .9s steps(1) both, fxRay .9s ease-out both; }
@keyframes fxBolt { 0%, 40%, 70% { opacity: 1; } 20%, 55% { opacity: .2; } 100% { opacity: 0; } }
.fx-meteoro { --c1: #fecaca; --c2: #f97316; --c3: #fff1f2; }
.fx-meteoro .fx-sparks b { width: 4px; height: 70px; border-radius: 4px; background: linear-gradient(180deg, transparent, #fed7aa 60%, #fff);
  box-shadow: 0 0 12px #f97316; animation: fxMeteor .9s cubic-bezier(.5, 0, .9, .4) var(--dl) both; }
@keyframes fxMeteor { 0% { transform: translate(calc(var(--x) * -1.4 - 160px), calc(-260px - var(--y) * .4)) rotate(-32deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--x) * .2), calc(var(--y) * .2)) rotate(-32deg); opacity: 0; } }
.fx-meteoro .fx-core, .fx-meteoro .fx-ring, .fx-meteoro .fx-flash, .fx-meteoro .fx-rays b { animation-delay: .55s; }
.fx-supernova { --c1: #fbcfe8; --c2: #ec4899; --c3: #ffffff; }
.fx-supernova .fx-core { width: 180px; height: 180px; margin: -90px 0 0 -90px; background: radial-gradient(circle, #fff 0 20%, #fbcfe8 35%, #a855f7 55%, transparent 70%); }
.fx-supernova .fx-rays b { width: 3px; left: -1.5px; height: 60vmin; max-height: 420px; }
.fx-titanes { --c1: #fde68a; --c2: #b45309; --c3: #fff7ed; }
.fx-titanes .fx-ring { border-width: 10px; border-color: rgba(253, 230, 138, .9); box-shadow: 0 0 30px rgba(180, 83, 9, .9), inset 0 0 26px rgba(120, 53, 15, .9); }
.fx-titanes .fx-ring.r2 { border-color: rgba(214, 211, 209, .7); filter: blur(4px); }
.fx-titanes .fx-sparks b { width: 10px; height: 10px; border-radius: 2px; background: #a8a29e; box-shadow: 0 0 6px #fde68a; }
.fx-titanes .fx-rays b { width: 3px; left: -1.5px; background: linear-gradient(180deg, #fff, #fbbf24 30%, #78350f 70%, transparent); }
.fx-vortice { --c1: #c4b5fd; --c2: #7c3aed; --c3: #ede9fe; }
.fx-vortice .fx-core { width: 160px; height: 160px; margin: -80px 0 0 -80px;
  background: radial-gradient(circle, #000 0 30%, transparent 32%), conic-gradient(from 0deg, #7c3aed, #22d3ee, #f0abfc, #7c3aed);
  -webkit-mask: radial-gradient(circle, #000 0 30%, #000 31%, #000 58%, transparent 70%); mask: radial-gradient(circle, #000 0 58%, transparent 70%);
  filter: drop-shadow(0 0 22px #7c3aed); animation: fxVortex 1.6s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes fxVortex { 0% { transform: scale(0) rotate(0); opacity: 1; } 55% { transform: scale(1.3) rotate(540deg); opacity: 1; } 70% { transform: scale(.6) rotate(700deg); } 100% { transform: scale(2.4) rotate(900deg); opacity: 0; } }
.fx-vortice .fx-sparks b { animation-name: fxSuck; }
@keyframes fxSuck { 0% { transform: translate(calc(var(--x) * 1.6), calc(var(--y) * 1.6)) scale(.6); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(calc(var(--x) * 2), calc(var(--y) * 2)) scale(.2); opacity: 0; } }
.fx-vortice .fx-ring, .fx-vortice .fx-flash, .fx-vortice .fx-rays b { animation-delay: .9s; }
.fx-guantazo { --c1: #fde047; --c2: #dc2626; --c3: #fff7ed; }
/* Dos guantes entran por los lados, chocan en el centro y salta el «¡PUM!» de cómic */
.fx-guantazo .strike-stage::before, .fx-guantazo .strike-stage::after { content: "🥊"; position: absolute; left: 0; top: 0; font-size: 92px; line-height: 1;
  margin: -46px 0 0 -46px; opacity: 0; animation: fxGloveL 1.5s cubic-bezier(.5, 0, .2, 1) both; }
.fx-guantazo .strike-stage::after { animation-name: fxGloveR; }
@keyframes fxGloveL { 0% { transform: translateX(-70vw) rotate(-20deg); opacity: 1; } 24% { transform: translateX(-38px) rotate(8deg) scale(1.15); opacity: 1; }
  36% { transform: translateX(-140px) rotate(-10deg); } 82% { transform: translateX(-150px) rotate(-4deg); opacity: 1; } 100% { transform: translateX(-210px) scale(.8); opacity: 0; } }
@keyframes fxGloveR { 0% { transform: translateX(70vw) scaleX(-1) rotate(-20deg); opacity: 1; } 24% { transform: translateX(38px) scaleX(-1) rotate(8deg) scale(1.15); opacity: 1; }
  36% { transform: translateX(140px) scaleX(-1) rotate(-10deg); } 82% { transform: translateX(150px) scaleX(-1) rotate(-4deg); opacity: 1; } 100% { transform: translateX(210px) scaleX(-1) scale(.8); opacity: 0; } }
.fx-guantazo .fx-rays::after { content: "¡PUM!"; position: absolute; left: 0; top: 0; translate: -50% calc(-50% - 112px); white-space: nowrap;
  font: 900 56px/1 Fraunces, serif; letter-spacing: .02em; color: #fde047; -webkit-text-stroke: 4px #7f1d1d; paint-order: stroke fill;
  text-shadow: 4px 5px 0 #dc2626; opacity: 0; animation: fxPum 1.3s cubic-bezier(.2, 1.6, .4, 1) .34s both; }
@keyframes fxPum { 0% { transform: scale(.2) rotate(-14deg); opacity: 1; } 30% { transform: scale(1.2) rotate(-8deg); opacity: 1; } 75% { transform: scale(1) rotate(-8deg); opacity: 1; } 100% { transform: scale(1.1) rotate(-8deg) translateY(-24px); opacity: 0; } }
.fx-guantazo .fx-rays b { width: 26px; left: -13px; clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(180deg, #fde047, #f97316 60%, transparent); filter: none; }
.fx-guantazo .fx-sparks b { width: 16px; height: 16px; border-radius: 0; background: #fde047; box-shadow: none;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.fx-guantazo .fx-ring { border-width: 8px; border-color: #fde047; box-shadow: 0 0 0 4px #dc2626, 0 0 24px #dc2626; }
.fx-guantazo .fx-core, .fx-guantazo .fx-ring, .fx-guantazo .fx-flash, .fx-guantazo .fx-rays b, .fx-guantazo .fx-sparks b { animation-delay: .34s; }
#felt.fx-shake:has(.fx-guantazo) { animation: fxShakeHard .8s ease-out .3s; }
.strike-demo.fx-guantazo .strike-stage::before, .strike-demo.fx-guantazo .strike-stage::after, .strike-demo.fx-guantazo .fx-rays::after { animation-iteration-count: infinite; animation-duration: 2.4s; }
.strike-demo.fx-guantazo .fx-rays::after { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-guantazo .strike-stage::before, .fx-guantazo .strike-stage::after, .fx-guantazo .fx-rays::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Vista en la tienda: la ficha con su efecto en bucle */
.strike-demo { position: relative; display: inline-grid; place-items: center; width: 96px; height: 96px; isolation: isolate; }
.strike-demo .strike-stage { z-index: -1; transform: scale(.32); }
.strike-demo .tile { position: relative; z-index: 1; filter: drop-shadow(0 0 10px var(--c2)); animation: fxTileSlam 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes fxTileSlam { 0% { transform: translateY(-18px) scale(1.15); } 18% { transform: translateY(0) scale(1); } 100% { transform: none; } }
.strike-demo .strike-stage *, .strike-demo .strike-stage b { animation-iteration-count: infinite !important; animation-duration: 2.4s !important; }
.strike-demo .fx-flash { display: none; }
.shop-grid.cat-strikers .strike-demo, .inv-grid.cat-strikers .strike-demo { overflow: hidden; border-radius: 16px; background: radial-gradient(circle, rgba(2, 6, 23, .2), rgba(2, 6, 23, .7)); }
.buy-preview .strike-demo { width: 150px; height: 150px; border-radius: 20px; overflow: hidden; background: radial-gradient(circle, #0b1424, #020617); }
.buy-preview .strike-demo .strike-stage { transform: scale(.5); }
@media (prefers-reduced-motion: reduce) {
  .strike-fx *, .strike-demo *, #felt.fx-shake { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .strike-fx .fx-banner { animation: none; }
}

/* Cupón de Campeón */
.coupon-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1.5px solid transparent;
  background: radial-gradient(80% 120% at 0% 0%, rgba(240, 193, 74, .3), transparent 60%) padding-box, linear-gradient(160deg, #1d1405, #0b0803) padding-box,
    linear-gradient(135deg, #fde68a, #b7791f 45%, #fff6cf 70%, #f0c14a) border-box;
  box-shadow: 0 0 26px -6px rgba(240, 193, 74, .8); }
.cpn-ticket { position: relative; flex: none; font-size: 34px; filter: drop-shadow(0 0 10px rgba(240, 193, 74, .8)); animation: cmBob 2.4s ease-in-out infinite; }
.cpn-ticket b { position: absolute; right: -6px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #1a1205; background: linear-gradient(135deg, #fff6cf, #f0c14a); }
.cpn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpn-text b { font-family: Fraunces, serif; font-size: 17px; color: #fde68a; }
.cpn-text small { font-size: 12px; color: #f1e3bf; line-height: 1.35; }
.coupon-btn { background: linear-gradient(135deg, #fff6cf, #f0c14a 45%, #b7791f) !important; color: #1a1205 !important; box-shadow: 0 0 18px rgba(240, 193, 74, .7) !important; }
.coupon-btn[hidden] { display: none !important; }
.cp-coupon { display: block; margin-top: 4px; padding: 3px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: #1a1205; background: linear-gradient(90deg, #fde68a, #f0c14a); }
.modal-btn-row:has(#buy-coupon:not([hidden])) { flex-wrap: wrap; }
#buy-coupon { order: -1; flex: 1 0 100%; margin-top: 0; }

/* ── Muelle de lanzamiento de "Crear mesa": botón principal grande, centrado y en neón dorado ── */
.end-box.sheet-box.cm-legend { --cm-px: 16px; --cm-pb: 16px; padding-bottom: var(--cm-pb); }
@media (min-width: 761px) { .end-box.sheet-box.cm-legend { --cm-px: 24px; --cm-pb: 20px; } }
.cm-dock {
  position: sticky; bottom: calc(var(--cm-pb) * -1); z-index: 5; align-self: stretch;
  margin: 14px calc(var(--cm-px) * -1) calc(var(--cm-pb) * -1); padding: 18px var(--cm-px) calc(var(--cm-pb) + 4px);
  display: flex; justify-content: center;
  background: linear-gradient(180deg, rgba(3, 6, 15, 0), rgba(3, 6, 15, .92) 30%, #03060f 60%);
  border-radius: 0 0 22px 22px;
}
.cm-dock::before { content: ""; position: absolute; left: 12%; right: 12%; top: 10px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(253, 230, 138, .7), transparent); }
.cm-legend .end-box-btn.cm-launch {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 380px; min-height: 62px; margin: 0 auto; padding: 0 28px; border: 0; border-radius: 20px;
  font-family: Fraunces, serif; font-size: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #241503;
  text-shadow: 0 1px 0 rgba(255, 246, 207, .7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 46%, rgba(0, 0, 0, 0) 52%, rgba(120, 60, 0, .18) 100%),
    linear-gradient(100deg, #b7791f 0%, #f0c14a 22%, #fff1b0 50%, #f0c14a 78%, #b7791f 100%);
  box-shadow:
    0 0 0 2px #fff3c4, 0 0 0 4px rgba(183, 121, 31, .9),
    0 8px 0 -1px #8a5a0f, 0 14px 26px rgba(0, 0, 0, .6),
    0 0 34px 2px rgba(240, 193, 74, .65), 0 0 70px -6px rgba(255, 170, 40, .55),
    inset 0 -3px 6px rgba(120, 60, 0, .35);
  transform: translateY(0); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  animation: cmLaunchGlow 2.6s ease-in-out infinite;
}
.cm-legend .end-box-btn.cm-launch::before { content: "⚡"; font-size: 20px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
.cm-legend .end-box-btn.cm-launch::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 64%); transform: translateX(-130%); animation: sheen 3s ease-in-out infinite; }
@keyframes cmLaunchGlow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.1) saturate(1.15); }
}
@media (hover: hover) { .cm-legend .end-box-btn.cm-launch:hover { transform: translateY(-2px); } }
.cm-legend .end-box-btn.cm-launch:active { transform: translateY(5px); box-shadow: 0 0 0 2px #fff3c4, 0 0 0 4px rgba(183, 121, 31, .9), 0 3px 0 -1px #8a5a0f, 0 6px 14px rgba(0, 0, 0, .6), 0 0 26px rgba(240, 193, 74, .6); }
.cm-legend .end-box-btn.cm-launch:focus-visible { outline: 3px solid #a5f3fc; outline-offset: 5px; }
.cm-legend .end-box-btn.cm-launch:disabled { opacity: 1; cursor: not-allowed; animation: none; filter: grayscale(.85) brightness(.55); box-shadow: 0 0 0 2px rgba(255, 243, 196, .4), 0 8px 0 -1px #3f3a30, 0 10px 20px rgba(0, 0, 0, .5); }
.cm-legend .end-box-btn.cm-launch:disabled::after { display: none; }
@media (max-width: 360px) { .cm-legend .end-box-btn.cm-launch { font-size: 17px; min-height: 56px; padding: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .cm-legend .end-box-btn.cm-launch, .cm-legend .end-box-btn.cm-launch::after { animation: none !important; } }

/* Fichas golpeadoras en la tienda: la ficha cabe sobre el nombre */
.shop-grid.cat-strikers .si-preview, .shop-item.elite .si-preview:has(.strike-demo) { height: 96px; }
.si-preview .strike-demo { width: 92px; height: 92px; }
.si-preview .strike-demo .tile { zoom: .72; }
.inv-grid .strike-demo .tile { zoom: .6; }
#cm-create.cm-launch:disabled { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 243, 196, .4), 0 8px 0 -1px #3f3a30, 0 10px 20px rgba(0, 0, 0, .5); }

/* ════════════════════════════════════════════════════════════════════
   LA CHAMPIONS · modalidades tocables, inscripción oficial, reglamento y avisos en vivo
   ════════════════════════════════════════════════════════════════════ */
.champ-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; padding: 0; border: 0; background: none; box-shadow: none; }
.cmo-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 12px 8px 10px; border-radius: 16px; cursor: pointer; text-align: center; color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, .35); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .35));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s; }
.cmo-card.now { border-color: rgba(240, 193, 74, .75); background: linear-gradient(180deg, rgba(240, 193, 74, .2), rgba(0, 0, 0, .35)); box-shadow: 0 0 20px -6px rgba(240, 193, 74, .7); }
.cmo-card:active { transform: scale(.97); }
@media (hover: hover) { .cmo-card:hover { transform: translateY(-2px); border-color: rgba(240, 193, 74, .9); } }
.cmo-card:focus-visible { outline: 2px solid #fde68a; outline-offset: 3px; }
.cmo-card .cmo-name { font-size: 15.5px; line-height: 1.2; }
.cmo-card:not(.now) .cmo-name { color: #e2e8f0; }
.cmo-card .cmo-sub { font-size: 11px; color: #cbd5e1; }
.cmo-go { margin-top: 4px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #1a1205; background: linear-gradient(90deg, #fde68a, #f0c14a); }
.cmo-card:not(.now) .cmo-go { color: #e0f2fe; background: rgba(56, 189, 248, .16); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .45); }
.champ-info-btn { display: block; margin: 0 auto 12px; padding: 7px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 800; color: #bae6fd; cursor: pointer;
  background: rgba(56, 189, 248, .1); border: 1px solid rgba(56, 189, 248, .45); }
.champ-info-btn:hover { background: rgba(56, 189, 248, .2); }
.ce-humans { margin: -4px 0 10px; padding: 6px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #bbf7d0; background: rgba(34, 197, 94, .1); border: 1px solid rgba(74, 222, 128, .35); }

/* Modal de inscripción */
.end-box.sheet-box.cr-box { max-width: 420px; gap: 8px; border: 1.5px solid transparent;
  background: radial-gradient(110% 40% at 50% 0%, rgba(240, 193, 74, .2), transparent 70%) padding-box, linear-gradient(180deg, #0c1528, #060a16) padding-box,
    linear-gradient(140deg, #fde68a, rgba(240, 193, 74, .25) 45%, rgba(56, 189, 248, .6) 80%, #f0c14a) border-box;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(240, 193, 74, .8); }
.cr-box.teams { background: radial-gradient(110% 40% at 50% 0%, rgba(56, 189, 248, .22), transparent 70%) padding-box, linear-gradient(180deg, #0c1528, #060a16) padding-box,
    linear-gradient(140deg, #7dd3fc, rgba(56, 189, 248, .25) 45%, rgba(240, 193, 74, .6) 80%, #7dd3fc) border-box; }
.cr-ico { font-size: 46px; line-height: 1; filter: drop-shadow(0 0 14px rgba(240, 193, 74, .7)); }
.cr-when { font-size: 10.5px; font-weight: 900; letter-spacing: .16em; color: #38bdf8; text-transform: uppercase; text-align: center; }
.cr-title { font-family: Fraunces, serif; font-size: 22px; text-align: center; }
.cr-sub { margin: 0; font-size: 12.5px; color: #cbd5e1; text-align: center; line-height: 1.4; }
.cr-slots { width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(240, 193, 74, .3); }
.cr-slots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #cbd5e1; }
.cr-slots-head b { color: #fde68a; font-size: 13px; }
.cr-slot-track { display: block; height: 8px; margin-top: 7px; border-radius: 99px; overflow: hidden; background: rgba(148, 163, 184, .18); }
.cr-slot-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #fde68a, #f97316); transition: width .4s ease; }
.cr-facts { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.cr-fact { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.cr-fact > span { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: rgba(255, 255, 255, .06); }
.cr-fact b { display: block; font-size: 13px; color: #fff; }
.cr-fact small { display: block; font-size: 11.5px; color: #94a3b8; line-height: 1.4; }
.cr-fact.human { padding: 8px; border-radius: 12px; background: rgba(34, 197, 94, .08); border: 1px solid rgba(74, 222, 128, .35); }
.cr-fact.human b { color: #bbf7d0; }
.cr-bracket { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.cr-bracket::-webkit-scrollbar { display: none; }
.cr-bracket > i { align-self: center; font-style: normal; color: #64748b; }
.crb-step { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(56, 189, 248, .08); border: 1px solid rgba(56, 189, 248, .3); }
.crb-step b { font-size: 11px; color: #e0f2fe; white-space: nowrap; }
.crb-step small { font-size: 10px; color: #94a3b8; white-space: nowrap; }
.crb-step.final { background: linear-gradient(180deg, rgba(240, 193, 74, .25), rgba(240, 193, 74, .08)); border-color: rgba(240, 193, 74, .7); }
.crb-step.final b { color: #fde68a; }
.cr-partner { width: 100%; text-align: left; }
.cr-partner[hidden] { display: none; }
.cr-remind-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 163, 184, .25); }
.cr-remind-row > span { font-size: 20px; }
.cr-remind-row .settings-text { flex: 1; min-width: 0; }
.cr-remind-row .settings-switch:disabled { opacity: .7; }
.cr-go { min-height: 52px; font-size: 16px; font-weight: 900; }
.cr-go.done { background: linear-gradient(135deg, #334155, #1e293b); color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(252, 165, 165, .4); }
.cr-go:disabled { opacity: .6; cursor: not-allowed; }

/* Reglamento oficial */
.end-box.sheet-box.ci-box { max-width: 460px; gap: 8px; border: 1.5px solid transparent;
  background: radial-gradient(110% 35% at 50% 0%, rgba(240, 193, 74, .2), transparent 70%) padding-box, linear-gradient(180deg, #0c1528, #060a16) padding-box,
    linear-gradient(140deg, #fde68a, rgba(240, 193, 74, .2) 50%, #f0c14a) border-box; }
.ci-cup { font-size: 44px; line-height: 1; filter: drop-shadow(0 0 16px rgba(240, 193, 74, .8)); }
.ci-kicker { font-size: 10px; font-weight: 900; letter-spacing: .22em; color: #fde68a; }
.ci-box .end-box-title { font-family: Fraunces, serif; text-align: center; }
.ci-list { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.ci-item { display: flex; gap: 11px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 163, 184, .22); }
.ci-num { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: rgba(240, 193, 74, .14); box-shadow: inset 0 0 0 1px rgba(240, 193, 74, .45); }
.ci-item h3 { margin: 0 0 3px; font-size: 14px; color: #fde68a; }
.ci-item p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #cbd5e1; }
.ci-item p b { color: #fff; }
.ci-item.prize { border-color: rgba(240, 193, 74, .6); background: linear-gradient(160deg, rgba(240, 193, 74, .14), rgba(255, 255, 255, .02)); box-shadow: 0 0 22px -10px rgba(240, 193, 74, .9); }

/* Avisos en vivo */
.champ-notify { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); z-index: 130; width: min(440px, calc(100% - 24px)); translate: -50% 0;
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 18px; border: 1.5px solid transparent;
  background: linear-gradient(160deg, #13203a, #070c19) padding-box, linear-gradient(135deg, #fde68a, rgba(56, 189, 248, .6), #f0c14a) border-box;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 26px -6px rgba(240, 193, 74, .8); }
.champ-notify[hidden] { display: none; }
.champ-notify.in { animation: cnIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes cnIn { from { opacity: 0; transform: translateY(-30px) scale(.95); } to { opacity: 1; transform: none; } }
.champ-notify.important { box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 34px -2px rgba(240, 193, 74, 1); }
.champ-notify.important .cn-ico { animation: cmBob 1.2s ease-in-out infinite; }
.cn-ico { flex: none; font-size: 28px; }
.cn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-body b { font-size: 14px; color: #fde68a; line-height: 1.25; }
.cn-body small { font-size: 12px; color: #cbd5e1; line-height: 1.35; }
.cn-go { flex: none; padding: 8px 12px; border-radius: 12px; border: 0; font-size: 12.5px; font-weight: 900; color: #1a1205; background: linear-gradient(135deg, #fff6cf, #f0c14a 50%, #c98a17); cursor: pointer; }
.cn-close { flex: none; width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 1px solid rgba(148, 163, 184, .4); background: rgba(255, 255, 255, .05); color: #94a3b8; cursor: pointer; }
@media (max-width: 380px) { .champ-notify { flex-wrap: wrap; } .cn-go { order: 3; flex: 1 0 100%; } }
@media (prefers-reduced-motion: reduce) { .champ-notify.in, .champ-notify.important .cn-ico { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   SÚPER TIENDA GALÁCTICA · nebulosas, cristal esmerilado y luz estelar dorada
   ════════════════════════════════════════════════════════════════════ */
#tienda.galaxy-shop { position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 50% at 50% -6%, rgba(240, 193, 74, .14), transparent 60%),
    radial-gradient(90% 50% at 100% 60%, rgba(168, 85, 247, .14), transparent 60%),
    linear-gradient(180deg, #060818 0%, #04050f 55%, #020309 100%); }
#tienda.galaxy-shop > .scroll { position: relative; z-index: 1; }
#tienda .gx-neb.n1 { background: radial-gradient(closest-side, rgba(240, 193, 74, .5), rgba(146, 64, 14, .2) 60%, transparent); }

/* Cabecera de cristal */
#tienda .shop-hero { border: 1.5px solid transparent; border-radius: 22px;
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(56, 189, 248, .22), transparent 60%) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01) 50%, rgba(2, 5, 14, .6)) padding-box,
    linear-gradient(#0a1124, #060a17) padding-box,
    linear-gradient(135deg, rgba(253, 230, 138, .9), rgba(240, 193, 74, .15) 40%, rgba(103, 232, 249, .5) 75%, rgba(253, 230, 138, .8)) border-box;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .55), 0 0 30px -12px rgba(240, 193, 74, .9); }
#tienda .shop-hero h1.page { background: linear-gradient(90deg, #fff6cf, #fde68a 45%, #f0c14a 70%, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(240, 193, 74, .35)); }
#tienda .shop-kicker { color: #67e8f9; text-shadow: 0 0 8px rgba(34, 211, 238, .6); }

/* Panel permanente: recargas + VIP */
.shop-power { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 14px; }
@media (min-width: 601px) { .shop-power { grid-template-columns: 1.6fr 1fr; } }
.sp-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 20px; border: 1.5px solid transparent; }
.sp-dia { background:
    radial-gradient(90% 120% at 0% 0%, rgba(240, 193, 74, .32), transparent 60%) padding-box,
    linear-gradient(160deg, #1f1606, #0b0803 70%) padding-box,
    linear-gradient(135deg, #fff1b0, #f0c14a 30%, #b7791f 60%, #fde68a) border-box;
  box-shadow: 0 0 30px -4px rgba(240, 193, 74, .75), 0 16px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 246, 207, .25);
  animation: spGlow 3.2s ease-in-out infinite; }
@keyframes spGlow { 50% { box-shadow: 0 0 44px 0 rgba(240, 193, 74, .95), 0 16px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 246, 207, .25); } }
.sp-vip { background:
    radial-gradient(90% 120% at 100% 0%, rgba(168, 85, 247, .35), transparent 60%) padding-box,
    linear-gradient(160deg, #170a26, #08040f 70%) padding-box,
    linear-gradient(135deg, #f0abfc, #a855f7 40%, #fde68a 80%, #f0abfc) border-box;
  box-shadow: 0 0 26px -6px rgba(192, 132, 252, .8), 0 16px 30px rgba(0, 0, 0, .55); }
.sp-vip.active { background: radial-gradient(90% 120% at 100% 0%, rgba(74, 222, 128, .25), transparent 60%) padding-box, linear-gradient(160deg, #06180e, #030a06 70%) padding-box, linear-gradient(135deg, #86efac, #22c55e 50%, #fde68a) border-box; }
.sp-shine { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite; }
.sp-kicker { font-size: 10px; font-weight: 900; letter-spacing: .18em; color: #fde68a; text-shadow: 0 0 8px rgba(240, 193, 74, .8); }
.sp-vip .sp-kicker { color: #f0abfc; text-shadow: 0 0 8px rgba(217, 70, 239, .8); }
.sp-title { font-family: Fraunces, serif; font-size: 19px; color: #fff; line-height: 1.15; }
.sp-sub { font-size: 12px; color: #d8c7ee; line-height: 1.35; }
.sp-vip.active .sp-sub { color: #bbf7d0; font-weight: 700; }
.sp-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 6px; }
.sp-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 4px 9px; border-radius: 14px; cursor: pointer; color: #fff;
  border: 1px solid rgba(253, 230, 138, .45); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 6px 12px rgba(0, 0, 0, .45); transition: transform .15s ease, box-shadow .2s; }
.sp-pack b { font-family: Fraunces, serif; font-size: 18px; line-height: 1; white-space: nowrap; }
.sp-pack b small { font-size: 12px; }
.sp-pack > span { padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 900; color: #1a1205; background: linear-gradient(135deg, #fff6cf, #f0c14a 55%, #c98a17); }
.sp-pack.popular { border-color: #fde68a; background: linear-gradient(180deg, rgba(240, 193, 74, .32), rgba(0, 0, 0, .3)); box-shadow: 0 0 18px -2px rgba(240, 193, 74, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.sp-pack em { position: absolute; top: -9px; left: 50%; translate: -50% 0; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 9px; font-weight: 900; white-space: nowrap; color: #fff; background: linear-gradient(90deg, #ef4444, #f97316); box-shadow: 0 0 10px rgba(249, 115, 22, .8); }
.sp-pack:active { transform: scale(.95); }
@media (hover: hover) { .sp-pack:hover { transform: translateY(-3px); box-shadow: 0 0 22px rgba(240, 193, 74, .8), 0 10px 18px rgba(0, 0, 0, .5); } }
.sp-vip-btn { margin-top: auto; padding: 11px 12px; border-radius: 14px; border: 0; cursor: pointer; font-size: 13.5px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #c026d3, #7c3aed 55%, #4c1d95); box-shadow: 0 0 18px -2px rgba(192, 132, 252, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sp-vip-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .sp-dia, .sp-shine { animation: none; } }

/* Pestañas: cuadrícula fluida, ninguna se corta (4 por fila en móvil, hasta todas en una fila en escritorio) */
#tienda .shop-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; overflow: visible; margin: 0 0 4px; padding: 0; }
@media (min-width: 601px) { #tienda .shop-tabs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
#tienda .shop-tabs button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px 8px; border-radius: 14px;
  font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: anywhere; color: #dbe7f6;
  border: 1px solid rgba(148, 163, 184, .28); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(2, 5, 14, .55));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px rgba(0, 0, 0, .35);
  transition: transform .15s ease, border-color .2s, box-shadow .2s; }
#tienda .shop-tabs button > span[aria-hidden] { font-size: 19px; line-height: 1; }
@media (hover: hover) { #tienda .shop-tabs button:hover { transform: translateY(-2px); border-color: rgba(253, 230, 138, .6); } }
#tienda .shop-tabs button.on { color: #1a1205; border-color: transparent; background: linear-gradient(180deg, #fff1b0, #f0c14a 55%, #b7791f);
  box-shadow: 0 0 16px -2px rgba(240, 193, 74, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
#tienda .shop-tabs .recharge-tab { border-color: rgba(125, 211, 252, .55); background: linear-gradient(180deg, rgba(125, 211, 252, .2), rgba(2, 5, 14, .55)); }
#tienda .shop-tabs .recharge-tab.on { color: #052033; background: linear-gradient(180deg, #bae6fd, #38bdf8); box-shadow: 0 0 16px -2px rgba(56, 189, 248, .9); }
#tienda .shop-tabs .elite-tab { border-color: rgba(253, 230, 138, .6); background: linear-gradient(180deg, rgba(240, 193, 74, .22), rgba(2, 5, 14, .55)); }
#tienda .shop-cat-desc { margin-top: 10px; color: #9fb6d6; }

/* Tarjetas de artículos: cristal esmerilado, filo de luz estelar y relieve 3D */
#tienda .shop-grid { perspective: 900px; }
#tienda .shop-item:not(.rc-pack) { border: 1.5px solid transparent !important;
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(255, 255, 255, .08), transparent 60%) padding-box,
    linear-gradient(180deg, rgba(14, 22, 44, .85), rgba(5, 8, 20, .92)) padding-box,
    linear-gradient(150deg, rgba(253, 230, 138, .6), rgba(103, 232, 249, .12) 40%, rgba(253, 230, 138, .1) 70%, rgba(240, 193, 74, .5)) border-box !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -10px 18px -10px rgba(0, 0, 0, .7) !important;
  transform-style: preserve-3d; transition: transform .25s cubic-bezier(.2, 1.3, .4, 1), box-shadow .25s ease; }
#tienda .shop-item.rar-epic:not(.rc-pack) { background:
    radial-gradient(110% 60% at 50% 0%, rgba(192, 132, 252, .18), transparent 60%) padding-box,
    linear-gradient(180deg, rgba(20, 14, 44, .88), rgba(7, 5, 20, .94)) padding-box,
    linear-gradient(150deg, rgba(216, 180, 254, .8), rgba(168, 85, 247, .15) 45%, rgba(216, 180, 254, .6)) border-box !important; }
#tienda .shop-item.rar-legend:not(.rc-pack), #tienda .shop-item.elite:not(.rc-pack) { background:
    radial-gradient(110% 60% at 50% 0%, rgba(240, 193, 74, .22), transparent 60%) padding-box,
    linear-gradient(180deg, rgba(30, 20, 6, .9), rgba(10, 7, 2, .94)) padding-box,
    linear-gradient(150deg, #fff1b0, rgba(240, 193, 74, .25) 40%, #f0c14a 75%, #fde68a) border-box !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .55), 0 0 22px -8px rgba(240, 193, 74, .9), inset 0 1px 0 rgba(255, 246, 207, .2) !important; }
#tienda .shop-item.equipped { box-shadow: 0 0 0 2px #4ade80, 0 0 18px -2px rgba(74, 222, 128, .7), 0 14px 26px rgba(0, 0, 0, .55) !important; }
@media (hover: hover) {
  #tienda .shop-item:not(.rc-pack):hover { transform: translateY(-4px) rotateX(5deg); box-shadow: 0 22px 34px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(240, 193, 74, .9), inset 0 1px 0 rgba(255, 255, 255, .14) !important; }
}
#tienda .shop-item:not(.rc-pack):active { transform: scale(.98); }
#tienda .si-preview { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); transform: translateZ(18px); }
#tienda .si-name { color: #f1f5f9; }
@media (min-width: 601px) { #tienda .shop-grid:not(.rc-packs):not(.cat-taunts) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { #tienda .shop-item { transition: none; } }

/* Equipar al instante (sala y mesa) */
.equip-quick { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 99px; cursor: pointer; font-size: 12.5px; font-weight: 800; color: #fde68a;
  border: 1px solid rgba(240, 193, 74, .55); background: linear-gradient(180deg, rgba(240, 193, 74, .18), rgba(0, 0, 0, .3)); box-shadow: 0 0 12px -4px rgba(240, 193, 74, .8); }
.equip-quick.icon { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 16px; flex: none; }
#sala .jugar-head { gap: 8px; }
#sala .jugar-head .equip-quick { margin-left: auto; }
.end-box.sheet-box.equip-box { max-width: 460px; gap: 6px; }
.equip-box .end-box-title { font-family: Fraunces, serif; }
.equip-slot { width: 100%; text-align: left; }
.equip-slot .inventory-card { margin: 4px 0 0; }
.equip-slot .vitrina-head .pw-btn { display: none; }

/* ════════════════════════════════════════════════════════════════════
   TURNO ACTIVO · aureola de fuego y neón, cartel y modo "pasado" (tiempo acelerado)
   ════════════════════════════════════════════════════════════════════ */
#felt .seat-pod.turn { z-index: 6; border-color: rgba(253, 230, 138, .95) !important;
  background: linear-gradient(180deg, rgba(60, 38, 6, .82), rgba(10, 14, 26, .82)) !important;
  box-shadow: 0 0 0 1.5px rgba(253, 230, 138, .55), 0 0 26px 2px rgba(255, 170, 40, .6), 0 0 54px -6px rgba(255, 110, 20, .55), 0 8px 18px rgba(0, 0, 0, .5) !important;
  animation: turnPodPulse 1.2s ease-in-out infinite; }
@keyframes turnPodPulse { 50% { box-shadow: 0 0 0 2px rgba(253, 230, 138, .9), 0 0 36px 6px rgba(255, 170, 40, .75), 0 0 70px -4px rgba(255, 110, 20, .7), 0 8px 18px rgba(0, 0, 0, .5); } }
/* Aureola giratoria alrededor del avatar */
.turn-aura { position: absolute; inset: -7px; z-index: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, #fff7d6, #f0c14a, #ff6a00, #ff2d55, #f0c14a, #67e8f9, #fff7d6);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 76%); mask: radial-gradient(closest-side, transparent 72%, #000 76%);
  filter: drop-shadow(0 0 6px rgba(255, 150, 30, .95)) drop-shadow(0 0 12px rgba(255, 90, 0, .7));
  animation: coreSpin 1.6s linear infinite; }
.turn-aura::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 190, 70, .8); animation: turnRing 1.2s ease-out infinite; }
@keyframes turnRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
#felt .seat-pod.turn .pod-ava { position: relative; z-index: 1; box-shadow: 0 0 0 2px #1a1205, 0 0 14px rgba(255, 190, 70, .9) !important; }
/* Cartel "¡TU TURNO!" / "▶ JUEGA" */
.pod-turn-flag { position: absolute; left: 50%; top: -13px; translate: -50% 0; z-index: 7; padding: 2px 10px; border-radius: 99px; white-space: nowrap; pointer-events: none;
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em; color: #1a1205;
  background: linear-gradient(90deg, #fff1b0, #f0c14a 50%, #ff8a1f); box-shadow: 0 0 14px rgba(255, 160, 40, .9), 0 2px 6px rgba(0, 0, 0, .5);
  animation: turnFlag 1.2s ease-in-out infinite; }
#felt .seat-pod.top .pod-turn-flag { top: auto; bottom: -13px; }
@keyframes turnFlag { 50% { transform: scale(1.08); } }
#felt .seat-pod.me.turn .pod-turn-flag { font-size: 11.5px; padding: 3px 12px; }
/* Pasado: aureola roja más rápida y cartel de urgencia */
#felt .seat-pod.turn-fast { border-color: rgba(252, 165, 165, .95) !important;
  background: linear-gradient(180deg, rgba(70, 10, 10, .85), rgba(10, 14, 26, .82)) !important;
  box-shadow: 0 0 0 1.5px rgba(252, 165, 165, .6), 0 0 26px 2px rgba(239, 68, 68, .65), 0 8px 18px rgba(0, 0, 0, .5) !important;
  animation: turnPodFast .45s ease-in-out infinite; }
@keyframes turnPodFast { 50% { box-shadow: 0 0 0 2px rgba(252, 165, 165, .95), 0 0 38px 6px rgba(239, 68, 68, .85), 0 8px 18px rgba(0, 0, 0, .5); } }
.seat-pod.turn-fast .turn-aura { background: conic-gradient(from 0deg, #fecaca, #ef4444, #7f1d1d, #f97316, #fecaca); animation-duration: .6s;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, .95)); }
.seat-pod.turn-fast .turn-aura::after { border-color: rgba(248, 113, 113, .9); animation-duration: .5s; }
.seat-pod.turn-fast .pod-turn-flag { color: #fff; background: linear-gradient(90deg, #ef4444, #f97316); box-shadow: 0 0 14px rgba(239, 68, 68, .9); animation-duration: .45s; }
/* Tu atril también avisa */
#mesa .hand-zone.rack.my-turn { box-shadow: 0 0 0 2px rgba(253, 230, 138, .8), 0 0 30px -2px rgba(255, 170, 40, .75), 0 -6px 24px rgba(0, 0, 0, .4) !important; animation: rackTurn 1.4s ease-in-out infinite; }
@keyframes rackTurn { 50% { box-shadow: 0 0 0 2.5px rgba(253, 230, 138, 1), 0 0 44px 2px rgba(255, 170, 40, .9), 0 -6px 24px rgba(0, 0, 0, .4); } }
#mesa .hand-zone.rack.my-turn-fast { box-shadow: 0 0 0 2px rgba(252, 165, 165, .9), 0 0 30px -2px rgba(239, 68, 68, .85) !important; animation: none; }
/* Barra de tiempo: más gruesa en tu turno y roja con rayas en movimiento si estás pasado */
#mesa .hand-zone.rack.my-turn .rack-timer { height: 5px; }
.rack-timer.fast { height: 6px !important; }
.rack-timer.fast i { background: repeating-linear-gradient(45deg, #ef4444 0 8px, #f97316 8px 16px) !important; background-size: 22px 22px !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, .9) !important; animation: fastStripes .4s linear infinite; }
@keyframes fastStripes { to { background-position: 22px 0; } }
.tc-timer.fast { color: #fff !important; background: linear-gradient(90deg, #ef4444, #f97316) !important; box-shadow: 0 0 12px rgba(239, 68, 68, .8); }
.tc-timer.fast::before { content: "⚡"; margin-right: 2px; }
@media (prefers-reduced-motion: reduce) {
  #felt .seat-pod.turn, #felt .seat-pod.turn-fast, .turn-aura, .turn-aura::after, .pod-turn-flag, #mesa .hand-zone.rack.my-turn, .rack-timer.fast i { animation: none !important; }
}
/* En los asientos laterales el cartel se ancla hacia dentro del paño para no cortarse */
#felt .seat-pod.left .pod-turn-flag { left: 0; translate: 0 0; }
#felt .seat-pod.right .pod-turn-flag { left: auto; right: 0; translate: 0 0; }

/* ════════════════════════════════════════════════════════════════════
   LA CHAMPIONS · botones prémium de modalidad (Todos contra Todos / Parejas 2v2)
   ════════════════════════════════════════════════════════════════════ */
.champ-mode { gap: 10px; perspective: 700px; }
.cmo-card { --m1: #fde68a; --m2: #f0c14a; --m3: #8a5a10; --glow: 240, 193, 74;
  position: relative; isolation: isolate; overflow: hidden; gap: 4px; padding: 14px 10px 12px; border-radius: 20px; border: 1.5px solid transparent !important;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px) padding-box,
    radial-gradient(120% 70% at 50% 0%, rgba(var(--glow), .28), transparent 65%) padding-box,
    linear-gradient(180deg, #141c30, #070b16 80%) padding-box,
    linear-gradient(145deg, var(--m1), var(--m2) 30%, var(--m3) 55%, var(--m2) 80%, var(--m1)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 18px -8px rgba(0, 0, 0, .8),
    0 6px 0 -1px color-mix(in srgb, var(--m3) 70%, #000), 0 12px 24px rgba(0, 0, 0, .6), 0 0 22px -8px rgba(var(--glow), .9) !important;
  transform-style: preserve-3d; transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s ease, filter .2s; }
.cmo-card[data-champ-mode="teams"] { --m1: #bae6fd; --m2: #38bdf8; --m3: #0c4a6e; --glow: 56, 189, 248; }
.cmo-card.now { animation: cmoNow 2.8s ease-in-out infinite; }
@keyframes cmoNow { 50% { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -10px 18px -8px rgba(0, 0, 0, .8), 0 6px 0 -1px color-mix(in srgb, var(--m3) 70%, #000), 0 12px 24px rgba(0, 0, 0, .6), 0 0 34px -2px rgba(var(--glow), 1); } }
.cmo-sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-130%); animation: sheen 3.8s ease-in-out infinite; }
.cmo-card:not(.now) .cmo-sheen { animation-delay: 1.9s; }
.cmo-card .cmo-kicker { font-size: 9.5px; letter-spacing: .2em; color: var(--m1); text-shadow: 0 0 8px rgba(var(--glow), .9); }
.cmo-medal { width: 54px; height: 54px; margin: 4px 0 2px; border-radius: 50%; display: grid; place-items: center; font-size: 27px; line-height: 1;
  background: radial-gradient(circle at 34% 28%, #fff, var(--m1) 22%, var(--m2) 52%, var(--m3) 92%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .8), inset 0 -5px 8px rgba(0, 0, 0, .45), 0 0 0 3px rgba(0, 0, 0, .45), 0 0 0 4.5px var(--m2), 0 6px 14px rgba(0, 0, 0, .6), 0 0 22px rgba(var(--glow), .8);
  transform: translateZ(20px); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.cmo-card .cmo-name { font-family: Fraunces, serif; font-size: 17px; font-weight: 800; line-height: 1.15; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff 20%, var(--m1) 60%, var(--m2)); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.cmo-card .cmo-sub { font-size: 11px; font-weight: 600; color: #cbd5e1; }
.cmo-card .cmo-go { margin-top: 6px; padding: 5px 14px; font-size: 11.5px; letter-spacing: .02em; color: #1a1205 !important;
  background: linear-gradient(180deg, #fff, var(--m1) 40%, var(--m2)) !important; box-shadow: 0 3px 0 color-mix(in srgb, var(--m3) 80%, #000), 0 0 14px rgba(var(--glow), .7) !important; }
.cmo-card[data-champ-mode="teams"] .cmo-go { color: #04263a !important; }
@media (hover: hover) {
  .cmo-card:hover { transform: translateY(-4px) rotateX(6deg); }
  .cmo-card:hover .cmo-medal { transform: translateZ(30px) scale(1.08) rotate(-6deg); }
}
.cmo-card:active { transform: translateY(4px) scale(.98); animation: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -6px 12px -6px rgba(0, 0, 0, .8), 0 2px 0 -1px color-mix(in srgb, var(--m3) 70%, #000), 0 6px 12px rgba(0, 0, 0, .6), 0 0 30px rgba(var(--glow), 1) !important; }
.cmo-card:focus-visible { outline: 2px solid var(--m1); outline-offset: 3px; }

/* Selector de la demo: interruptor segmentado de metal pulido */
.champ-demo-modes { gap: 0; padding: 4px; border-radius: 16px; background: linear-gradient(180deg, #050912, #0d1526); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(148, 163, 184, .25); }
.champ-demo-modes button { position: relative; padding: 10px 6px; border-radius: 12px; border: 0 !important; background: transparent !important; color: #94a3b8; font-size: 12.5px; font-weight: 800; transition: color .2s, background .25s, box-shadow .25s, transform .12s; }
.champ-demo-modes button.on { color: #1a1205 !important; background: linear-gradient(180deg, #fff6cf, #f0c14a 55%, #b7791f) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 #7a4f0c, 0 0 16px rgba(240, 193, 74, .7); }
.champ-demo-modes button[data-demo-mode="teams"].on { color: #04263a !important; background: linear-gradient(180deg, #e0f2fe, #38bdf8 55%, #0369a1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 #0c4a6e, 0 0 16px rgba(56, 189, 248, .7); }
.champ-demo-modes button:active { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .cmo-card.now, .cmo-sheen { animation: none; } }
.champ-mode { align-items: stretch; }
.cmo-card .cmo-go { margin-top: auto; }
@media (max-width: 360px) { .cmo-medal { width: 46px; height: 46px; font-size: 23px; } .cmo-card .cmo-name { font-size: 15px; } .cmo-card { padding: 12px 6px 10px; } }

/* ════════════════════════════════════════════════════════════════════
   EMOJIS DE LA MESA · medallones nítidos y animados por familia
   ════════════════════════════════════════════════════════════════════ */
.emo-medal { position: relative; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .06) 45%, rgba(0, 0, 0, .25) 100%), linear-gradient(160deg, #24365a, #0b1424);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -3px 6px rgba(0, 0, 0, .5), 0 0 0 1.5px rgba(253, 230, 138, .55), 0 4px 10px rgba(0, 0, 0, .5); }
.emo-medal > span { display: block; font-size: 1em; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emoji-demo.emo-medal { font-size: 34px; }
.inv-prev .emoji-demo.emo-medal { font-size: 22px; }
/* Animación de cada familia */
.emo-shake > span { animation: emoShake 1.4s ease-in-out infinite; }
.emo-tilt > span { animation: emoTilt 2s ease-in-out infinite; }
.emo-pulse > span { animation: emoPulse 1.3s ease-in-out infinite; }
.emo-bounce > span { animation: emoBounce 1.1s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.emo-float > span { animation: emoFloat 2.4s ease-in-out infinite; }
.emo-wave > span, .emo-wave { display: inline-block; transform-origin: 70% 80%; animation: emoWave 1.6s ease-in-out infinite; }
@keyframes emoShake { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg) scale(1.08); } 20%, 40% { transform: rotate(12deg) scale(1.08); } }
@keyframes emoTilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-2px); } }
@keyframes emoPulse { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 45% { transform: scale(.94); } }
@keyframes emoBounce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-18%) scale(1.1, .95); } 60% { transform: translateY(0) scale(.95, 1.06); } }
@keyframes emoFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12%) rotate(4deg); } }
@keyframes emoWave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(18deg); } 20%, 40% { transform: rotate(-10deg); } }
.shop-grid.cat-emojis .si-preview { height: 72px; }
/* Barra rápida de la mesa */
.reacts .react-emo, .reacts .react-emo-more { position: relative; display: grid; place-items: center; font-size: 22px; }
.reacts .react-emo-more b { position: absolute; right: -3px; bottom: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
  font-size: 10px; font-weight: 900; color: #1a1205; background: linear-gradient(135deg, #fff6cf, #f0c14a); box-shadow: 0 0 6px rgba(240, 193, 74, .8); }
/* Panel de emojis del chat de la mesa */
.chat-pane.emojis { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; align-content: start; }
.chat-pane.emojis .emo-group-title { grid-column: 1 / -1; margin: 6px 0 -2px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fde68a; }
.chat-pane.emojis .emo-btn { width: auto !important; height: auto !important; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 14px; font-size: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .25)); border: 1px solid rgba(148, 163, 184, .25); cursor: pointer; transition: transform .12s ease, border-color .2s; }
.chat-pane.emojis .emo-btn:active { transform: scale(.9); }
@media (hover: hover) { .chat-pane.emojis .emo-btn:hover { border-color: rgba(253, 230, 138, .7); transform: translateY(-2px); } }
.chat-pane.emojis .emo-btn small { font-size: 9.5px; line-height: 1.15; color: #cbd5e1; text-align: center; overflow-wrap: anywhere; }
.chat-pane.emojis .emo-missing { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; color: #94a3b8; text-align: center; }
.chat-pane.emojis .emo-go-shop { grid-column: 1 / -1; justify-self: center; }
@media (prefers-reduced-motion: reduce) { .emo-medal > span, .emo-wave { animation: none !important; } }

/* Nombre oficial del equipo (Parejas 2v2) */
.cr-team { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 10px; text-align: left; }
.cr-team-head { display: flex; align-items: baseline; gap: 4px; font-size: 13px; color: #fde68a; }
.cr-team-count { margin-left: auto; font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.cr-team-field { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; border: 1.5px solid transparent;
  background: linear-gradient(#050b18, #050b18) padding-box, linear-gradient(90deg, rgba(56, 189, 248, .8), rgba(240, 193, 74, .9)) border-box;
  box-shadow: inset 0 0 16px rgba(56, 189, 248, .1); }
.cr-team-field input { flex: 1; min-width: 0; height: 46px; border: 0; outline: none; background: transparent; color: #fff; font-family: Fraunces, serif; font-size: 17px; font-weight: 700; }
.cr-team-field:focus-within { box-shadow: 0 0 0 3px rgba(240, 193, 74, .25), inset 0 0 16px rgba(56, 189, 248, .15); }
.cr-team-field:has(input.invalid) { background: linear-gradient(#1a0508, #1a0508) padding-box, linear-gradient(90deg, #ef4444, #f97316) border-box; }
.cr-team-field:has(input.valid) { background: linear-gradient(#05140b, #05140b) padding-box, linear-gradient(90deg, #22c55e, #fde68a) border-box; }
.cr-team-msg { font-size: 11.5px; color: #94a3b8; line-height: 1.35; }
.cr-team-msg.err { color: #fca5a5; }
.cr-team-msg.ok { color: #86efac; font-weight: 700; }
.cr-team-badge { align-self: center; padding: 6px 14px; border-radius: 99px; font-family: Fraunces, serif; font-size: 15px; font-weight: 800; color: #1a1205;
  background: linear-gradient(135deg, #fff6cf, #f0c14a 55%, #c98a17); box-shadow: 0 0 16px rgba(240, 193, 74, .7); }
.cr-team-badge[hidden] { display: none; }
.cm-side .cm-pair { display: block; font-size: 10px; color: #94a3b8; line-height: 1.2; }

/* ════════════════════════════════════════════════════════════════════
   RANKINGS · pestañas y SALÓN DE LA FAMA de La Champions (galaxia, oro y platino)
   ════════════════════════════════════════════════════════════════════ */
.lb-main-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; padding: 4px; border-radius: 16px;
  background: linear-gradient(180deg, #050912, #0d1526); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(240, 193, 74, .3); }
.lb-main-tabs button { padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; color: #94a3b8; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .25s, color .2s, box-shadow .25s; }
.lb-main-tabs button.on { color: #1a1205; background: linear-gradient(180deg, #fff6cf, #f0c14a 55%, #b7791f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 #7a4f0c, 0 0 16px rgba(240, 193, 74, .6); }
.lb-global[hidden], .lb-legends[hidden] { display: none; }

.lb-legends { position: relative; isolation: isolate; overflow: hidden; padding: 18px 12px 16px; border-radius: 24px; border: 1.5px solid transparent;
  background: radial-gradient(120% 50% at 50% 0%, rgba(240, 193, 74, .2), transparent 60%) padding-box, linear-gradient(180deg, #070a1a, #03040b) padding-box,
    linear-gradient(140deg, #fff1b0, rgba(240, 193, 74, .25) 35%, #e2e8f0 60%, rgba(148, 163, 184, .3) 80%, #f0c14a) border-box;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .65), 0 0 34px -10px rgba(240, 193, 74, .8); }
.lb-legends .gx-sky { border-radius: inherit; z-index: -1; }
.hof-head { text-align: center; }
.hof-kicker { font-size: 10px; font-weight: 900; letter-spacing: .26em; color: #67e8f9; text-shadow: 0 0 10px rgba(34, 211, 238, .8); }
.hof-title { margin: 4px 0 2px; font-family: Fraunces, serif; font-size: 26px; line-height: 1.1;
  background: linear-gradient(90deg, #e2e8f0, #fff 30%, #fde68a 60%, #f0c14a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(240, 193, 74, .5)); animation: hofShine 4s ease-in-out infinite; background-size: 200% 100%; }
@keyframes hofShine { 50% { background-position: 100% 0; } }
.hof-sub { margin: 0 0 12px; font-size: 12px; color: #94a3b8; }
.hof-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.hof-tabs button { padding: 10px 6px; border-radius: 14px; cursor: pointer; font-size: 12.5px; font-weight: 800; color: #cbd5e1;
  border: 1px solid rgba(226, 232, 240, .3); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .3)); }
.hof-tabs button.on { color: #0b1220; border-color: transparent; background: linear-gradient(180deg, #ffffff, #e2e8f0 50%, #94a3b8); box-shadow: 0 0 16px rgba(226, 232, 240, .6), inset 0 1px 0 #fff; }
/* Podio con medallas flotantes */
.hof-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; margin: 30px 0 12px; }
.hof-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 26px 6px 0; text-align: center; }
.hof-medal { position: absolute; top: -22px; font-size: 34px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(255, 215, 120, .7)); animation: hofFloat 3s ease-in-out infinite; }
.hof-pod.platinum .hof-medal { animation-delay: -1s; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(226, 232, 240, .8)); }
.hof-pod.bronze .hof-medal { animation-delay: -2s; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(251, 146, 60, .7)); }
@keyframes hofFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.hof-pod.gold .hof-medal { font-size: 42px; top: -30px; }
.hof-faces { display: flex; justify-content: center; }
.hof-faces .hof-ava { width: 46px; height: 46px; font-size: 19px; border-radius: 50%; }
.hof-faces .hof-ava + .hof-ava { margin-left: -14px; }
.hof-pod.gold .hof-faces .hof-ava { width: 58px; height: 58px; font-size: 24px; }
.hof-pod.gold .hof-ava { box-shadow: 0 0 0 3px #f0c14a, 0 0 22px rgba(240, 193, 74, .9); }
.hof-pod.platinum .hof-ava { box-shadow: 0 0 0 3px #e2e8f0, 0 0 18px rgba(226, 232, 240, .8); }
.hof-pod.bronze .hof-ava { box-shadow: 0 0 0 3px #d97706, 0 0 18px rgba(217, 119, 6, .7); }
.hof-name { max-width: 100%; font-size: 12.5px; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.hof-pod.gold .hof-name { font-family: Fraunces, serif; font-size: 15px; color: #fde68a; }
.hof-members { display: block; font-size: 10px; color: #94a3b8; line-height: 1.2; overflow-wrap: anywhere; }
.hof-crowns { font-size: 11.5px; font-weight: 900; color: #fde68a; }
.hof-plinth { width: 100%; margin-top: 6px; display: grid; place-items: center; border-radius: 12px 12px 4px 4px; font-family: Fraunces, serif; font-size: 18px; }
.hof-pod.gold .hof-plinth { height: 64px; color: #1a1205; background: linear-gradient(180deg, #fff1b0, #f0c14a 45%, #9a6510); box-shadow: inset 0 1px 0 #fff, 0 0 26px rgba(240, 193, 74, .7); }
.hof-pod.platinum .hof-plinth { height: 46px; color: #0b1220; background: linear-gradient(180deg, #ffffff, #cbd5e1 50%, #64748b); box-shadow: inset 0 1px 0 #fff, 0 0 20px rgba(226, 232, 240, .5); }
.hof-pod.bronze .hof-plinth { height: 34px; color: #1c0d02; background: linear-gradient(180deg, #fed7aa, #d97706 55%, #7c2d12); box-shadow: inset 0 1px 0 #ffedd5, 0 0 18px rgba(217, 119, 6, .5); }
.hof-pod.me .hof-name::after { content: " ⭐"; }
/* Lista 4–20 */
.hof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hof-row { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "place faces who" "stats stats stats"; align-items: center; gap: 4px 10px; padding: 9px 11px; border-radius: 16px;
  border: 1px solid transparent; background: linear-gradient(180deg, rgba(14, 22, 44, .85), rgba(5, 8, 20, .9)) padding-box, linear-gradient(135deg, rgba(240, 193, 74, .55), rgba(226, 232, 240, .15), rgba(240, 193, 74, .35)) border-box;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hof-row.me { background: linear-gradient(180deg, rgba(60, 40, 6, .9), rgba(10, 8, 2, .9)) padding-box, linear-gradient(135deg, #fde68a, #f0c14a) border-box; box-shadow: 0 0 18px -4px rgba(240, 193, 74, .8); }
.hof-place { grid-area: place; min-width: 34px; font-family: Fraunces, serif; font-size: 15px; color: #e2e8f0; }
.hof-faces.sm { grid-area: faces; }
.hof-faces.sm .hof-ava { width: 34px; height: 34px; font-size: 14px; }
.hof-who { grid-area: who; min-width: 0; display: flex; flex-direction: column; }
.hof-who b { font-size: 13.5px; color: #fff; overflow-wrap: anywhere; }
.hof-stats { grid-area: stats; display: flex; gap: 6px; flex-wrap: wrap; }
.hof-stat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; color: #cbd5e1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(148, 163, 184, .25); }
.hof-stat b { color: #fff; }
.hof-stat.gold { color: #1a1205; background: linear-gradient(90deg, #fde68a, #f0c14a); border-color: transparent; }
.hof-stat.gold b { color: #1a1205; }
.hof-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #fde68a; }
@media (min-width: 601px) { .hof-row { grid-template-columns: auto auto 1fr auto; grid-template-areas: "place faces who stats"; } }
@media (prefers-reduced-motion: reduce) { .hof-medal, .hof-title { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   VITRINA DE INVENTARIO PRO · pestañas sin cortes, neón por rareza y badge de equipado
   ════════════════════════════════════════════════════════════════════ */
.inv-tabs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; overflow: visible !important; padding: 2px 0 8px !important; }
.inv-tabs button { position: relative; min-width: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px 8px !important; border-radius: 14px !important; font-size: 11.5px !important; font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: anywhere; white-space: normal !important;
  color: #dbe7f6; border: 1px solid rgba(148, 163, 184, .3) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(2, 5, 14, .55)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px rgba(0, 0, 0, .35); }
.inv-tabs button .it-ico { font-size: 19px; line-height: 1; }
.inv-tabs button b { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px !important; display: grid; place-items: center; font-size: 10px !important; color: #e2e8f0; background: rgba(255, 255, 255, .12) !important; }
.inv-tabs button.on { color: #1a1205 !important; border-color: transparent !important; background: linear-gradient(180deg, #fff1b0, #f0c14a 55%, #b7791f) !important; box-shadow: 0 0 16px -2px rgba(240, 193, 74, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
.inv-tabs button.on b { color: #1a1205; background: rgba(26, 18, 5, .2) !important; }
.inv-tabs button[data-inv-cat="flags"]:not(.on) { border-color: rgba(56, 189, 248, .5) !important; }
/* Tarjetas: espacio, neón sutil y estado claro */
.inv-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 10px !important; max-height: 380px; padding: 6px 2px 4px !important; }
.inv-item { padding: 22px 6px 9px !important; gap: 5px; border-radius: 16px !important; transition: transform .15s ease, box-shadow .25s ease; }
@media (hover: hover) { .inv-item:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 18px rgba(0, 0, 0, .45), 0 0 20px -4px var(--edge) !important; } }
.inv-item .inv-name { font-size: 11px; line-height: 1.2; color: #e2e8f0; text-align: center; overflow-wrap: anywhere; }
.inv-item .inv-state { margin-top: auto; padding: 3px 10px; font-size: 10px; letter-spacing: .02em; color: #fde68a; border-color: rgba(240, 193, 74, .5); background: rgba(240, 193, 74, .08); }
.inv-item.on { --edge: #4ade80; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(74, 222, 128, .6), 0 0 22px -2px rgba(74, 222, 128, .75), 0 8px 16px rgba(0, 0, 0, .45) !important; }
.inv-item.on .inv-state { color: #fecaca; background: rgba(239, 68, 68, .14); border-color: rgba(248, 113, 113, .5); }
.inv-badge { position: absolute; top: 6px; left: 50%; translate: -50% 0; z-index: 2; padding: 2px 9px; border-radius: 99px; font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .08em; white-space: nowrap;
  color: #052e16; background: linear-gradient(90deg, #bbf7d0, #4ade80); box-shadow: 0 0 12px rgba(74, 222, 128, .9); animation: invBadge 1.8s ease-in-out infinite; }
@keyframes invBadge { 50% { box-shadow: 0 0 20px rgba(74, 222, 128, 1); } }
/* Banderas: previsualización grande en alta definición */
.inv-grid.cat-flags { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; }
.inv-grid.cat-flags .inv-prev { height: 76px; width: 100%; }
.inv-grid.cat-flags .inv-prev .flag-wave { width: 100%; max-width: 116px; height: 72px; border-radius: 10px; box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .25); }
.inv-grid.cat-flags .inv-name { font-size: 12px; font-weight: 700; }
/* Tu bandera junto a tu nombre en la mesa */
.pod-flag { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.pod-flag .flag-wave { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .5); }
.pod-flag .flag-folds, .pod-flag .flag-gloss { display: none; }
@media (prefers-reduced-motion: reduce) { .inv-badge { animation: none; } }

/* Estado de la conexión con el servidor en tiempo real */
.net-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 4px 12px; border-radius: 99px; font-size: 11.5px; font-weight: 800;
  color: #bbf7d0; background: rgba(34, 197, 94, .12); border: 1px solid rgba(74, 222, 128, .45); }
.net-badge[hidden] { display: none; }
.net-badge[data-state="offline"], .net-badge[data-state="error"] { color: #fecaca; background: rgba(239, 68, 68, .12); border-color: rgba(248, 113, 113, .5); }

/* ════════════════════════════════════════════════════════════════════
   SOCIAL · chat privado entre amigos, invitaciones a partida y no leídos
   ════════════════════════════════════════════════════════════════════ */
.fr-act.chat { position: relative; }
.fr-act.invite:not(:disabled) { color: #1a1205; background: linear-gradient(180deg, #fde68a, #f0c14a); border-color: transparent; box-shadow: 0 0 12px -2px rgba(240, 193, 74, .8); }
.dm-dot, .nav-dm-dot { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
  font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: #ef4444; box-shadow: 0 0 0 2px #0b1424, 0 0 10px rgba(239, 68, 68, .8); animation: dmPulse 1.6s ease-in-out infinite; }
.nav-dm-dot[hidden] { display: none; }
.tabs [data-go="amigos"], .menu-card[data-go="amigos"] { position: relative; }
.tabs [data-go="amigos"] .nav-dm-dot { top: 2px; right: calc(50% - 22px); }
@keyframes dmPulse { 50% { transform: scale(1.12); } }
.fr-count.dm-total { margin-right: 4px; }

/* Panel de chat privado (hoja inferior en móvil, ventana flotante en escritorio) */
.dm-sheet { align-items: flex-end; }
.dm-box { width: min(480px, 100%); height: min(620px, 86vh); display: flex; flex-direction: column; border-radius: 24px 24px 0 0; overflow: hidden; border: 1.5px solid transparent;
  background: radial-gradient(120% 40% at 50% 0%, rgba(56, 189, 248, .14), transparent 60%) padding-box, linear-gradient(180deg, #0c1528, #060a16) padding-box,
    linear-gradient(140deg, rgba(103, 232, 249, .8), rgba(240, 193, 74, .25) 50%, rgba(240, 193, 74, .8)) border-box;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .7); animation: dmUp .35s cubic-bezier(.2, 1.2, .4, 1); }
@media (min-width: 601px) { .dm-sheet { align-items: center; } .dm-box { border-radius: 24px; } }
@keyframes dmUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid rgba(148, 163, 184, .2); background: rgba(255, 255, 255, .03); }
.dm-ava .dm-avatar { width: 42px; height: 42px; font-size: 18px; }
.dm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-who b { font-size: 15px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-status { font-size: 11.5px; font-weight: 700; color: #94a3b8; }
.dm-status.online { color: #4ade80; } .dm-status.ingame { color: #fbbf24; }
.dm-invite { padding: 7px 12px; border-radius: 12px; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 900; color: #1a1205; background: linear-gradient(180deg, #fde68a, #f0c14a 60%, #c98a17); }
.dm-invite:disabled { opacity: .45; cursor: not-allowed; }
.dm-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, .35); background: rgba(255, 255, 255, .05); color: #cbd5e1; cursor: pointer; }
.dm-log { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.dm-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; animation: dmIn .25s ease-out; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
@keyframes dmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dm-bubble { padding: 9px 13px; border-radius: 18px 18px 18px 6px; font-size: 14px; line-height: 1.4; color: #e2e8f0; overflow-wrap: anywhere;
  background: linear-gradient(160deg, rgba(56, 189, 248, .22), rgba(14, 116, 144, .25)); border: 1px solid rgba(103, 232, 249, .3); }
.dm-msg.mine .dm-bubble { border-radius: 18px 18px 6px 18px; color: #1a1205; background: linear-gradient(160deg, #fde68a, #f0c14a); border-color: transparent; }
.dm-msg small { margin-top: 2px; font-size: 10px; color: #64748b; }
.dm-empty { margin: auto; text-align: center; color: #94a3b8; font-size: 13px; }
.dm-compose { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(148, 163, 184, .2); }
.dm-compose input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid rgba(103, 232, 249, .35); background: #050b18; color: #fff; font-size: 14px; outline: none; }
.dm-compose input:focus { border-color: #f0c14a; box-shadow: 0 0 0 3px rgba(240, 193, 74, .2); }
.dm-send { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #1a1205; background: linear-gradient(135deg, #fff6cf, #f0c14a 55%, #c98a17); box-shadow: 0 0 12px rgba(240, 193, 74, .6); }

/* Invitación entrante */
.invite-pop { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); z-index: 140; width: min(460px, calc(100% - 24px)); translate: -50% 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-radius: 18px; border: 1.5px solid transparent;
  background: linear-gradient(160deg, #1a2440, #070c19) padding-box, linear-gradient(135deg, #4ade80, #fde68a, #38bdf8) border-box;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .7), 0 0 30px -4px rgba(74, 222, 128, .7); }
.invite-pop[hidden] { display: none; }
.invite-pop.in { animation: cnIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ip-ava .ip-avatar { width: 46px; height: 46px; font-size: 20px; }
.ip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ip-body b { font-size: 14.5px; color: #fff; line-height: 1.25; }
.ip-body small { font-size: 12px; color: #cbd5e1; }
.ip-track { display: block; height: 4px; margin-top: 6px; border-radius: 99px; overflow: hidden; background: rgba(148, 163, 184, .2); }
.ip-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #4ade80, #fde68a); }
.ip-acts { display: flex; gap: 8px; width: 100%; }
.ip-acts button { flex: 1; min-height: 42px; border-radius: 12px; border: 0; cursor: pointer; font-size: 14px; font-weight: 900; }
.ip-accept { color: #052e16; background: linear-gradient(180deg, #bbf7d0, #22c55e); box-shadow: 0 0 14px rgba(34, 197, 94, .6); }
.ip-decline { color: #fecaca; background: rgba(239, 68, 68, .14); border: 1px solid rgba(248, 113, 113, .5) !important; }
@media (prefers-reduced-motion: reduce) { .dm-dot, .nav-dm-dot, .dm-box, .dm-msg, .invite-pop.in { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   APUESTAS DE ESPECTADORES · panel flotante con cuotas en vivo
   ════════════════════════════════════════════════════════════════════ */
.bet-fab { width: 34px; height: 34px; padding: 0; border-radius: 50%; flex: none; cursor: pointer; font-size: 17px; display: grid; place-items: center;
  border: 1px solid rgba(74, 222, 128, .6); background: linear-gradient(180deg, rgba(74, 222, 128, .2), rgba(0, 0, 0, .3)); box-shadow: 0 0 14px -2px rgba(74, 222, 128, .8); animation: dmPulse 2s ease-in-out infinite; }
.bet-fab[hidden] { display: none; }
.bet-panel { position: absolute; z-index: 60; right: 10px; top: 64px; width: min(340px, calc(100% - 20px)); max-height: calc(100% - 150px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 20px; border: 1.5px solid transparent;
  background: radial-gradient(120% 40% at 50% 0%, rgba(74, 222, 128, .15), transparent 60%) padding-box, linear-gradient(180deg, rgba(10, 20, 36, .97), rgba(4, 8, 18, .97)) padding-box,
    linear-gradient(140deg, #86efac, rgba(240, 193, 74, .4) 50%, #f0c14a) border-box;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .7), 0 0 26px -8px rgba(74, 222, 128, .7); animation: cnIn .35s cubic-bezier(.2, 1.3, .4, 1); }
.bet-panel[hidden] { display: none; }
.bp-head { display: flex; align-items: center; gap: 8px; }
.bp-head b { flex: 1; font-size: 14px; color: #fff; }
.bp-status { padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 900; color: #fecaca; background: rgba(239, 68, 68, .15); border: 1px solid rgba(248, 113, 113, .45); white-space: nowrap; }
.bp-status.open { color: #bbf7d0; background: rgba(34, 197, 94, .15); border-color: rgba(74, 222, 128, .5); }
.bp-close { width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 1px solid rgba(148, 163, 184, .35); background: rgba(255, 255, 255, .05); color: #cbd5e1; cursor: pointer; }
.bp-total { margin: 0; font-family: Fraunces, serif; font-size: 18px; color: #fde68a; }
.bp-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bp-chips button { padding: 7px 2px; border-radius: 11px; cursor: pointer; font-size: 12px; font-weight: 800; color: #e0f2fe; border: 1px solid rgba(103, 232, 249, .35); background: rgba(56, 189, 248, .08); }
.bp-chips button.on { color: #1a1205; border-color: transparent; background: linear-gradient(180deg, #fff1b0, #f0c14a); box-shadow: 0 0 12px rgba(240, 193, 74, .6); }
.bp-sides { display: flex; flex-direction: column; gap: 7px; }
.bp-side { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name odds" "go go"; gap: 6px 10px; align-items: center; padding: 9px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 163, 184, .25); }
.bp-name { grid-area: name; min-width: 0; display: flex; flex-direction: column; }
.bp-name b { font-size: 13.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-name small { font-size: 11px; color: #94a3b8; }
.bp-odds { grid-area: odds; font-family: Fraunces, serif; font-size: 20px; font-weight: 800; color: #86efac; text-shadow: 0 0 10px rgba(74, 222, 128, .6); }
.bp-go { grid-area: go; min-height: 38px; border-radius: 11px; border: 0; cursor: pointer; font-size: 13px; font-weight: 900; color: #052e16; background: linear-gradient(180deg, #bbf7d0, #22c55e); }
.bp-go:disabled { opacity: .4; cursor: not-allowed; }
.bp-rules { margin: 0; font-size: 10.5px; line-height: 1.4; color: #64748b; }
.bp-mine-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #e2e8f0; }
.bp-history { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: #fde68a; border: 1px solid rgba(240, 193, 74, .45); background: rgba(240, 193, 74, .08); cursor: pointer; }
.bp-mine, .bh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bp-mine li, .bh-list li { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 10px; font-size: 12px; color: #cbd5e1; background: rgba(255, 255, 255, .04); }
.bp-mine li span, .bh-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-mine li.empty, .bh-list li.empty { color: #64748b; justify-content: center; }
.bp-mine li.won em, .bh-list li.won .bh-res { color: #86efac; font-weight: 900; font-style: normal; }
.bp-mine li.lost em, .bh-list li.lost .bh-res { color: #fca5a5; font-weight: 900; font-style: normal; }
.bh-who { display: flex; flex-direction: column; } .bh-who small { font-size: 10.5px; color: #64748b; }
.bh-amt { color: #fde68a; font-weight: 800; white-space: nowrap; } .bh-res { white-space: nowrap; font-weight: 800; }
.bh-net { margin: 0; font-family: Fraunces, serif; font-size: 20px; } .bh-net.up { color: #86efac; } .bh-net.down { color: #fca5a5; }
.end-box.sheet-box.bh-box { max-width: 420px; }
@media (prefers-reduced-motion: reduce) { .bet-fab, .bet-panel { animation: none; } }

/* Con servidor: la sala de espera muestra solo jugadores reales */
body.net-on #sala .room-public { display: none; }
.net-start-now { margin: 10px auto 4px; max-width: 360px; min-height: 48px; font-size: 15px; font-weight: 900; color: #052e16;
  background: linear-gradient(180deg, #bbf7d0, #22c55e); box-shadow: 0 0 18px rgba(34, 197, 94, .6); }
.net-start-now[hidden] { display: none; }

/* Con servidor: bots en pausa y lista de conectados en el buscador de amigos */
body.net-on .champ-demo-box { display: none !important; }
.fr-online-title { margin: 6px 2px 8px; font-size: .82rem; font-weight: 700; opacity: .85; }
.fr-live { color: #4ade80; font-weight: 700; }
/* Solicitudes de amistad pendientes en los botones de Amigos */
[data-go="amigos"] { position: relative; }
.go-badge { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: .7rem; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35); pointer-events: none; }
.go-badge[hidden] { display: none; }
/* Sorteo de salida de la primera mano (en línea) */
.open-draw-msg { margin: 12px 4px 0; text-align: center; font-weight: 800; font-size: .95rem; color: #fde68a;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); animation: odm-in .45s ease both; }
.puja-card.open-draw .puja-tile { transform: scale(1.25); margin: 8px 0 14px; }
@keyframes odm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Pausa de Baño */
.pause-fab { height: 34px; padding: 0 10px; border-radius: 17px; flex: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font: 700 12px/1 inherit; color: #e0f2fe; border: 1px solid rgba(56, 189, 248, .6);
  background: linear-gradient(180deg, rgba(56, 189, 248, .22), rgba(0, 0, 0, .3)); }
.pause-fab[hidden] { display: none; }
.pause-fab:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.pause-fab.used span:last-child { text-decoration: line-through; }
@media (max-width: 420px) { .pause-fab span:last-child { display: none; } .pause-fab { width: 34px; padding: 0; justify-content: center; } }
.pause-banner { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 9;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 9px 10px 12px; border-radius: 14px;
  background: rgba(8, 24, 44, .96); border: 1.5px solid rgba(56, 189, 248, .8); box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 22px -6px rgba(56,189,248,.8);
  animation: bubbleIn .3s ease; }
.pause-banner[hidden] { display: none; }
.pause-banner.me { border-color: rgba(250, 204, 21, .85); }
.pb-ico { font-size: 22px; }
.pb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-text b { font-size: 13.5px; color: #fff; }
.pb-text small { font-size: 11px; opacity: .8; line-height: 1.3; }
.pb-clock { font: 800 18px/1 ui-monospace, monospace; color: #7dd3fc; min-width: 40px; text-align: right; }
.pb-resume { grid-column: 1 / -1; justify-self: center; padding: 8px 18px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 800; color: #111; background: linear-gradient(180deg, #fde047, #f59e0b); }
.pb-resume[hidden] { display: none; }
.pb-bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.pb-bar > i { display: block; height: 100%; width: 100%; background: #38bdf8; transition: width .25s linear; }
/* Pausa de cierre de mano: la mesa congelada con la ficha ganadora destacada */
.hand-closing-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 22px 12px; border-radius: 18px; text-align: center;
  max-width: calc(100% - 32px); background: rgba(6, 12, 24, .82); border: 1.5px solid rgba(250, 204, 21, .85);
  box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 34px -8px rgba(250, 204, 21, .9); animation: hcIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.hand-closing-banner[hidden] { display: none; }
.hand-closing-banner > b { font-size: clamp(22px, 6vw, 34px); font-weight: 900; letter-spacing: .06em; color: #fde047; text-shadow: 0 2px 12px rgba(250, 204, 21, .6); }
.hand-closing-banner > small { font-size: 13px; color: #fff; opacity: .9; }
.hand-closing-banner.locked { border-color: rgba(148, 163, 184, .9); box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 30px -8px rgba(148, 163, 184, .9); }
.hand-closing-banner.locked > b { color: #e2e8f0; text-shadow: 0 2px 12px rgba(148, 163, 184, .6); }
@keyframes hcIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.chain .tile.closing-tile { position: relative; z-index: 3; animation: closingGlow 1s ease-in-out infinite !important;
  outline: 3px solid #facc15; outline-offset: 2px; border-radius: 6px; }
@keyframes closingGlow { 0%, 100% { box-shadow: 0 0 10px 2px rgba(250, 204, 21, .7); } 50% { box-shadow: 0 0 26px 8px rgba(250, 204, 21, 1); } }
.felt.hand-locked .chain .tile { filter: saturate(.55) brightness(.9); }
.felt.hand-locked .chain .tile.endcap { filter: none; outline: 2px dashed rgba(226, 232, 240, .9); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .chain .tile.closing-tile { animation: none !important; box-shadow: 0 0 18px 6px rgba(250, 204, 21, .9); } .hand-closing-banner { animation: none; } }
/* Sorteo de salida interactivo: cuenta atrás */
.puja-clock { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 4px 2px; padding: 8px 12px 12px;
  border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(250, 204, 21, .45); }
.puja-clock b { font: 900 20px/1 ui-monospace, monospace; color: #fde047; min-width: 44px; text-align: center; }
.puja-clock span { font-size: 13px; font-weight: 700; color: #fff; }
.puja-clock .pc-bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.puja-clock .pc-bar > i { display: block; height: 100%; width: 100%; background: #facc15; transition: width .25s linear; }
.puja-clock.hurry { border-color: rgba(248, 113, 113, .8); animation: dotPulse 1s ease-in-out infinite; }
.puja-clock.hurry b { color: #f87171; }

/* ══ Desplazamiento visible: barras finas doradas + aviso de "hay más abajo" ══ */
.scroll, .online-list, .end-box.sheet-box, .end-box-match, .chat-pane, .chat-log, .gc-log, .cm-picker-list,
.my-avatars-grid, .inv-grid, .bet-panel, .end-box, .fr-pane, .shop-grid {
  scrollbar-width: thin; scrollbar-color: rgba(240, 193, 74, .6) rgba(255, 255, 255, .05);
}
.scroll::-webkit-scrollbar, .online-list::-webkit-scrollbar, .end-box.sheet-box::-webkit-scrollbar, .end-box-match::-webkit-scrollbar,
.chat-pane::-webkit-scrollbar, .chat-log::-webkit-scrollbar, .gc-log::-webkit-scrollbar, .cm-picker-list::-webkit-scrollbar,
.my-avatars-grid::-webkit-scrollbar, .inv-grid::-webkit-scrollbar, .bet-panel::-webkit-scrollbar, .end-box::-webkit-scrollbar {
  width: 6px !important; height: 6px;
}
.scroll::-webkit-scrollbar-track, .online-list::-webkit-scrollbar-track, .end-box::-webkit-scrollbar-track, .end-box-match::-webkit-scrollbar-track,
.chat-pane::-webkit-scrollbar-track, .chat-log::-webkit-scrollbar-track, .gc-log::-webkit-scrollbar-track, .cm-picker-list::-webkit-scrollbar-track,
.my-avatars-grid::-webkit-scrollbar-track, .inv-grid::-webkit-scrollbar-track, .bet-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04); border-radius: 6px; margin: 6px 0;
}
.scroll::-webkit-scrollbar-thumb, .online-list::-webkit-scrollbar-thumb, .end-box::-webkit-scrollbar-thumb, .end-box-match::-webkit-scrollbar-thumb,
.chat-pane::-webkit-scrollbar-thumb, .chat-log::-webkit-scrollbar-thumb, .gc-log::-webkit-scrollbar-thumb, .cm-picker-list::-webkit-scrollbar-thumb,
.my-avatars-grid::-webkit-scrollbar-thumb, .inv-grid::-webkit-scrollbar-thumb, .bet-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f6d27a, #c8962e); border-radius: 6px; box-shadow: 0 0 6px rgba(240, 193, 74, .45);
}
/* Aviso: degradado + flecha que rebota al pie del contenedor mientras quede contenido por ver */
.scroll-cue { grid-column: 1 / -1; flex: none; position: sticky; bottom: 0; left: 0; right: 0; height: 46px; margin-top: -46px; z-index: 6; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  background: linear-gradient(180deg, transparent, rgba(4, 9, 20, .82) 78%); opacity: 0; transition: opacity .3s ease; }
.can-scroll-down > .scroll-cue { opacity: 1; }
.scroll-cue button { pointer-events: none; width: 34px; height: 26px; border-radius: 13px; border: 1px solid rgba(240, 193, 74, .65); cursor: pointer;
  background: rgba(10, 18, 34, .9); color: #f6d27a; font-size: 15px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 0 12px -2px rgba(240, 193, 74, .7); animation: cueBounce 1.4s ease-in-out infinite; }
@keyframes cueBounce { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue button { animation: none; } }
/* Google: con el servidor configurado se usa el botón oficial de Google Identity Services */
.gsi-host { display: none; min-height: 44px; justify-content: center; border-radius: 999px; overflow: hidden; }
body.google-ready .gsi-host.ready { display: flex; }
body.google-ready .gsi-host.ready + .auth-social-btn { display: none; }
body.social-busy .auth-social { opacity: .55; pointer-events: none; }
.link-box .auth-divider { margin: 18px 0 12px; }
.link-box { max-width: 380px; width: 92%; text-align: left; }
.link-box .end-box-ico, .link-box .end-box-title, .link-box .end-box-desc { text-align: center; }
.link-box .auth-field input { width: 100%; }
.link-box .auth-link { display: block; margin: 10px auto 0; }

/* Tranque: fichas de todos destapadas con su suma de puntos */
.tq-reveal { display: grid; gap: 6px; width: min(340px, 100%); margin: 8px auto 4px; text-align: left; }
.tq-head { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fde68a; text-align: center; }
.tq-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name pts" "tiles tiles"; gap: 4px 8px; align-items: center;
  padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.tq-row.win { background: rgba(250, 204, 21, .12); border-color: rgba(250, 204, 21, .7); }
.tq-name { grid-area: name; font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-pts { grid-area: pts; font-size: 13px; font-weight: 800; color: #fde68a; }
.tq-row.win .tq-pts { color: #facc15; }
.tq-tiles { grid-area: tiles; display: flex; flex-wrap: wrap; gap: 4px; }
.tq-tiles em { color: rgba(255, 255, 255, .5); font-style: normal; }
.piece.h.tq-piece { width: 46px; height: 25px; padding: 2px; box-shadow: inset 0 1px 1px #fff, 0 1px 0 var(--ivory-edge-1, #d8cdb6), 0 2px 4px rgba(0, 0, 0, .45); }
.piece.tq-piece .dhalf i { width: 3.6px; height: 3.6px; }
.piece.tq-piece .dseam { margin: 2px 0; }
.hand-closing-banner:has(.tq-reveal) { width: min(360px, calc(100% - 24px)); padding: 10px 12px 12px; }
.hand-closing-banner .tq-reveal { max-height: 52vh; overflow-y: auto; }

/* Eliminar cuenta */
.del-box { max-width: 380px; width: 92%; text-align: left; }
.del-box .end-box-ico, .del-box .end-box-title { text-align: center; }
.del-box .end-box-title { color: #fca5a5; }
.del-loss { margin: 4px 0 14px; padding: 10px 12px; list-style: none; display: grid; gap: 6px; border-radius: 12px;
  background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .35); font-size: 13.5px; color: #fee2e2; }
.del-go { width: 100%; margin-top: 6px; padding: 13px; border-radius: 14px; background: #dc2626; color: #fff; border: 1px solid #b91c1c; font-weight: 800; cursor: pointer; }
.del-go:disabled { opacity: .45; cursor: not-allowed; }
#del-confirm { text-transform: uppercase; letter-spacing: .12em; }

/* «[Nombre] se pasó»: cartel flotante sobre el avatar */
.pass-float { position: fixed; z-index: 70; pointer-events: none; max-width: min(260px, calc(100vw - 16px)); padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #ef4444, #b91c1c); border: 1.5px solid rgba(254, 202, 202, .9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 18px -4px rgba(239, 68, 68, .9); animation: passFloat 2.2s ease forwards; }
.pass-float::before { content: "🚫 "; }
@keyframes passFloat { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 12% { opacity: 1; transform: translateY(0) scale(1.08); }
  20% { transform: scale(1); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }
.pass-float.below { animation-name: passFloatDown; }
@keyframes passFloatDown { 0% { opacity: 0; transform: translateY(-8px) scale(.7); } 12% { opacity: 1; transform: translateY(0) scale(1.08); }
  20% { transform: scale(1); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .pass-float, .pass-float.below { animation: passFade 2.2s linear forwards; } }
@keyframes passFade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* Podio con menos de 3 jugadores: el puesto vacío queda como hueco discreto */
.lb-pod.lb-pod-free { justify-content: flex-end; min-height: 120px; border: 1.5px dashed rgba(255, 255, 255, .18) !important; background: rgba(255, 255, 255, .03) !important;
  box-shadow: none !important; color: rgba(255, 255, 255, .45); }
.lb-pod.lb-pod-free .lb-pod-place { color: rgba(255, 255, 255, .5); }
.lb-pod.lb-pod-free small { font-size: 11.5px; }

/* La Champions · pareja: buscador de compañero, invitación pendiente y ventana del invitado */
.cp-search { margin-top: 10px; display: grid; gap: 6px; }
.cp-search[hidden] { display: none; }
.cp-search input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  color: #fff; font: inherit; font-size: 14px; }
.cp-search input:focus { outline: 2px solid rgba(250, 204, 21, .6); outline-offset: 1px; }
.cp-results { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.cp-hit { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  color: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cp-hit:hover, .cp-hit:focus-visible { background: rgba(250, 204, 21, .12); border-color: rgba(250, 204, 21, .5); }
.cp-hit span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cp-hit small { color: #94a3b8; font-size: 12px; }
.cp-none { margin: 2px 0; font-size: 13px; color: #94a3b8; text-align: center; }
.cp-invite { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1c1404;
  background: #facc15; border-radius: 999px; padding: 2px 7px; }
.cr-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(250, 204, 21, .1); border: 1px solid rgba(250, 204, 21, .5); font-size: 13.5px; color: #fef3c7; }
.cr-pending[hidden] { display: none; }
.ci-box { max-width: 360px; width: 92%; }
.ci-actions { display: flex; gap: 10px; width: 100%; margin-top: 14px; }
.ci-actions button { flex: 1; padding: 12px; border-radius: 14px; font: inherit; font-weight: 800; cursor: pointer; }
.ci-yes { background: linear-gradient(180deg, #facc15, #d99a0b); color: #1c1404; border: 1px solid #f5d061; }
.ci-no { background: rgba(255, 255, 255, .08); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, .16); }
.ci-actions button:disabled { opacity: .5; cursor: default; }

/* ── Súper Tienda destacada: banner del inicio y pestaña de la barra ── */
.home-shop { position: relative; isolation: isolate; overflow: hidden; width: 100%; margin: 0 0 11px; padding: 15px 14px; border-radius: 20px;
  display: flex; align-items: center; gap: 12px; text-align: left; color: #fff; cursor: pointer;
  border: 1.5px solid rgba(253, 230, 138, .75);
  background: radial-gradient(120% 140% at 0% 0%, rgba(244, 114, 182, .55), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(250, 204, 21, .35), transparent 55%),
    linear-gradient(135deg, #3b0a2a 0%, #4c0f3c 45%, #2a1250 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 28px -6px rgba(244, 114, 182, .85), inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: shHalo 2.6s ease-in-out infinite; transition: transform .16s ease; }
.home-shop:active { transform: scale(.97); }
@keyframes shHalo { 0%, 100% { box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 22px -6px rgba(244,114,182,.75), inset 0 1px 0 rgba(255,255,255,.25); }
  50% { box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 38px -2px rgba(250,204,21,.85), inset 0 1px 0 rgba(255,255,255,.25); } }
.sh-shine { position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: -1; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); animation: shSweep 3.4s ease-in-out infinite; }
@keyframes shSweep { 0%, 35% { left: -60%; } 75%, 100% { left: 130%; } }
.sh-gems { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sh-gems i { position: absolute; font-style: normal; font-size: 15px; opacity: .55; animation: shFloat 4.5s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(253, 230, 138, .8)); }
.sh-gems i:nth-child(1) { right: 26%; top: 8%; }
.sh-gems i:nth-child(2) { right: 8%; top: 12%; animation-delay: -1s; font-size: 13px; }
.sh-gems i:nth-child(3) { right: 34%; bottom: 6%; animation-delay: -2s; }
.sh-gems i:nth-child(4) { right: 17%; bottom: 14%; animation-delay: -3s; font-size: 12px; }
.sh-gems i:nth-child(5) { left: 44%; top: 4%; animation-delay: -1.6s; font-size: 12px; }
@keyframes shFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(8deg); } }
.sh-bag { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), rgba(244, 114, 182, .2) 60%, rgba(0, 0, 0, .2));
  border: 1px solid rgba(253, 230, 138, .6); box-shadow: 0 0 18px -2px rgba(244, 114, 182, .9); animation: shBag 2.6s ease-in-out infinite; }
.sh-bag svg { width: 36px; height: 36px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
@keyframes shBag { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.07); } }
.sh-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sh-kicker { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; color: #fde68a; white-space: nowrap; }
.sh-text b { font-family: Fraunces, serif; font-size: 22px; line-height: 1.1; background: linear-gradient(90deg, #fff, #fde68a, #fbcfe8, #fff);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shText 4s linear infinite; }
@keyframes shText { to { background-position: -220% 0; } }
.sh-text small { font-size: 12.5px; color: rgba(255, 255, 255, .85); line-height: 1.3; }
.sh-cta { flex: none; align-self: center; padding: 8px 11px; white-space: nowrap; border-radius: 999px; font-size: 13px; font-weight: 900; color: #3b0a2a;
  background: linear-gradient(180deg, #fff3b0, #facc15 55%, #d99a0b); box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 14px rgba(250, 204, 21, .6);
  animation: shCta 1.6s ease-in-out infinite; }
@keyframes shCta { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.tabs .tab-shop { position: relative; }
.tab-shop-ico { position: relative; display: grid; place-items: center; width: 30px; height: 24px; margin-top: -4px; border-radius: 10px;
  color: #fff; background: linear-gradient(135deg, #f472b6, #a21caf); box-shadow: 0 0 12px rgba(244, 114, 182, .8); animation: tabShop 2.4s ease-in-out infinite; }
.tab-shop-ico .ico { width: 18px; height: 16px; }
.tab-shop-dot { position: absolute; top: -3px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #facc15; border: 2px solid #08131f; }
.tabs .tab-shop span[data-i18n] { color: #f9a8d4; font-weight: 800; }
.tabs .tab-shop.on span[data-i18n] { color: #fde68a; }
@keyframes tabShop { 0%, 100% { transform: translateY(0); box-shadow: 0 0 10px rgba(244, 114, 182, .7); } 50% { transform: translateY(-2px); box-shadow: 0 0 18px rgba(250, 204, 21, .9); } }
@media (prefers-reduced-motion: reduce) { .home-shop, .sh-shine, .sh-gems i, .sh-bag, .sh-text b, .sh-cta, .tab-shop-ico { animation: none; } .sh-shine { display: none; } }

/* Fin de mano: fichas restantes boca arriba en cada asiento (fila arriba, columna a los lados) */
#felt .pod-faceup { gap: 2px; padding: 3px 4px; }
#felt .pod-faceup.h { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 220px; }
#felt .seat-pod.left .pod-faceup.v, #felt .seat-pod.right .pod-faceup.v { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 2px; padding: 3px; }
#felt .rv-tile { display: flex; flex: none; border-radius: 3px; padding: 1px; background: var(--ivory-face, #f6efe0);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 0 #b9ab8f, 0 2px 4px rgba(0, 0, 0, .45); animation: rvFlip .45s ease both; }
#felt .pod-faceup.h .rv-tile { flex-direction: column; width: 16px; height: 29px; }
#felt .pod-faceup.v .rv-tile { flex-direction: row; width: 29px; height: 16px; }
#felt .rv-tile .dhalf i { width: 2.6px; height: 2.6px; }
#felt .pod-faceup.h .rv-tile .dseam { height: 1px; margin: 0 2px; }
#felt .pod-faceup.v .rv-tile .dseam { width: 1px; margin: 2px 0; }
#felt .rv-tile:nth-child(2) { animation-delay: .04s; } #felt .rv-tile:nth-child(3) { animation-delay: .08s; } #felt .rv-tile:nth-child(4) { animation-delay: .12s; }
#felt .rv-tile:nth-child(5) { animation-delay: .16s; } #felt .rv-tile:nth-child(n+6) { animation-delay: .2s; }
@keyframes rvFlip { from { opacity: 0; transform: rotateY(90deg) scale(.8); } to { opacity: 1; transform: none; } }
#felt .pod-tiles.reveal { background: linear-gradient(180deg, #facc15, #d99a0b); color: #1c1404; border-color: #fde68a; }
#felt .pod-tiles.reveal small { color: #3b2a05; }
@media (prefers-reduced-motion: reduce) { #felt .rv-tile { animation: none; } }

/* Intersticial de prueba (navegador): pantalla completa con cierre a los 5 s */
.interstitial-modal { z-index: 400; background: rgba(2, 6, 14, .92); }
.ist-box { position: relative; width: min(360px, 92vw); padding: 34px 20px 22px; border-radius: 20px; display: grid; justify-items: center; gap: 8px; text-align: center;
  background: linear-gradient(160deg, #1e293b, #0f172a); border: 1px dashed rgba(148, 163, 184, .6); color: #e2e8f0; }
.ist-tag { position: absolute; top: 10px; left: 12px; font-size: 10px; font-weight: 900; letter-spacing: .12em; color: #0f172a; background: #facc15; padding: 2px 7px; border-radius: 6px; }
.ist-art { font-size: 56px; line-height: 1; }
.ist-box b { font-size: 18px; }
.ist-box small { color: #94a3b8; font-size: 13px; }
.ist-box code { font-size: 10.5px; color: #64748b; word-break: break-all; }
.ist-close { margin-top: 8px; min-width: 120px; padding: 11px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1);
  color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.ist-close:disabled { opacity: .6; cursor: default; }

/* Anuncio con recompensa simulado: ✕ para cerrarlo antes (sin premio) */
.ad-box { position: relative; }
.ad-skip { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 15px; cursor: pointer; }
.ad-skip[hidden] { display: none; }

/* Cofres de actividad */
.ms-activity { display: grid; gap: 8px; }
.act-sub { font-size: 12.5px; color: #cbd5e1; }
.act-bar { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.act-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f472b6, #facc15); transition: width .4s ease; }
.act-chests { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.act-chest { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04); color: #e2e8f0; font: inherit; cursor: default; min-width: 0; }
.act-chest .act-ico { font-size: 22px; line-height: 1.1; }
.act-chest b { font-size: 12px; }
.act-chest small { font-size: 9.5px; color: #94a3b8; line-height: 1.15; text-align: center; }
.act-chest.locked { opacity: .55; }
.act-chest.ready { cursor: pointer; border-color: rgba(250, 204, 21, .8); background: linear-gradient(180deg, rgba(250, 204, 21, .2), rgba(244, 114, 182, .12));
  box-shadow: 0 0 14px -2px rgba(250, 204, 21, .7); animation: actPulse 1.6s ease-in-out infinite; }
.act-chest.ready small { color: #fde68a; font-weight: 800; }
.act-chest.claimed { opacity: .7; }
.act-chest.claimed small { color: #4ade80; font-weight: 800; }
@keyframes actPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .act-chest.ready { animation: none; } }

/* Super Store: icono de centro comercial (letrero luminoso, toldo, escaparates) y menú sin la casilla pequeña */
.menu-grid-2x2 > .menu-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.home-shop .sh-mall { width: 72px; height: 72px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(253, 224, 71, .35), rgba(124, 58, 237, .25) 55%, rgba(0, 0, 0, .25));
  border: 1px solid rgba(253, 230, 138, .75); box-shadow: 0 0 22px -2px rgba(250, 204, 21, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.home-shop .sh-mall svg { width: 62px; height: 62px; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); }
.sh-mall .mall-sign { filter: drop-shadow(0 0 2px #fde047); animation: mallSign 1.8s ease-in-out infinite; }
.sh-mall .mall-glow { animation: mallGlow 1.8s ease-in-out infinite; }
.sh-mall .mall-spark { transform-box: fill-box; transform-origin: center; animation: mallSpark 2.2s ease-in-out infinite; }
.sh-mall .mall-spark.s2 { animation-delay: -.7s; } .sh-mall .mall-spark.s3 { animation-delay: -1.4s; }
@keyframes mallSign { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 50% { opacity: 1; } 55% { opacity: .7; } }
@keyframes mallGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mallSpark { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
.tab-shop-ico { color: #a855f7; background: linear-gradient(135deg, #f472b6, #7c3aed); }
.tab-shop-ico .ico { width: 20px; height: 20px; color: #6d28d9; }
@media (prefers-reduced-motion: reduce) { .sh-mall .mall-sign, .sh-mall .mall-glow, .sh-mall .mall-spark { animation: none; } }

/* ── Recompensas diarias llamativas ── */
.daily-hero { position: relative; isolation: isolate; overflow: hidden; width: 100%; margin: 4px 0 12px; padding: 13px 14px; border-radius: 20px;
  display: flex; align-items: center; gap: 12px; text-align: left; color: #fff; cursor: pointer;
  border: 1.5px solid rgba(253, 224, 71, .9);
  background: radial-gradient(130% 160% at 15% 50%, rgba(250, 204, 21, .45), transparent 55%), linear-gradient(120deg, #7c2d12 0%, #b45309 40%, #a16207 70%, #713f12 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 30px -4px rgba(250, 204, 21, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: dhIn .6s cubic-bezier(.2, 1.4, .4, 1) both, dhGlow 2.2s ease-in-out .6s infinite; }
.daily-hero[hidden] { display: none; }
.daily-hero:active { transform: scale(.97); }
@keyframes dhIn { from { opacity: 0; transform: translateY(-10px) scale(.9); } }
@keyframes dhGlow { 0%, 100% { box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 22px -6px rgba(250,204,21,.8), inset 0 1px 0 rgba(255,255,255,.35); }
  50% { box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 40px 0 rgba(250,204,21,1), inset 0 1px 0 rgba(255,255,255,.35); } }
.dh-rays { position: absolute; left: -40px; top: 50%; width: 180px; height: 180px; margin-top: -90px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 244, 196, .35) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); animation: dhSpin 9s linear infinite; }
@keyframes dhSpin { to { transform: rotate(360deg); } }
.dh-sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dh-sparks i { position: absolute; font-style: normal; color: #fff7d6; font-size: 12px; animation: dhTwinkle 1.8s ease-in-out infinite; }
.dh-sparks i:nth-child(1) { left: 12%; top: 10%; } .dh-sparks i:nth-child(2) { left: 70%; top: 8%; animation-delay: -.5s; }
.dh-sparks i:nth-child(3) { left: 58%; bottom: 8%; animation-delay: -1s; } .dh-sparks i:nth-child(4) { left: 6%; bottom: 10%; animation-delay: -1.4s; }
@keyframes dhTwinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(30deg); } }
.dh-gift { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; }
.dh-box { font-size: 42px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); animation: dhHop 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes dhHop { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 15% { transform: translateY(-7px) rotate(-8deg); } 30% { transform: translateY(0) rotate(7deg); } 45% { transform: translateY(-3px) rotate(-4deg); } }
.dh-count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-style: normal; font-size: 11.5px; font-weight: 900; color: #fff; background: #ef4444; border: 2px solid #fde68a; box-shadow: 0 0 10px rgba(239, 68, 68, .8); }
.dh-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dh-kicker { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; color: #fef3c7; }
.dh-text b { font-size: 16px; line-height: 1.2; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.dh-text small { font-size: 12px; color: #fde68a; }
.dh-cta { flex: none; padding: 9px 13px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #451a03; white-space: nowrap;
  background: linear-gradient(180deg, #fffbeb, #fde047 50%, #f59e0b); box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 16px rgba(253, 224, 71, .9);
  animation: shCta 1.4s ease-in-out infinite; }
/* Regalo de la cabecera y accesos: se agitan y brillan cuando hay algo que reclamar */
body.rewards-ready .gift-btn { animation: rwShake 2.4s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(253, 224, 71, .8), 0 0 18px rgba(250, 204, 21, .9); }
body.rewards-ready .missions-card .mc-ico, body.rewards-ready .pf-pill.gift > span { display: inline-block; animation: rwShake 2.4s ease-in-out infinite; }
@keyframes rwShake { 0%, 70%, 100% { transform: rotate(0) scale(1); } 75% { transform: rotate(-14deg) scale(1.12); } 80% { transform: rotate(12deg) scale(1.12); } 85% { transform: rotate(-8deg) scale(1.08); } 90% { transform: rotate(5deg); } }
/* Modal: el día de hoy brilla, salta y lleva su etiqueta; el botón de cobrar tiene un destello que lo cruza */
#modal-misiones.rw-has-claim .end-box-ico { animation: dhHop 1.6s ease-in-out infinite; display: inline-block; }
.lw-day { position: relative; overflow: hidden; }
.lw-day.today { border-color: #fde047 !important; background: linear-gradient(180deg, rgba(253, 224, 71, .35), rgba(245, 158, 11, .2)) !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, .85); animation: lwToday 1.3s ease-in-out infinite; z-index: 1; }
@keyframes lwToday { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.08); } }
.lw-shine { position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: lwShine 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes lwShine { 0%, 40% { left: -60%; } 80%, 100% { left: 130%; } }
.lw-today { position: relative; display: block; margin: 0 auto 1px; width: max-content; font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .08em;
  color: #451a03; background: #fde047; border-radius: 4px; padding: 0 3px; }
.end-box-btn.rw-glow { position: relative; overflow: hidden; animation: rwPulse 1.5s ease-in-out infinite; box-shadow: 0 0 22px rgba(250, 204, 21, .85); }
.end-box-btn.rw-glow::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: lwShine 2s ease-in-out infinite; }
@keyframes rwPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.ms-row.ready { border-color: rgba(250, 204, 21, .75) !important; box-shadow: 0 0 14px -2px rgba(250, 204, 21, .7); animation: rwRow 2s ease-in-out infinite; }
@keyframes rwRow { 0%, 100% { box-shadow: 0 0 10px -4px rgba(250, 204, 21, .6); } 50% { box-shadow: 0 0 18px 0 rgba(250, 204, 21, .9); } }
/* Celebración al cobrar */
.rw-pop { position: fixed; z-index: 500; transform: translate(-50%, -50%); pointer-events: none; font-size: 26px; font-weight: 900; color: #fde047;
  text-shadow: 0 2px 0 #92400e, 0 0 14px rgba(250, 204, 21, .9); animation: rwPop 1.6s ease-out forwards; }
@keyframes rwPop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
.rw-gem { position: fixed; left: 0; top: 0; z-index: 499; pointer-events: none; font-style: normal; font-size: 20px; margin: -10px 0 0 -10px; filter: drop-shadow(0 0 6px rgba(56, 189, 248, .9)); }
[data-diamonds].rw-bump { display: inline-block; animation: rwBump .5s ease; }
@keyframes rwBump { 30% { transform: scale(1.45); color: #fde047; } }
@media (prefers-reduced-motion: reduce) {
  .daily-hero, .dh-rays, .dh-sparks i, .dh-box, .dh-cta, body.rewards-ready .gift-btn, body.rewards-ready .missions-card .mc-ico, .lw-day.today, .lw-shine,
  .end-box-btn.rw-glow, .end-box-btn.rw-glow::after, .ms-row.ready, #modal-misiones.rw-has-claim .end-box-ico { animation: none !important; }
}

/* ── Partida de Fiesta: tarjeta del lobby y formulario en modo fiesta ── */
.la-card.la-party { position: relative; overflow: hidden; border-color: rgba(244, 114, 182, .75) !important;
  background: radial-gradient(120% 140% at 0% 0%, rgba(244, 114, 182, .35), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(250, 204, 21, .25), transparent 60%), rgba(30, 10, 40, .85) !important;
  box-shadow: 0 0 24px -6px rgba(244, 114, 182, .9) !important; }
.la-card.la-party .la-text b { background: linear-gradient(90deg, #fff, #fbcfe8, #fde68a, #fff); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shText 4s linear infinite; }
.gx-party-ico { position: relative; display: grid; place-items: center; }
.gx-party-ico .pp-ball { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f472b6 40%, #7e22ce); box-shadow: 0 0 18px rgba(244, 114, 182, .9); animation: ppBall 2.4s ease-in-out infinite; }
.gx-party-ico .pp-glyph { position: relative; font-size: 22px; animation: dhHop 1.8s ease-in-out infinite; }
.gx-party-ico .pp-c { position: absolute; width: 6px; height: 6px; border-radius: 2px; animation: ppConf 2.2s ease-in-out infinite; }
.gx-party-ico .pp-c.c1 { background: #fde047; top: 2px; left: 6px; } .gx-party-ico .pp-c.c2 { background: #38bdf8; top: 6px; right: 2px; animation-delay: -.7s; }
.gx-party-ico .pp-c.c3 { background: #4ade80; bottom: 2px; left: 12px; animation-delay: -1.4s; }
@keyframes ppBall { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ppConf { 0%, 100% { transform: translateY(0) rotate(0); opacity: .6; } 50% { transform: translateY(-5px) rotate(120deg); opacity: 1; } }
.cm-fiesta-note { margin: 4px 0 10px; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.35; color: #fdf2f8;
  background: linear-gradient(90deg, rgba(244, 114, 182, .22), rgba(250, 204, 21, .15)); border: 1px solid rgba(244, 114, 182, .6); }
.cm-fiesta-note[hidden] { display: none; }
/* Mesas normales: competitivas, sin retos · Modo fiesta: retos siempre activos, sin apuesta ni requisito de MMR */
#modal-crear-mesa:not(.fiesta) #cm-party, #modal-crear-mesa:not(.fiesta) #cm-party-card { display: none !important; }
#modal-crear-mesa.fiesta #cm-party-card, #modal-crear-mesa.fiesta #cm-party-on, #modal-crear-mesa.fiesta #cm-bet-block, #modal-crear-mesa.fiesta #cm-access-block { display: none !important; }
#modal-crear-mesa.fiesta #cm-party-body { display: block !important; }
#modal-crear-mesa.fiesta #cm-party { border-color: rgba(244, 114, 182, .7); box-shadow: 0 0 22px -6px rgba(244, 114, 182, .9); }
.party-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.party-when button { display: grid; gap: 2px; text-align: left; }
.party-when small { font-size: 11px; opacity: .8; }
.pt-fiesta { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 900; color: #3b0a2a; background: linear-gradient(90deg, #fbcfe8, #fde68a); }
/* ── Cartel del reto: borde de luz que gira, sello, boleto brillante y emojis según el tipo ── */
.party-card { --pa: #f472b6; --pb: #facc15; }
.party-card[data-cat="drinks"] { --pa: #f59e0b; --pb: #fde047; background: linear-gradient(165deg, #3b1d05 0%, #24120a 55%, #120904 100%) !important; }
.party-card[data-cat="physical"] { --pa: #22d3ee; --pb: #4ade80; background: linear-gradient(165deg, #062b2b 0%, #0a1d24 55%, #050d14 100%) !important; }
.party-card { box-shadow: 0 0 0 2px var(--pa), 0 0 44px color-mix(in srgb, var(--pa) 70%, transparent), 0 0 90px color-mix(in srgb, var(--pb) 35%, transparent), 0 30px 60px rgba(0, 0, 0, .6) !important; }
.party-ring { position: absolute; inset: -60%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 60%, var(--pa) 70%, var(--pb) 80%, transparent 90%); animation: ppSpin 4s linear infinite; opacity: .55; }
.party-card::before { content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 25px; background: inherit; }
.party-floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.party-floaters i { position: absolute; bottom: -30px; font-style: normal; font-size: 22px; opacity: .8; animation: ppFloat 4s linear infinite; }
@keyframes ppFloat { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-560px) rotate(40deg); opacity: 0; } }
.party-stamp { position: absolute; top: 14px; right: -34px; transform: rotate(32deg); padding: 4px 40px; font-weight: 900; font-size: 13px; letter-spacing: .12em; color: #1c1404;
  background: linear-gradient(90deg, var(--pb), var(--pa)); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); animation: ppStamp .7s cubic-bezier(.2, 1.6, .4, 1) .2s both; }
@keyframes ppStamp { from { transform: rotate(32deg) scale(2.2); opacity: 0; } to { transform: rotate(32deg) scale(1); opacity: 1; } }
.party-kicker { background: linear-gradient(90deg, var(--pb), var(--pa)) !important; }
.party-ava { box-shadow: 0 0 0 3px var(--pa), 0 0 24px var(--pa) !important; }
.party-ticket { position: relative; overflow: hidden; margin: 12px 0 16px; padding: 14px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1.5px dashed color-mix(in srgb, var(--pb) 75%, transparent); }
.party-ticket .party-dare { margin: 0 !important; text-shadow: 0 0 18px var(--pa), 0 2px 0 rgba(0, 0, 0, .5) !important; }
.party-ticket-shine { position: absolute; top: 0; bottom: 0; left: -50%; width: 35%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: lwShine 2.6s ease-in-out infinite; pointer-events: none; }
.party-card #party-done { background: linear-gradient(180deg, #fffbeb, var(--pb) 55%, var(--pa)) !important; color: #1c1404 !important; box-shadow: 0 0 20px color-mix(in srgb, var(--pb) 80%, transparent); animation: rwPulse 1.6s ease-in-out infinite; }
.party-reroll { border-color: color-mix(in srgb, var(--pa) 70%, transparent) !important; }
@media (prefers-reduced-motion: reduce) { .party-ring, .party-floaters i, .party-stamp, .party-ticket-shine, .party-card #party-done, .gx-party-ico *, .la-card.la-party .la-text b { animation: none !important; } .party-floaters { display: none; } }

/* Retoques: la tarjeta de fiesta con sus colores dentro de la galaxia del lobby y botones del momento del reto */
#jugar.galaxy .la-card.la-party {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(244, 114, 182, .38), transparent 60%) padding-box,
    radial-gradient(120% 140% at 100% 100%, rgba(250, 204, 21, .28), transparent 60%) padding-box,
    linear-gradient(#2a0b2e, #160a24) padding-box,
    linear-gradient(135deg, #f472b6, rgba(244, 114, 182, .2) 40%, rgba(250, 204, 21, .3) 62%, #facc15) border-box !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 28px -6px rgba(244, 114, 182, .95), inset 0 1px 0 rgba(255, 255, 255, .1) !important; }
.party-when button { border-radius: 14px !important; padding: 10px 12px !important; }
.party-when button b { font-size: 14px; line-height: 1.2; }
.party-when button small { font-size: 11px; }

/* ── Ruleta de los retos: el brillo salta entre los jugadores y se detiene en quien cumple el reto ── */
.party-roulette { z-index: 320; background: radial-gradient(circle at 50% 45%, rgba(88, 28, 135, .55), rgba(5, 3, 12, .94) 70%); }
.pr-wheel { display: grid; justify-items: center; gap: 18px; width: min(360px, 92vw); }
.pr-title { font-size: 18px; font-weight: 900; color: #fde68a; text-shadow: 0 0 14px rgba(250, 204, 21, .8); text-align: center; }
.pr-ring { position: relative; width: 280px; height: 280px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(244, 114, 182, .25), rgba(250, 204, 21, .25), rgba(34, 211, 238, .25), rgba(74, 222, 128, .25), rgba(244, 114, 182, .25));
  border: 3px solid rgba(253, 224, 71, .8); box-shadow: 0 0 40px rgba(244, 114, 182, .55), inset 0 0 30px rgba(0, 0, 0, .6); }
.pr-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 22px; background: radial-gradient(circle at 35% 30%, #fff, #facc15 45%, #b45309); box-shadow: 0 0 22px rgba(250, 204, 21, .9); animation: ppSpin 3s linear infinite; }
.pr-seat { position: absolute; left: 50%; top: 50%; width: 86px; margin: -43px 0 0 -43px; display: grid; justify-items: center; gap: 4px; transition: transform .12s ease, filter .12s ease; filter: grayscale(.4) brightness(.75); }
.pr-seat b { font-size: 12px; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.pr-ava { width: 54px; height: 54px; font-size: 22px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.pr-seat.on { filter: none; transform: scale(1.22); }
.pr-seat.on .pr-ava { box-shadow: 0 0 0 4px #fde047, 0 0 24px #facc15; }
.pr-seat.win .pr-ava { animation: prWin .5s ease-in-out infinite alternate; box-shadow: 0 0 0 4px #f472b6, 0 0 30px #f472b6; }
@keyframes prWin { to { transform: scale(1.12); } }
/* Posición de cada jugador alrededor de la ruleta (2, 3 o 4) */
.pr-n2 .pr-seat:nth-child(1) { transform: translate(0, 104px); } .pr-n2 .pr-seat:nth-child(2) { transform: translate(0, -104px); }
.pr-n3 .pr-seat:nth-child(1) { transform: translate(0, 104px); } .pr-n3 .pr-seat:nth-child(2) { transform: translate(-94px, -56px); } .pr-n3 .pr-seat:nth-child(3) { transform: translate(94px, -56px); }
.pr-n4 .pr-seat:nth-child(1) { transform: translate(0, 104px); } .pr-n4 .pr-seat:nth-child(2) { transform: translate(-104px, 0); }
.pr-n4 .pr-seat:nth-child(3) { transform: translate(0, -104px); } .pr-n4 .pr-seat:nth-child(4) { transform: translate(104px, 0); }
.pr-n2 .pr-seat.on:nth-child(1), .pr-n3 .pr-seat.on:nth-child(1), .pr-n4 .pr-seat.on:nth-child(1) { transform: translate(0, 104px) scale(1.22); }
.pr-n2 .pr-seat.on:nth-child(2), .pr-n4 .pr-seat.on:nth-child(3) { transform: translate(0, -104px) scale(1.22); }
.pr-n3 .pr-seat.on:nth-child(2) { transform: translate(-94px, -56px) scale(1.22); } .pr-n3 .pr-seat.on:nth-child(3) { transform: translate(94px, -56px) scale(1.22); }
.pr-n4 .pr-seat.on:nth-child(2) { transform: translate(-104px, 0) scale(1.22); } .pr-n4 .pr-seat.on:nth-child(4) { transform: translate(104px, 0) scale(1.22); }
.pr-result { min-height: 30px; font-family: Fraunces, serif; font-size: 24px; font-weight: 800; color: #fff; text-shadow: 0 0 16px #f472b6; text-align: center; }
/* Cartel: varios avatares (pareja), confirmaciones y aviso de bloqueo */
#party-ava { display: flex; justify-content: center; gap: 10px; }
.party-status { margin: -4px 0 12px; display: grid; justify-items: center; gap: 6px; }
.party-status[hidden] { display: none; }
.ps-count { font-size: 12.5px; font-weight: 800; color: #fde68a; }
.ps-list { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ps-p { position: relative; opacity: .55; }
.ps-p.ok { opacity: 1; }
.ps-ava { width: 34px; height: 34px; font-size: 14px; border-radius: 50%; }
.ps-p i { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px;
  background: #1e293b; border: 1.5px solid #94a3b8; }
.ps-p.ok i { background: #16a34a; border-color: #bbf7d0; color: #fff; }
.party-lock { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.party-card #party-done:disabled { animation: none; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .pr-hub, .pr-seat.win .pr-ava { animation: none; } }

/* ── Toque al primer intento ──
   · Sin espera de doble toque para zoom en botones, fichas y tarjetas.
   · En pantallas táctiles no hay «hover»: la ficha jugable no salta ni crece bajo el dedo (en iPhone el primer
     toque solo activaba ese efecto y hacía falta tocar otra vez). */
button, [role="button"], .rack-tile, .fr-card, .fr-act, .tile .face, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#hand, #friend-list { touch-action: pan-x pan-y; }
@media (hover: none) {
  #mesa .hand .tile.rack-tile.playable:hover { transform: translateY(-4px); }
  .fr-act:hover, .fr-card:hover { transform: none; }
}
#mesa .hand .tile.rack-tile .face { cursor: pointer; }
#mesa .hand .tile.rack-tile.playable:active { transform: translateY(-4px) scale(.97); transition-duration: .05s; }

/* La flecha «hay más abajo» solo se puede tocar cuando se ve: con más contenido debajo y en una lista abierta.
   (Antes su botón aceptaba toques siempre: los de modales cerrados quedaban invisibles sobre la lista de amigos
   y sobre las fichas de la mesa y se tragaban los toques.) */
.can-scroll-down > .scroll-cue button { pointer-events: auto; }
.end-modal:not(.on) .scroll-cue, .screen:not(.on) .scroll-cue { visibility: hidden; }
.end-modal:not(.on) .scroll-cue button, .screen:not(.on) .scroll-cue button { pointer-events: none !important; }

/* ── Ficha en vuelo (de la mano/asiento al tablero) ── */
.fly-layer { position: fixed; z-index: 90; pointer-events: none; transform-origin: center center; will-change: transform; }
.fly-layer > .tile { position: static !important; margin: 0 !important; animation: none !important; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.chain .tile.flying { visibility: hidden; animation: none !important; }
.chain .tile.landed { animation: tileLand .32s ease-out both !important; }
@keyframes tileLand { 0% { filter: brightness(1.35) drop-shadow(0 0 10px rgba(253, 224, 71, .9)); } 100% { filter: none; } }
/* ── Mesa más grande: sin panel inferior ── */
#mesa .table-console[hidden] { display: none !important; }
#mesa .tc-strip { display: flex; align-items: center; gap: 8px; margin: 0 2px 4px; min-height: 24px; }
#mesa .tc-strip .tc-status { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.25; color: #f6d27a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mesa .tc-strip .tc-timer { flex: none; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: #fde68a; background: rgba(0, 0, 0, .35); border: 1px solid rgba(240, 193, 74, .45); }
/* Dock flotante: micrófono + menú, en la esquina inferior derecha del tapete */
.table-dock { position: absolute; right: 10px; bottom: 10px; z-index: 25; display: flex; align-items: center; gap: 8px; }
.table-dock > .voice-fab, .table-dock .td-toggle { width: 42px !important; height: 42px !important; min-width: 0 !important; margin: 0 !important; border-radius: 50% !important; }
.td-toggle { position: relative; display: grid; place-items: center; font-size: 21px; cursor: pointer; color: #fff;
  background: rgba(10, 16, 30, .62); border: 1px solid rgba(240, 193, 74, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 14px -4px rgba(240, 193, 74, .7); transition: transform .15s ease, background .2s ease; }
.table-dock.open .td-toggle { background: rgba(240, 193, 74, .28); transform: rotate(-12deg) scale(1.05); }
.td-dot { position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: #ef4444; border: 2px solid #0a101e; display: none; }
.td-dot.on { display: block; }
.td-pop { position: absolute; right: 0; bottom: 52px; width: min(300px, calc(100vw - 40px)); padding: 10px; border-radius: 20px; display: grid; gap: 8px;
  background: rgba(8, 14, 28, .78); border: 1px solid rgba(240, 193, 74, .4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transform-origin: bottom right; animation: tdPop .18s cubic-bezier(.2, 1.3, .4, 1); }
.td-pop[hidden] { display: none; }
@keyframes tdPop { from { opacity: 0; transform: scale(.85) translateY(6px); } }
.td-pop #reacts { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center; width: auto !important; overflow: visible !important; }
.td-pop #reacts .react-phrase { flex: 1 1 auto; }
.td-row { display: flex; justify-content: center; gap: 10px; }
.td-row > button { position: relative; width: 42px !important; height: 42px !important; border-radius: 50% !important; margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .td-pop { animation: none; } }

/* Dock en la línea de estado (no tapa el tapete); el menú se abre hacia arriba */
#mesa .tc-strip .table-dock { position: relative; right: auto; bottom: auto; flex: none; gap: 6px; }
#mesa .tc-strip .table-dock > .voice-fab, #mesa .tc-strip .td-toggle { width: 36px !important; height: 36px !important; }
#mesa .tc-strip .td-toggle { font-size: 18px; }
#mesa .tc-strip .td-pop { bottom: 46px; right: 0; z-index: 60; }
#mesa .tc-strip .tc-timer { min-width: 30px !important; width: auto !important; height: 24px !important; padding: 0 8px !important; font-size: 12px !important; border-radius: 999px !important; }
#mesa .tc-strip .tc-timer::before, #mesa .tc-strip .tc-timer::after { display: none !important; }

/* Panel del menú flotante: fijo sobre el botón 😊 y por delante de todo (antes quedaba recortado bajo «Tu mano») */
#mesa > .td-pop { position: fixed !important; left: auto; top: auto; z-index: 400; }

/* Botón flotante del menú (emojis, stickers, frases y chat): esquina inferior derecha de la mesa, siempre visible */
#mesa { position: relative; }
.td-fab { position: absolute; z-index: 45; width: 58px; height: 58px; pointer-events: none; }
.td-fab .td-toggle { pointer-events: auto; position: relative; width: 58px !important; height: 58px !important; border-radius: 50% !important; font-size: 28px !important;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #facc15 45%, #d97706) !important; border: 2px solid #fff7d6 !important; color: #1c1404;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55), 0 0 0 4px rgba(250, 204, 21, .25), 0 0 22px rgba(250, 204, 21, .85) !important; animation: tdFabGlow 2.4s ease-in-out infinite; }
.td-fab .td-toggle:active { transform: scale(.93); }
.td-fab-chat { position: absolute; left: -6px; bottom: -4px; font-style: normal; font-size: 18px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.td-fab .td-dot { top: -2px; right: -2px; width: 15px; height: 15px; }
.td-fab .td-toggle[aria-expanded="true"] { transform: rotate(-10deg) scale(1.06); }
@keyframes tdFabGlow { 0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,.55), 0 0 0 4px rgba(250,204,21,.25), 0 0 16px rgba(250,204,21,.7); }
  50% { box-shadow: 0 8px 20px rgba(0,0,0,.55), 0 0 0 7px rgba(250,204,21,.18), 0 0 28px rgba(250,204,21,1); } }
@media (prefers-reduced-motion: reduce) { .td-fab .td-toggle { animation: none; } }
/* La línea de estado deja libre la esquina del botón flotante (micrófono y reloj quedan a su izquierda) */
#mesa .tc-strip { padding-right: 76px; }

/* ── Cara a Cara ── */
.h2h-list { display: grid; gap: 6px; }
.h2h-total { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; font-size: 13px; color: #cbd5e1; }
.h2h-total span { flex: 1; }
.h2h-total b, .h2h-score b { font-size: 18px; font-weight: 900; }
.h2h-w { color: #4ade80; } .h2h-l { color: #f87171; }
.h2h-total i, .h2h-score i { font-style: normal; color: #64748b; }
.h2h-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; text-align: left; cursor: pointer; color: #fff; font: inherit;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.h2h-row:active { transform: scale(.98); }
.h2h-ava { width: 38px; height: 38px; flex: none; font-size: 15px; border-radius: 50%; }
.h2h-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.h2h-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-who small { font-size: 11.5px; color: #94a3b8; }
.h2h-bar { height: 4px; border-radius: 3px; background: rgba(248, 113, 113, .5); overflow: hidden; }
.h2h-bar i { display: block; height: 100%; background: #4ade80; }
.h2h-score { flex: none; display: flex; align-items: baseline; gap: 4px; }
.h2h-tag { font-style: normal; font-weight: 800; padding: 0 5px; border-radius: 6px; }
.h2h-tag.papa, .h2h-tag.domina { color: #fde68a; background: rgba(250, 204, 21, .14); }
.h2h-tag.hijo, .h2h-tag.sufre { color: #fecaca; background: rgba(248, 113, 113, .14); }
.h2h-tag.pareja { color: #bae6fd; background: rgba(56, 189, 248, .14); }
.h2h-list.compact .h2h-row { padding: 6px 8px; }
.h2h-list.compact .h2h-ava { width: 30px; height: 30px; }

/* Conteo regresivo de 5 s antes de arrancar: no bloquea la sala (el anfitrión aún puede sacar a alguien) */
.start-countdown {
  position: fixed; inset: 0; z-index: 900; display: none; align-items: flex-start; justify-content: center;
  padding-top: 16vh; pointer-events: none; background: radial-gradient(circle at 50% 28%, rgba(0, 0, 0, .35), transparent 60%);
}
.start-countdown.on { display: flex; }
.start-countdown .sc-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 28px 12px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(42, 28, 8, .92), rgba(15, 10, 4, .92)); border: 2px solid #f0c14a;
  box-shadow: 0 0 30px rgba(255, 140, 30, .6), 0 12px 30px rgba(0, 0, 0, .55); color: #fde68a; text-align: center;
}
.start-countdown small { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fcd34d; }
.start-countdown .sc-num {
  font-size: 84px; line-height: 1; font-weight: 900; color: #fff7d6; text-shadow: 0 0 18px rgba(255, 140, 30, .95), 0 4px 0 #7c4a0a;
  animation: scPop 1s ease-out infinite;
}
.start-countdown span { font-size: 13px; font-weight: 700; color: #fde68a; opacity: .9; }
@keyframes scPop { 0% { transform: scale(1.35); opacity: .4; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .start-countdown .sc-num { animation: none; } }

/* Dar agua: las fichas boca abajo se revuelven en el centro del tapete y se reparten */
.water-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.water-tile {
  position: absolute; left: 0; top: 0; border-radius: 3px; will-change: transform;
  background: linear-gradient(180deg, #1e3a8a 0 50%, #b91c1c 50% 100%);
  border: 1.5px solid #f8f1dc; box-shadow: 0 2px 4px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(240, 193, 74, .55);
}
.water-tile::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, #fde68a, #b45309); opacity: .85;
}
body.watering #felt .pod-tiles, body.watering #felt .pod-backs, body.watering #mine-count { visibility: hidden; }
/* Recoger la mesa: cada ficha se voltea boca abajo antes de juntarse en el centro */
#chain .chain-slot.collecting { transition: none; }
#chain .chain-slot.collecting .tile { position: relative; }
#chain .chain-slot.collecting .tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 5;
  background: linear-gradient(180deg, #1e3a8a 0 50%, #b91c1c 50% 100%); box-shadow: inset 0 0 0 2px #f8f1dc, inset 0 0 0 3px rgba(240, 193, 74, .55);
  animation: collectFlip .22s ease-out .1s both;
}
@keyframes collectFlip { from { opacity: 0; } to { opacity: 1; } }

/* Ficha que no entra: pequeño temblor al tocarla (sin pistas previas) */
#hand .rack-tile.nofit { animation: nofitShake .38s ease; }
@keyframes nofitShake { 0%, 100% { translate: 0 0; } 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
/* Sesión abierta en otro dispositivo */
#modal-session .ses-text { margin: 4px 0 14px; font-size: 14px; line-height: 1.45; opacity: .9; text-align: center; }
#modal-session .end-box-btn.ghost { margin-top: 8px; background: transparent; border: 1.5px solid currentColor; box-shadow: none; }

/* Atril: arrastrar para reordenar y virar fichas */
#hand .rack-tile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#hand .rack-tile.armed { outline: 2px solid #f0c14a; outline-offset: 2px; border-radius: 8px; }
#hand .rack-tile.drag-src { opacity: .3; }
#hand .rack-tile.drop-before { box-shadow: -5px 0 0 -1px #f0c14a; }
#hand .rack-tile.drop-after { box-shadow: 5px 0 0 -1px #f0c14a; }
.rack-ghost { position: fixed; z-index: 1200; pointer-events: none; margin: 0; transform: rotate(-4deg) scale(1.08);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); transition: none; }
#hand .rack-tile.just-flipped { animation: rackFlip .32s ease; }
@keyframes rackFlip { 0% { transform: rotate(180deg) scale(.85); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { #hand .rack-tile.just-flipped { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   RENDIMIENTO · que la mesa no caliente el móvil
   Las animaciones de box-shadow/filter repintan en cada fotograma (120 Hz en
   iPhone Pro). Aquí los latidos pasan a opacity/transform, que mueve la GPU sin
   repintar, y en pantallas táctiles se apagan los cristales y brillos de adorno.
   ════════════════════════════════════════════════════════════════════ */
/* Turno: la sombra fuerte vive en una capa propia y solo late su opacidad */
#felt .seat-pod.turn, #felt .seat-pod.turn-fast { animation: none !important; }
#felt .seat-pod.turn::before, #felt .seat-pod.turn-fast::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(253, 230, 138, .9), 0 0 36px 6px rgba(255, 170, 40, .75), 0 0 70px -4px rgba(255, 110, 20, .7);
  opacity: 0; will-change: opacity; animation: perfGlow 1.2s ease-in-out infinite; }
#felt .seat-pod.turn-fast::before { box-shadow: 0 0 0 2px rgba(252, 165, 165, .95), 0 0 38px 6px rgba(239, 68, 68, .85); animation-duration: .45s; }
@keyframes perfGlow { 50% { opacity: 1; } }
/* Aureola: sin drop-shadow encima de un giro; el halo es fijo y el aro gira en su capa */
.turn-aura, .seat-pod.turn-fast .turn-aura { filter: none; will-change: rotate; }
.pod-ava-wrap:has(> .turn-aura) { border-radius: 50%; box-shadow: 0 0 12px 2px rgba(255, 130, 20, .75); }
.seat-pod.turn-fast .pod-ava-wrap:has(> .turn-aura) { box-shadow: 0 0 12px 2px rgba(239, 68, 68, .8); }
.turn-aura::after, .pod-turn-flag, .has-frame::after { will-change: transform; }
/* Atril en tu turno: brillo fijo (el latido repintaba toda la fila de fichas) */
#mesa .hand-zone.rack.my-turn { animation: none !important;
  box-shadow: 0 0 0 2.5px rgba(253, 230, 138, .95), 0 0 38px 0 rgba(255, 170, 40, .85), 0 -6px 24px rgba(0, 0, 0, .4) !important; }
/* Barra de tiempo: se encoge con scaleX (ver startTurnTimer) */
#turn-bar { width: 100% !important; transform-origin: left center; transform: scaleX(0); will-change: transform; }

@media (hover: none) and (pointer: coarse) {
  /* Cristal esmerilado: en la mesa se cambia por fondo más opaco */
  #felt .seat-pod, #felt .seat-pod.compact.me, .table-console {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  #felt .seat-pod { background: rgba(6, 14, 26, .86); }
  .table-console { background: rgba(6, 14, 26, .9); }
  /* Latidos de sombra/filtro que no aportan información: brillo fijo */
  .tiles-pill.low, .pod-count.low { animation: none !important; box-shadow: 0 0 10px rgba(239, 68, 68, .6); }
  .tiles-pill.low.bump, .pod-count.low.bump { animation: pillBump .45s ease !important; }
  .chain .tile.closing-tile { animation: none !important; box-shadow: 0 0 18px 6px rgba(250, 204, 21, .9); }
  .rack-timer.fast i { animation: none !important; }
  .pod-backs.back-fire .back, body.back-fire .backs .back { animation: none; box-shadow: 0 0 10px rgba(249, 115, 22, .55); }
  .frm-fire, .ava-legend.rar-legend { animation: none; box-shadow: 0 0 14px rgba(249, 115, 22, .6); }
  .frm-neon::after, .frm-bolt::after, .frm-fire::after { filter: none; }
  .stk-glow, .stk-crowns, .stk-fireworks { animation: stkFloat 2s ease-in-out infinite; }
  .ft-dot.online, .oc-dot.on { animation: none; }
  .home-ambient i { filter: blur(30px); }
  /* Botón flotante de la mesa y fichas del sorteo: brillo fijo */
  .td-fab .td-toggle { animation: none; }
  .puja-tile.pickable { animation: none; filter: drop-shadow(0 0 8px rgba(240, 193, 74, .7)); }
  /* Botón de pasar y reloj en aviso: solo el latido de escala, la sombra queda fija */
  .pass-btn, .cede-btn, #timer.warn, #mesa .tc-timer.warn { animation-name: perfScale !important; }
  #timer.warn, #mesa .tc-timer.warn { box-shadow: 0 0 12px rgba(245, 158, 11, .7); }
}
@keyframes perfScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* Modales cerrados (solo opacity: 0): sus animaciones infinitas seguían corriendo
   durante la partida. En pausa no generan fotogramas y arrancan al abrirse. */
.end-modal:not(.on), .end-modal:not(.on) *, .end-modal:not(.on) *::before, .end-modal:not(.on) *::after { animation-play-state: paused !important; }