:root { color-scheme: dark; }
      * { box-sizing: border-box; }
      /* Dentro de la app Android (Capacitor pone html.in-app): ocultar los
         reclamos para "descargar la app", ya estás en ella. */
      html.in-app #lpDownloadApk,
      html.in-app #sbDownloadApk,
      html.in-app .mv3-getapp { display: none !important; }
      body {
        margin: 0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        color: #e8ecf3; min-height: 100vh;
        background:
          radial-gradient(1400px 800px at 10% -5%, #1a2060 0%, rgba(26,32,96,0) 55%),
          radial-gradient(1100px 800px at 100% 0%, #4a1260 0%, rgba(74,18,96,0) 50%),
          radial-gradient(1000px 900px at 50% 130%, #0d2a40 0%, rgba(13,42,64,0) 55%),
          radial-gradient(800px 600px at 80% 80%, #2d0d40 0%, rgba(45,13,64,0) 55%),
          /* refuerzo: antes el centro/izquierda y la parte baja quedaban casi
             negras sin ningún degradado cerca — la web se veía muy vacía. */
          radial-gradient(1200px 900px at 0% 55%, #1a0d3a 0%, rgba(26,13,58,0) 60%),
          radial-gradient(1300px 1000px at 95% 60%, #0d1a3a 0%, rgba(13,26,58,0) 60%),
          radial-gradient(900px 700px at 35% 100%, #2a0a35 0%, rgba(42,10,53,0) 55%),
          #0a0d1c;
        overflow-x: hidden;
      }

      /* fondo: rejilla de puntos muy sutil + cuadraditos flotando con bokeh,
         para que las zonas negras del viewport tengan algo de textura */
      #bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
        background-image: radial-gradient(rgba(160,107,255,0.13) 1px, transparent 1.5px);
        background-size: 34px 34px; opacity: .5; }
      .bg-tile {
        position: absolute; bottom: -80px; display: block;
        box-shadow: inset 0 -6px 0 rgba(0,0,0,0.18), 0 6px 18px rgba(0,0,0,0.25);
        animation-name: floatUp; animation-timing-function: linear; animation-iteration-count: infinite;
        transform: rotate(0deg);
        opacity: 0.22;
        filter: blur(1.5px);
      }
      @keyframes floatUp {
        0%   { transform: translateY(0) rotate(0deg); }
        100% { transform: translateY(-115vh) rotate(220deg); }
      }

      header {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.09);
        backdrop-filter: blur(16px);
        background: linear-gradient(180deg, rgba(15,18,35,0.85) 0%, rgba(10,12,24,0.6) 100%);
        box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.4);
      }
      header h1 { margin: 0; font-size: 18px; letter-spacing: 0.5px; }
      #status { padding: 10px 20px; color: #9fb0c8; min-height: 22px; }
      .wrap { padding: 20px; }

      #lobby {
        max-width: min(440px, 92vw); margin: 6vh auto; padding: 28px;
        background: linear-gradient(160deg, rgba(40,50,80,0.72) 0%, rgba(18,22,40,0.88) 100%);
        border: 1px solid rgba(255,255,255,0.13); border-radius: 22px;
        box-shadow: 0 32px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3);
        backdrop-filter: blur(22px);
        position: relative;
      }
      #lobby::before {
        content: ''; position: absolute; inset: -1px; border-radius: 23px; z-index: -1;
        background: conic-gradient(from 180deg, rgba(79,138,255,0.18), rgba(180,107,255,0.14), rgba(46,204,113,0.1), rgba(255,212,71,0.1), rgba(79,138,255,0.18));
        pointer-events: none;
      }
      .lobby-title { text-align: center; font-size: 30px; font-weight: 900; margin: 0 0 4px; letter-spacing: 0.5px; }
      .lobby-title span { display: inline-block; }
      .c1{color:#e74c3c}.c2{color:#3498db}.c3{color:#2ecc71}.c4{color:#f1c40f}.c5{color:#9b59b6}.c6{color:#e67e22}
      .lobby-sub { text-align: center; color: #9fb0c8; font-size: 13px; margin: 0 0 18px; }
      .field-label { font-size: 12px; color: #9fb0c8; margin-bottom: 4px; display: block; letter-spacing: 0.4px; }
      .row { display: flex; gap: 10px; margin: 12px 0; align-items: center; }
      button {
        background: linear-gradient(135deg, rgba(100,150,255,0.8) 0%, rgba(180,107,255,0.7) 100%);
        backdrop-filter: blur(10px);
        color: #fff; border: 1px solid rgba(200,220,255,0.3); padding: 12px 18px; border-radius: 12px;
        font-size: 14px; font-weight: 700;
        cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1);
        position: relative; overflow: hidden;
      }
      button::before {
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left .5s;
      }
      button:hover {
        background: linear-gradient(135deg, rgba(110,160,255,0.9) 0%, rgba(190,120,255,0.8) 100%);
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(100,150,255,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
        border-color: rgba(200,220,255,0.5);
      }
      button:hover::before { left: 100%; }
      button:active { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(100,150,255,0.3); }
      button:disabled {
        background: rgba(60,80,120,0.3);
        cursor: default; transform: none; box-shadow: none; border-color: rgba(100,120,160,0.2);
        opacity: 0.6;
      }
      input {
        background: linear-gradient(135deg, rgba(20,30,60,0.4) 0%, rgba(40,20,60,0.3) 100%);
        border: 1.5px solid rgba(100,150,255,0.25);
        color: #e8ecf3; padding: 13px 16px; border-radius: 12px; font-size: 15px; width: 100%;
        backdrop-filter: blur(8px);
        transition: all .3s cubic-bezier(.4,0,.2,1);
        font-weight: 500;
      }
      input::placeholder { color: rgba(200,210,230,0.5); font-weight: 400; }
      input:focus {
        outline: none;
        border-color: rgba(127,160,255,0.8);
        background: linear-gradient(135deg, rgba(20,30,60,0.5) 0%, rgba(40,20,60,0.4) 100%);
        box-shadow: 0 0 0 3px rgba(79,138,255,0.25), 0 0 20px rgba(127,160,255,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
      }
      #joinCode { text-transform: uppercase; letter-spacing: 3px; }
      .divider { text-align: center; color: #5b6a82; font-size: 12px; margin: 16px 0 8px; }
      #createBtn { width: 100%; padding: 13px; font-size: 15px; }
      .join-row { display: flex; gap: 10px; }
      .join-row input { flex: 1; }
      #readyBtn { margin-top: 14px; width: 100%; padding: 13px; background: linear-gradient(180deg,#52e891,#2ecc71 60%,#22b862); box-shadow: 0 8px 24px rgba(46,204,113,0.35); }

      /* --- sala / selector de juegos --- */
      #room { display: none; }
      .room-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
      .room-head .code { font-size: 22px; font-weight: 800; color: #7fffbf; letter-spacing: 4px; }
      .sel-title { font-weight: 800; margin: 10px 0 6px; font-size: 14px; }
      .game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
      .game-card {
        background: linear-gradient(160deg, rgba(40,50,75,0.5) 0%, rgba(10,14,26,0.6) 100%);
        border: 1.5px solid rgba(255,255,255,0.10); border-radius: 14px;
        padding: 12px 6px; text-align: center; cursor: pointer;
        transition: transform .12s, border-color .18s, background .18s, box-shadow .18s;
        backdrop-filter: blur(8px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      }
      .game-card:hover { transform: translateY(-4px) scale(1.03); border-color: rgba(127,255,191,0.45); background: linear-gradient(160deg, rgba(46,204,113,0.12) 0%, rgba(10,14,26,0.7) 100%); box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
      .game-card:hover .emoji { transform: scale(1.18) rotate(-4deg); }
      .game-card .emoji { font-size: 30px; line-height: 1; transition: transform .15s; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
      .game-card.selected .emoji { animation: cardBounce 1.6s ease-in-out infinite; }
      @keyframes cardBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px) scale(1.06); } }
      .game-card .gname { font-weight: 800; font-size: 13px; margin-top: 6px; }
      .game-card .gtag { font-size: 10px; color: #9fb0c8; margin-top: 3px; min-height: 26px; }
      .game-card.selected { border-color: #7fffbf; background: linear-gradient(160deg, rgba(46,204,113,0.18) 0%, rgba(10,14,26,0.7) 100%); box-shadow: 0 0 0 2px rgba(127,255,191,0.25), 0 0 20px rgba(127,255,191,0.15), inset 0 1px 0 rgba(127,255,191,0.2); }
      .game-card.soon { opacity: 0.55; cursor: not-allowed; }
      .game-card.locked { cursor: default; }
      .badge { display: inline-block; font-size: 9px; font-weight: 800; padding: 1px 7px; border-radius: 6px; margin-top: 5px; letter-spacing: 0.5px; }
      .badge.ready { background: #2ecc71; color: #06351c; }
      .badge.soon { background: #8a6d3b; color: #fff2d6; }
      .players { display: flex; gap: 10px; justify-content: center; margin: 4px 0 8px; flex-wrap: wrap; }
      .pchip { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 6px 12px; font-size: 13px; backdrop-filter: blur(6px); }
      .pchip.ready { border-color: #2ecc71; color: #bff7d6; box-shadow: 0 0 10px rgba(46,204,113,0.2); }
      .pchip .crown { margin-left: 4px; }

      #game { display: none; }
      #topbar { text-align: center; margin-bottom: 14px; }
      #timer { font-size: 44px; font-weight: 900; color: #7fffbf; text-shadow: 0 0 22px rgba(127,255,191,0.6), 0 0 8px rgba(127,255,191,0.4); letter-spacing: 1px; }
      #timer.danger, #bubbleTimer.danger, #snakeTimer.danger { color: #ff5d73; text-shadow: 0 0 22px rgba(255,93,115,0.7), 0 0 8px rgba(255,93,115,0.5); animation: timerPulse 0.7s ease-in-out infinite; }
      @keyframes timerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
      .topbar-sub { color: #9fb0c8; font-size: 13px; }

      .boards { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; }
      .board-col { text-align: center; }
      .board-col h3 { margin: 6px 0; }
      /* Overlays a pantalla completa: SIEMPRE transparentes (no heredan el fondo de canvas{}) */
      #fxCanvas, #confettiCanvas { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
      canvas { background: #1b1f2a; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.35); max-width: 92vw; height: auto; touch-action: none; }
      /* glow de canvas por juego */
      #selfCanvas, #oppCanvas { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(46,204,113,0.2), inset 0 0 40px rgba(0,0,0,0.35); border-color: rgba(46,204,113,0.25); }
      #bubbleCanvas { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(79,138,255,0.2), inset 0 0 40px rgba(0,0,0,0.35); border-color: rgba(79,138,255,0.3); }
      #snakeCanvas  { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(46,204,113,0.2), inset 0 0 40px rgba(0,0,0,0.35); border-color: rgba(46,204,113,0.25); }
      #runnerCanvas { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,89,182,0.25), inset 0 0 40px rgba(0,0,0,0.35); border-color: rgba(155,89,182,0.3); }
      #raceCanvas   { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(210,160,60,0.25), inset 0 0 40px rgba(0,0,0,0.35); border-color: rgba(210,160,60,0.3); }
      .stats { margin: 10px auto; font-size: 14px; color: #cdd6e6; display: inline-block; padding: 8px 18px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; backdrop-filter: blur(6px); }
      .stats b { color: #ffd47f; }
      .big { font-size: 24px; font-weight: 900; color: #7fffbf; text-shadow: 0 0 16px rgba(127,255,191,0.55), 0 0 6px rgba(127,255,191,0.3); }

      #banner { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); background: #ff3d6e; padding: 10px 22px; border-radius: 10px; font-weight: 700; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
      #overlay { display: none; position: fixed; inset: 0; z-index: 999; background: radial-gradient(circle at 50% 40%, rgba(20,26,46,0.32), rgba(0,0,0,0.4)); align-items: center; justify-content: center; flex-direction: column; backdrop-filter: blur(1.5px); pointer-events: none; }
      #overlay > * { pointer-events: auto; }
      #overlayText { font-size: 46px; font-weight: 900; text-shadow: 0 6px 30px rgba(0,0,0,0.6); animation: popIn 0.45s cubic-bezier(.2,1.4,.4,1) both; }
      @keyframes popIn { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
      .hint { color: #6b7a92; font-size: 13px; }
      #frozenTag { display: none; margin-left: 8px; background: #2b6cb0; color: #dff3ff; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }

      /* barra de carga del booster */
      .charge-wrap { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 6px auto 2px; max-width: 384px; }
      .charge { flex: 1; height: 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; }
      .charge-fill { height: 100%; width: 0%; border-radius: 8px; background: linear-gradient(90deg,#3d7bff,#9b59b6); transition: width .25s ease, background .25s; }
      .charge-fill.full { background: linear-gradient(90deg,#ffd447,#ff9a3d); box-shadow: 0 0 14px rgba(255,212,71,0.6); }
      #boosterBtn { padding: 7px 12px; font-size: 13px; background: #3a4154; }
      #boosterBtn.ready { background: linear-gradient(180deg,#ffd447,#ff9a3d); color: #3a2400; animation: timerPulse 0.8s ease-in-out infinite; }
      .pu-cancel { background: #3a4154; padding: 7px 14px; font-size: 12px; }

      /* menú de power-up (aparece al juntar 4+) */
      #powerupMenu {
        display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
        background: #1a1f2b; border: 2px solid #3d7bff; border-radius: 14px; padding: 14px 18px;
        flex-direction: column; align-items: center; gap: 10px; z-index: 20;
        box-shadow: 0 10px 40px rgba(0,0,0,0.6);
      }
      #powerupMenu .pu-title { font-weight: 800; font-size: 15px; }
      #powerupMenu .pu-row { display: flex; gap: 10px; }
      .pu-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; padding: 12px; border-radius: 10px; font-weight: 700; }
      .pu-btn small { font-weight: 500; opacity: 0.85; font-size: 11px; }
      #puTriple { background: #2ecc71; }
      #puTriple:hover { background: #41dd84; }
      #puSteal { background: #e67e22; }
      #puSteal:hover { background: #f08a32; }
      #puFreeze { background: #2b6cb0; }
      #puFreeze:hover { background: #3a7fc8; }
      #puBomb { background: #c0392b; }
      #puBomb:hover { background: #d84a3a; }

      /* --- Revienta Burbujas --- */
      /* Panel centrado: encuadra el tablero para que no quede perdido en pantallas anchas */
      #bubbleGame {
        display: none; text-align: center;
      }
      #bubbleGame.is-active {
        display: block;
        max-width: 520px;
        margin: 24px auto;
        padding: 20px 18px 24px;
        background: linear-gradient(180deg, rgba(30,38,68,0.55), rgba(16,22,42,0.65));
        border: 1px solid rgba(79,138,255,0.18);
        border-radius: 20px;
        box-shadow: 0 18px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.03);
      }
      #bubbleTopbar { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 10px; }
      #bubbleTimer { font-size: 34px; font-weight: 800; color: #7fffbf; min-width: 90px; text-shadow: 0 0 18px rgba(127,255,191,0.55); }
      #bubbleTimer.danger { color: #ff5d73; text-shadow: 0 0 18px rgba(255,93,115,0.6); }
      #bbLevel { font-size: 13px; color: #b46bff; font-weight: 700; letter-spacing: .5px; }
      .bubble-scores { font-size: 18px; }
      .bubble-scores b { color: #ffd47f; font-size: 22px; }
      .bs-self { color: #7fffbf; }
      .bs-opp { color: #ff9a9a; }
      #bubbleCanvas { background: #0e1320; border-radius: 12px; border: 2px solid #2a3144; max-width: 96vw; height: auto; cursor: crosshair; }
      #bubbleFrozen { display: none; color: #7fdfff; font-weight: 700; margin: 8px 0; }
      #bubbleBuffs { display: none; color: #ffd447; font-weight: 800; margin: 8px 0; letter-spacing: 0.5px; text-shadow: 0 0 12px rgba(255,212,71,0.4); }

      /* --- Fuga del Templo (runner co-op) --- */
      #runnerGame { display: none; text-align: center; }
      #runnerHud { display: flex; justify-content: center; gap: 26px; font-size: 20px; font-weight: 800; margin-bottom: 8px; }
      #runnerHud span { color: #ffd47f; }
      #runnerCanvas { background: #161022; border-radius: 12px; border: 2px solid #2a3144; max-height: 70vh; max-width: 96vw; height: auto; }
      #runnerControls { display: flex; gap: 12px; justify-content: center; margin: 10px 0; }
      #runnerControls .rc { font-size: 20px; padding: 12px 22px; background: linear-gradient(180deg,#4f8aff,#3d7bff); }
      #runnerControls .rc[data-dir="jump"] { background: linear-gradient(180deg,#41dd84,#2ecc71); }

      /* --- Apuestas de Caballos --- */
      #raceGame { display: none; text-align: center; max-width: 760px; margin: 0 auto; }
      #raceTop { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 6px; }
      #racePhase { font-size: 20px; color: #ffd447; }
      #raceTimer { font-size: 22px; color: #7fffbf; min-width: 44px; }
      #raceMoney { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 16px; }
      #raceMoney .m-self b { color: #7fffbf; } #raceMoney .m-opp b { color: #ff9a9a; }
      #raceCanvas { background: #13180f; border-radius: 12px; border: 2px solid #2a3144; max-width: 96vw; height: auto; width: 100%; }
      #raceBetPanel { margin-top: 10px; }
      #horseList { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
      .horse-btn { background: #1a1f2b; border: 2px solid #2a3144; border-radius: 10px; padding: 9px 12px; color: #e8ecf3; font-weight: 700; display: flex; align-items: center; gap: 6px; }
      .horse-btn .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
      .horse-btn small { color: #9fb0c8; }
      .horse-btn.selected { border-color: #7fffbf; }
      .horse-btn.betted { background: #143b2a; border-color: #2ecc71; }
      #amountRow { margin-top: 10px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
      #amountRow .amt { padding: 9px 14px; }
      #betInfo { color: #cdd6e6; font-size: 13px; width: 100%; margin-top: 4px; }
      #raceResult { display: none; margin-top: 12px; font-size: 18px; }

      /* --- Snake Duelo --- */
      #snakeGame { display: none; text-align: center; }
      #snakeTopbar { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 10px; flex-wrap: wrap; }
      #snakeTimer { font-size: 34px; font-weight: 800; color: #7fffbf; min-width: 90px; text-shadow: 0 0 18px rgba(127,255,191,0.55); }
      #snakeTimer.danger { color: #ff5d73; text-shadow: 0 0 18px rgba(255,93,115,0.6); }
      .snake-scores { font-size: 17px; } .snake-scores b { font-size: 21px; } .snake-scores small { color: #9fb0c8; }
      #snakeCanvas { background: #0d1018; border-radius: 12px; border: 2px solid #2a3144; max-width: 96vw; height: auto; touch-action: none; }
      #snakeControls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; }
      #snakeControls .sc-mid { display: flex; gap: 8px; }
      #snakeControls .sc { font-size: 20px; padding: 12px 20px; background: linear-gradient(180deg,#4f8aff,#3d7bff); }

      /* --- overlay: botones de fin de partida --- */
      #againBtn { padding: 13px 26px; font-size: 16px; background: linear-gradient(180deg,#52e891,#2ecc71 60%,#22b862); box-shadow: 0 8px 24px rgba(46,204,113,0.4); }
      #menuBtn  { padding: 13px 26px; font-size: 16px; background: linear-gradient(180deg, #4a536a, #3a4154); }
      #overlayCoins { margin-top: 10px; font-size: 26px; font-weight: 800; color: #ffd447; min-height: 30px; text-shadow: 0 0 18px rgba(255,212,71,0.6), 0 0 6px rgba(255,212,71,0.3); }

      /* --- cabecera: cartera (usuario + monedas) --- */
      header { display: flex; align-items: center; justify-content: space-between; }
      #wallet { display: none; align-items: center; gap: 14px; font-weight: 700; }
      #wallet .coins { color: #ffd447; font-size: 16px; }
      #wallet .who { color: #cfe6ff; }
      #logoutBtn { padding: 6px 14px; font-size: 13px; font-weight: 700; background: rgba(220,60,60,0.15); border: 1px solid rgba(220,80,80,0.3); color: #ff9090; border-radius: 10px; white-space: nowrap; }

      /* --- pantalla de login / registro (glassmorphism elegante) --- */
      #auth { max-width: min(420px, 92vw); margin: 6vh auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 5vw, 32px);
        background: linear-gradient(135deg, rgba(20,30,60,0.92) 0%, rgba(30,15,50,0.95) 100%);
        border: 1.5px solid rgba(100,130,255,0.3);
        border-radius: 28px;
        box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(100,130,255,0.15);
        position: relative; overflow: hidden; }
      #auth::before { content: none !important; display: none !important; }
      #auth h2 { text-align: center; margin: 0 0 8px; font-size: 32px; font-weight: 900;
        background: linear-gradient(135deg, #7fb0ff 0%, #b48bff 50%, #2ecc71 100%);
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
      #auth .sub { text-align: center; color: #c9d4e8; font-size: 14px; margin: 0 0 24px; font-weight: 500; }
      #auth input { margin-bottom: 14px; }
      #auth .auth-row { display: flex; gap: 12px; }
      #auth .auth-row button { flex: 1; padding: 14px; font-size: 14px; }

      /* ====== landing redesign ====== */
      .auth-logo { text-align: center; margin-bottom: 28px; }
      .auth-emoji { font-size: 56px; line-height: 1; margin-bottom: 8px; animation: float 3s ease-in-out infinite; }
      @keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
      .auth-tagline { color: #b0c4dd; font-size: 13px; margin: 6px 0 0; letter-spacing: 0.5px; font-weight: 500; }
      #guestBtn {
        width: 100%; padding: 16px 20px; font-size: 18px; font-weight: 800; letter-spacing: 0.6px;
        background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 25%, #ff5364 50%, #ff9a3d 75%, #ff7e5f 100%);
        background-size: 200% 200%;
        box-shadow: 0 8px 32px rgba(255,100,100,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
        border-radius: 16px; margin-bottom: 8px; animation: gradientShift 4s ease infinite;
        position: relative; overflow: hidden;
      }
      #guestBtn::before {
        content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        animation: shimmer 2s infinite;
      }
      #guestBtn:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(255,100,100,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
      @keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
      @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
      .guest-note { text-align: center; color: #9fb0c8; font-size: 12px; margin: 0 0 18px; }
      .auth-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
      .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
      .auth-divider span { font-size: 12px; color: #6b7a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
      #authFields input { font-size: 14px; padding: 10px; }
      #registerBtn { background: linear-gradient(180deg,#4f8aff,#3d7bff); }
      .login-secondary { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.15) !important; }
      #authError { color: #ff8a8a; font-size: 13px; min-height: 20px; text-align: center; margin-top: 8px; }

      /* banner invitado en cabecera */
      #guestBanner { background: linear-gradient(90deg,rgba(255,154,61,0.15),rgba(180,107,255,0.15)); border: 1px solid rgba(255,154,61,0.3); border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: #ffc9a0; display: none; align-items: center; gap: 8px; }
      #guestBanner button { padding: 4px 10px; font-size: 11px; background: linear-gradient(180deg,#4f8aff,#3d7bff); box-shadow: none; }

      /* nudge en el overlay tras partida siendo invitado */
      #overlayGuest { display: none; margin-top: 14px; background: rgba(79,138,255,0.10); border: 1px solid rgba(79,138,255,0.28); border-radius: 12px; padding: 12px 16px; text-align: center; max-width: 320px; }
      #overlayGuest p { margin: 0 0 8px; font-size: 13px; color: #cdd6e6; }
      #overlayGuest button { padding: 9px 20px; font-size: 13px; }

      /* ====== UI tipo APP: animaciones, paneles, pills, toggles, lista de salas ====== */
      @keyframes riseIn { 0% { opacity: 0; transform: translateY(16px) scale(.98); } 100% { opacity: 1; transform: none; } }
      #auth, #lobby { animation: riseIn .5s cubic-bezier(.2,1,.3,1) both; }

      header h1 { background: linear-gradient(90deg,#7fb0ff,#b48bff,#7fffbf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(127,160,255,0.25)); }

      /* botones: brillo + elevación al pasar el cursor */
      button { position: relative; box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
      button:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.38); }
      button:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
      button:disabled { transform: none; box-shadow: none; }

      /* logos con letras que flotan en cascada */
      .lobby-title span, #auth h2 span { animation: bob 2.8s ease-in-out infinite; }
      .lobby-title span:nth-child(2), #auth h2 span:nth-child(2) { animation-delay: .12s; }
      .lobby-title span:nth-child(3), #auth h2 span:nth-child(3) { animation-delay: .24s; }
      .lobby-title span:nth-child(4), #auth h2 span:nth-child(4) { animation-delay: .36s; }
      .lobby-title span:nth-child(5), #auth h2 span:nth-child(5) { animation-delay: .48s; }
      .lobby-title span:nth-child(6), #auth h2 span:nth-child(6) { animation-delay: .60s; }
      @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

      /* tarjeta de auth — sin animación que tape el contenido */
      @keyframes spin { to { transform: rotate(360deg); } }
      .auth-emoji { text-align: center; font-size: 44px; line-height: 1; margin-bottom: 4px; animation: bob 3s ease-in-out infinite; }

      /* paneles del lobby */
      .panel {
        background: linear-gradient(160deg, rgba(30,40,65,0.5) 0%, rgba(8,12,22,0.65) 100%);
        border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 14px 16px; margin: 12px 0;
        backdrop-filter: blur(10px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 16px rgba(0,0,0,0.2);
        transition: border-color .2s, box-shadow .2s;
      }
      .panel:hover { border-color: rgba(127,160,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 6px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(79,138,255,0.1); }
      .panel-title { font-weight: 800; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

      /* selector de nº de jugadores (pills) */
      .pill-row { display: flex; gap: 8px; }
      .pill { flex: 1; padding: 11px 0; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; font-weight: 800; font-size: 17px; color: #cdd6e6; box-shadow: none; }
      .pill:hover { transform: translateY(-2px); border-color: rgba(127,160,255,0.6); color: #fff; }
      .pill.selected { background: linear-gradient(180deg,#4f8aff,#3d7bff); color: #fff; border-color: transparent; box-shadow: 0 0 0 3px rgba(79,138,255,0.25); }

      /* toggle público/privado */
      .seg { display: flex; gap: 8px; }
      .seg-btn { flex: 1; padding: 11px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; font-weight: 700; color: #cdd6e6; box-shadow: none; }
      .seg-btn:hover { transform: translateY(-2px); color: #fff; }
      .seg-btn.selected { background: linear-gradient(180deg,#41dd84,#2ecc71); color: #063; border-color: transparent; box-shadow: 0 0 0 3px rgba(46,204,113,0.22); }
      .seg-btn.selected[data-vis="public"] { background: linear-gradient(180deg,#ffd447,#ff9a3d); color: #3a2400; box-shadow: 0 0 0 3px rgba(255,180,71,0.25); }

      /* lista de salas públicas */
      .rooms-list { display: flex; flex-direction: column; gap: 8px; max-height: 230px; overflow-y: auto; }
      .rooms-empty { color: #6b7a92; font-size: 13px; text-align: center; padding: 14px 0; }
      .room-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 10px; animation: riseIn .3s ease both; }
      .room-row:hover { transform: translateX(3px); border-color: rgba(127,255,191,0.4); background: rgba(127,255,191,0.05); }
      .room-row .r-emoji { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
      .room-row .r-info { flex: 1; text-align: left; }
      .room-row .r-host { font-weight: 800; font-size: 14px; }
      .room-row .r-meta { font-size: 11px; color: #9fb0c8; }
      .room-row .r-join { padding: 8px 14px; font-size: 12px; background: linear-gradient(180deg,#41dd84,#2ecc71); }
      .mini { padding: 4px 10px !important; font-size: 13px !important; background: #3a4154 !important; box-shadow: none; }

      /* badges de la cabecera de sala */
      .room-badges { display: flex; gap: 6px; }
      .rbadge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 8px; letter-spacing: .4px; }
      .rbadge.priv { background: #2b3550; color: #cfe0ff; }
      .rbadge.pub { background: #7a5b1e; color: #ffe7b0; }
      .rbadge.cap { background: #1f3b2b; color: #bff7d6; }
      .pchip.spect { border-color: #8a6d3b; color: #ffe7b0; }

      /* botones de juego en solitario */
      .solo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .solo-btn { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 11px 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; font-weight: 700; color: #e8ecf3; }
      .solo-btn:hover { transform: translateY(-2px); border-color: rgba(127,160,255,0.6); background: rgba(79,138,255,0.12); }
      .solo-btn .se { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }

      /* ====================================================
         DASHBOARD LAYOUT
         ==================================================== */
      #dashboard {
        display: grid;
        grid-template-columns: 232px 1fr;
        min-height: 100vh;
        background: #0a0b14;
      }

      /* ---- SIDEBAR ---- */
      #sidebar {
        background: #0e0f1e;
        border-right: 1px solid rgba(255,255,255,0.06);
        padding: 20px 12px;
        display: flex; flex-direction: column; gap: 6px;
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
      }
      .sb-logo { font-size: 18px; font-weight: 900; padding: 6px 10px 16px; cursor: pointer;
        background: linear-gradient(90deg,#7fb0ff,#b48bff); -webkit-background-clip:text;
        background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.3px; }

      /* tarjeta de perfil compacta */
      .sb-profile-card { display:flex; flex-direction:column; align-items:center; text-align:center;
        background:linear-gradient(160deg,rgba(123,82,255,.14),rgba(255,77,141,.06));
        border:1px solid rgba(160,107,255,.25); border-radius:16px; padding:16px 12px 14px;
        margin-bottom:14px; cursor:pointer; transition:border-color .15s, background .15s; width:100%; }
      .sb-profile-card:hover { border-color:rgba(160,107,255,.5); background:linear-gradient(160deg,rgba(123,82,255,.2),rgba(255,77,141,.09)); }
      .sb-profile-avatar-wrap { position:relative; margin-bottom:8px; }
      .sb-profile-avatar { width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
        font-size:32px; background:rgba(255,255,255,.06); border:2.5px solid #8a5cff;
        box-shadow:0 0 0 3px rgba(138,92,255,.18); }
      .sb-profile-dot { position:absolute; right:-2px; bottom:-2px; width:14px; height:14px; border-radius:50%;
        background:#2ecc71; border:2.5px solid #181a2e; box-shadow:0 0 6px rgba(46,204,113,.7); }
      .sb-profile-name { font-size:15px; font-weight:900; color:#fff; margin-bottom:2px; }
      .sb-profile-level { font-size:12.5px; font-weight:800; color:#b48bff; margin-bottom:10px; }
      .sb-profile-barrow { display:flex; align-items:center; gap:6px; width:100%; margin-bottom:5px; }
      .sb-profile-crown { font-size:13px; flex-shrink:0; }
      .sb-profile-bar { flex:1; }
      .sb-profile-pct { font-size:10.5px; font-weight:800; color:#9fb0c8; flex-shrink:0; }
      .sb-profile-xptxt { font-size:10.5px; color:#7b8fa8; }

      /* grupos de navegación */
      .sb-nav { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
      .sb-group-label { font-size:10.5px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
        padding:10px 12px 6px; }
      .sb-nav .sb-group-label:first-child { padding-top:0; }
      .sb-g-play { color:#b48bff; }
      .sb-g-social { color:#5fa8ff; }
      .sb-g-progress { color:#ffb347; }
      .sb-g-account { color:#5fff9f; }
      .sb-link { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px;
        font-size:13px; font-weight:600; color:#8894aa; background:none; border:none;
        cursor:pointer; text-align:left; transition:all .15s; box-shadow:none; transform:none !important; }
      .sb-link:hover { background:rgba(255,255,255,0.06); color:#e0e6f0; filter:none; }
      .sb-link.active { background:linear-gradient(135deg,rgba(99,65,255,0.35),rgba(120,80,255,0.2));
        color:#c4b0ff; border-left:3px solid #7b52ff; }
      .sb-soon { opacity:.45; cursor:not-allowed; }
      .sb-soon:hover { background:none; color:#8894aa; }
      .sb-chev { margin-left:auto; opacity:.4; font-size:15px; flex-shrink:0; }
      .sb-badge { display:inline-flex; align-items:center; justify-content:center;
        background:#ff5a6e; color:#fff; font-size:9px; font-weight:900;
        min-width:16px; height:16px; border-radius:8px; padding:0 4px; margin-left:auto;
        box-shadow:0 0 8px rgba(255,90,110,.6); animation:sb-pulse 2s ease-in-out infinite; }
      @keyframes sb-pulse { 0%,100%{ box-shadow:0 0 6px rgba(255,90,110,.5); } 50%{ box-shadow:0 0 14px rgba(255,90,110,.9); } }
      .sb-badge-n { display:inline-flex; align-items:center; justify-content:center;
        background:#5fa8ff; color:#fff; font-size:10.5px; font-weight:900;
        min-width:19px; height:19px; border-radius:10px; padding:0 5px; margin-left:auto; flex-shrink:0; }
      #sbMisionesBadgeN { background:#ff5a6e; }
      #sbTorneosBadgeN { background:#9a6bff; }
      .sb-link .sb-badge-n + .sb-chev { margin-left:6px; }

      /* tarjeta del cofre diario */
      .sb-chest-card { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
        background:linear-gradient(135deg,rgba(255,212,71,.1),rgba(123,82,255,.08));
        border:1px solid rgba(255,212,71,.22); border-radius:14px; padding:11px 12px;
        margin-top:10px; cursor:pointer; transition:border-color .15s, background .15s; }
      .sb-chest-card:hover { border-color:rgba(255,212,71,.5); }
      .sb-chest-ic { font-size:26px; flex-shrink:0; }
      .sb-chest-body { flex:1; min-width:0; }
      .sb-chest-title { font-size:12.5px; font-weight:800; color:#e0e6f0; }
      .sb-chest-sub { font-size:11px; color:#ffd447; font-weight:700; }

      .sb-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
        border-radius:12px; padding:12px; margin-top:6px; }
      .sb-card-btn { width:100%; text-align:left; cursor:pointer; transition:background .15s, border-color .15s; }
      .sb-card-btn:hover { background:rgba(255,255,255,.08); border-color:rgba(160,107,255,.4); }
      .sb-card-title { font-size:11px; font-weight:800; color:#7b8fa8; letter-spacing:.4px; margin-bottom:6px; }
      .sb-card-desc { font-size:12px; color:#cdd6e6; margin-bottom:8px; }
      .sb-card-level { font-size:13px; font-weight:800; color:#e0e6f0; margin-bottom:6px; }
      .sb-card-xp { font-size:11px; color:#7b8fa8; margin-top:4px; }
      .sb-card-reward { font-size:12px; font-weight:800; color:#ffd447; margin-top:6px; }
      .sb-bar { height:7px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; }
      .sb-bar > div { height:100%; background:linear-gradient(90deg,#7b52ff,#b48bff); border-radius:4px; transition:width .4s; }

      /* ---- MAIN ---- */
      #dashMain {
        padding: 24px 28px; overflow-y: auto;
        background: linear-gradient(180deg, #0c0d1a 0%, #0a0b14 100%);
      }
      #dashHeader { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
      #dashHeader h2 { margin:0; font-size:22px; font-weight:900; }
      #dashHeader h2 span { color:#b48bff; }
      .dash-sub { color:#8894aa; font-size:13px; margin:3px 0 0; }

      /* hero banner */
      #heroBanner {
        display:flex; align-items:center; justify-content:space-between;
        background:linear-gradient(135deg,#1a0a3d 0%,#2d1070 50%,#1a0845 100%);
        border:1px solid rgba(120,80,255,0.4); border-radius:16px; padding:24px 28px;
        margin-bottom:24px; position:relative; overflow:hidden;
      }
      #heroBanner::before { content:''; position:absolute; inset:0;
        background:radial-gradient(circle at 70% 50%,rgba(180,140,255,0.12),transparent 60%); }
      .hero-left { position:relative; z-index:1; }
      .hero-tag { font-size:10px; font-weight:900; letter-spacing:1.5px; color:#b48bff;
        background:rgba(123,82,255,0.2); border:1px solid rgba(123,82,255,0.4);
        display:inline-block; padding:3px 10px; border-radius:6px; margin-bottom:8px; }
      .hero-left h3 { font-size:22px; font-weight:900; margin:0 0 6px; color:#fff; }
      .hero-left p { font-size:13px; color:#b4aed0; margin:0 0 14px; }
      #heroRankBtn { padding:10px 22px; font-size:13px;
        background:linear-gradient(135deg,#7b52ff,#b48bff); }
      .hero-trophy { font-size:72px; filter:drop-shadow(0 8px 24px rgba(255,210,100,0.4));
        animation:bob 3s ease-in-out infinite; position:relative; z-index:1; }

      /* secciones */
      .dash-section { margin-bottom:28px; }
      .dash-sh { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
      .dash-sh > span { font-size:15px; font-weight:800; color:#e0e6f0; }
      .dash-see-all { background:none; color:#7b8fa8; font-size:12px; padding:4px 8px; box-shadow:none; transform:none !important; }
      .dash-see-all:hover { color:#b48bff; filter:none; }
      .dash-create-btn { padding:7px 14px; font-size:12px; background:linear-gradient(135deg,#7b52ff,#5534cc); }

      /* ══ GAME CATALOG (estilo CrazyGames) ══════════════════════════════════ */
      .cg-catalog { display:flex; flex-direction:column; gap:28px; }

      /* barra de filtro de categorías */
      .cg-cats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
      .cg-cat { padding:6px 14px; font-size:12px; font-weight:700; border-radius:999px;
        background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
        color:#9fb0c8; cursor:pointer; transition:all .15s; box-shadow:none; }
      .cg-cat:hover { background:rgba(123,82,255,0.2); border-color:rgba(123,82,255,0.5); color:#fff; }
      .cg-cat.active { background:linear-gradient(135deg,#7b52ff,#5534cc); border-color:transparent; color:#fff; }

      /* sección con título */
      .cg-section-title { font-size:14px; font-weight:800; color:#cdd6e6; letter-spacing:.3px;
        display:flex; align-items:center; gap:8px; margin-bottom:12px; }
      .cg-section-title::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.07); }

      /* grid de thumbnails */
      .cg-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }

      /* tarjeta individual */
      .cg-card { border-radius:10px; overflow:hidden; cursor:pointer; position:relative;
        background:#111122; border:1px solid rgba(255,255,255,0.06);
        transition:transform .15s, box-shadow .15s; }
      .cg-card:hover { transform:translateY(-4px) scale(1.02);
        box-shadow:0 14px 36px rgba(0,0,0,0.6); border-color:rgba(255,255,255,0.18); }
      .cg-card.soon { opacity:.65; cursor:not-allowed; }
      .cg-card.soon:hover { transform:none; box-shadow:none; }

      /* thumbnail 16:9 */
      .cg-thumb { width:100%; aspect-ratio:16/9; display:flex; align-items:center;
        justify-content:center; font-size:32px; position:relative; overflow:hidden; }
      .cg-thumb::after { content:''; position:absolute; inset:0;
        background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.55) 100%); }

      /* gradientes por juego */
      .cg-match3  { background:linear-gradient(135deg,#2d0a60,#7b2d9e,#c0399b); }
      .cg-bubble  { background:linear-gradient(135deg,#0a2d60,#1560d4,#00b4d8); }
      .cg-runner  { background:linear-gradient(135deg,#3d1200,#9e4a0a,#e67e22); }
      .cg-horses  { background:linear-gradient(135deg,#0a2d0a,#1a7a2a,#c9a520); }
      .cg-snake   { background:linear-gradient(135deg,#081a08,#0f5c0f,#2ecc71); }
      .cg-tictactoe    { background:linear-gradient(135deg,#001a40,#0040a0,#4f8aff); }
      .cg-connect4     { background:linear-gradient(135deg,#2a1a00,#a06000,#ffd447); }
      .cg-memory       { background:linear-gradient(135deg,#1a003a,#7b00c8,#c060ff); }
      .cg-whackamole   { background:linear-gradient(135deg,#002a10,#007830,#40c060); }
      .cg-rps          { background:linear-gradient(135deg,#3a0000,#a02020,#ff5050); }
      .cg-wordle       { background:linear-gradient(135deg,#1a1a00,#606000,#c8c820); }
      .cg-pictionary   { background:linear-gradient(135deg,#3a1060,#8a2dbe,#ff5ad0); }
      .cg-chess        { background:linear-gradient(135deg,#0a0a0a,#383838,#888); }
      .cg-checkers     { background:linear-gradient(135deg,#300,#900,#f00); }
      .cg-trivia       { background:linear-gradient(135deg,#001830,#004898,#0080ff); }
      .cg-battleship   { background:linear-gradient(135deg,#001428,#003878,#1060c0); }
      .cg-uno          { background:linear-gradient(135deg,#400,#c00,#ff4444); }
      .cg-minesweeper  { background:linear-gradient(135deg,#0a1a0a,#204820,#50a050); }
      .cg-2048         { background:linear-gradient(135deg,#2a1800,#a04800,#ff8820); }
      .cg-tetris       { background:linear-gradient(135deg,#000a20,#001870,#2050e0); }
      .cg-pong         { background:linear-gradient(135deg,#060606,#222,#444); }
      .cg-flappybird   { background:linear-gradient(135deg,#103060,#2870c0,#60b0ff); }
      .cg-sudoku       { background:linear-gradient(135deg,#0a0a28,#282870,#5050c8); }
      .cg-hangman      { background:linear-gradient(135deg,#200a00,#602800,#c06020); }
      .cg-dominoes     { background:linear-gradient(135deg,#0a0808,#282020,#504040); }
      .cg-ludo         { background:linear-gradient(135deg,#200020,#700070,#d000d0); }
      .cg-golf         { background:linear-gradient(135deg,#003010,#008030,#40c060); }
      .cg-pinball      { background:linear-gradient(135deg,#100030,#400090,#8020e0); }
      .cg-dino         { background:linear-gradient(135deg,#101a00,#304a00,#709000); }
      .cg-breakout     { background:linear-gradient(135deg,#001828,#004070,#0090e0); }
      .cg-maze         { background:linear-gradient(135deg,#1a001a,#500050,#c000c0); }
      .cg-typing       { background:linear-gradient(135deg,#001818,#004848,#00a0a0); }
      .cg-color        { background:linear-gradient(135deg,#200040,#700090,#e040ff); }
      .cg-tower        { background:linear-gradient(135deg,#281000,#784000,#e08000); }
      .cg-quiz         { background:linear-gradient(135deg,#001820,#004860,#0090c0); }

      /* info debajo del thumb */
      .cg-info { padding:8px 10px 10px; }
      .cg-name { font-size:12px; font-weight:800; color:#e0e6f0; white-space:nowrap;
        overflow:hidden; text-overflow:ellipsis; }
      .cg-tag  { font-size:10px; color:#7b8fa8; margin-top:2px; white-space:nowrap;
        overflow:hidden; text-overflow:ellipsis; }

      /* badges */
      .cg-badge { position:absolute; top:5px; left:5px; z-index:2; font-size:9px;
        font-weight:800; padding:2px 6px; border-radius:5px; letter-spacing:.4px;
        text-transform:uppercase; }
      .cg-badge.hot  { background:#ff4d4d; color:#fff; box-shadow:0 2px 8px rgba(255,77,77,.6); }
      .cg-badge.new  { background:#2ecc71; color:#fff; box-shadow:0 2px 8px rgba(46,204,113,.6); }
      .cg-badge.soon { background:rgba(255,255,255,.15); color:#cdd; }
      .cg-badge.top  { background:#ffd447; color:#3a2400; box-shadow:0 2px 8px rgba(255,212,71,.5); }

      /* botón Play que aparece en hover */
      .cg-play-btn { position:absolute; inset:0; z-index:3; display:flex; align-items:center;
        justify-content:center; opacity:0; transition:opacity .15s;
        background:rgba(0,0,0,0.4); }
      .cg-play-btn span { background:rgba(255,255,255,.95); color:#111; font-size:11px;
        font-weight:800; padding:5px 16px; border-radius:999px; letter-spacing:.3px; }
      .cg-card:not(.soon):hover .cg-play-btn { opacity:1; }

      /* players online badge */
      .cg-players { position:absolute; bottom:5px; right:5px; z-index:2;
        background:rgba(0,0,0,.65); border-radius:999px; font-size:9px; font-weight:700;
        color:#9fb0c8; padding:2px 6px; display:flex; align-items:center; gap:3px; }
      .cg-players::before { content:''; width:5px; height:5px; border-radius:50%;
        background:#2ecc71; box-shadow:0 0 5px #2ecc71; display:inline-block; }

      /* legacy (usado aún en dashHome hero) */
      .game-cards-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
      .gc { border-radius:14px; overflow:hidden; cursor:pointer;
        border:1px solid rgba(255,255,255,0.07); transition:transform .15s, box-shadow .15s;
        background:#141428; }
      .gc:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.5); }
      .gc-thumb { height:110px; display:flex; align-items:center; justify-content:center;
        font-size:38px; position:relative; overflow:hidden; }
      .gc-thumb::after { content:''; position:absolute; inset:0;
        background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.4)); }
      .gc-match3  { background:linear-gradient(135deg,#2d0a60,#7b2d9e,#c0399b); }
      .gc-bubble  { background:linear-gradient(135deg,#0a2d60,#1560d4,#00b4d8); }
      .gc-runner  { background:linear-gradient(135deg,#3d1200,#9e4a0a,#e67e22); }
      .gc-horses  { background:linear-gradient(135deg,#0a2d0a,#1a7a2a,#c9a520); }
      .gc-snake   { background:linear-gradient(135deg,#081a08,#0f5c0f,#2ecc71); }
      .gc-info { padding:10px 10px 12px; }
      .gc-name { font-size:13px; font-weight:800; color:#e0e6f0; }
      .gc-meta { font-size:10px; color:#7b8fa8; margin-top:3px; display:flex; align-items:center; gap:4px; }
      .gc-dot { width:6px; height:6px; border-radius:50%; background:#2ecc71;
        box-shadow:0 0 6px #2ecc71; display:inline-block; }

      /* active rooms */
      .active-rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
      .ar-card { background:#141428; border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:14px; }
      .ar-card:hover { border-color:rgba(123,82,255,0.4); }
      .ar-host { font-size:13px; font-weight:800; color:#e0e6f0; margin-bottom:2px; }
      .ar-game { font-size:11px; color:#8894aa; margin-bottom:10px; }
      .ar-footer { display:flex; align-items:center; justify-content:space-between; }
      .ar-count { font-size:11px; color:#7b8fa8; }
      .ar-join { padding:5px 14px; font-size:12px; background:linear-gradient(135deg,#7b52ff,#5534cc); }

      /* play section */
      .play-modes { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
      .play-mode-card { background:#141428; border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:20px; }
      .pm-icon { font-size:32px; margin-bottom:8px; }
      .pm-title { font-size:16px; font-weight:900; margin-bottom:4px; }
      .pm-desc { font-size:12px; color:#7b8fa8; margin-bottom:14px; }
      .solo-grid-dash { display:flex; flex-direction:column; gap:8px; }

      /* room modal */
      .room-modal-card { background:linear-gradient(180deg,rgba(20,20,40,0.98),rgba(12,12,28,0.98));
        border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:24px;
        width:min(480px,92vw); max-height:88vh; overflow-y:auto;
        box-shadow:0 24px 80px rgba(0,0,0,0.7); animation:riseIn .35s cubic-bezier(.2,1,.3,1) both; }

      /* ---- RIGHT PANEL (vacío, oculto) ---- */
      #rightPanel { display:none !important; }

      /* online list (datos internos; el listado visual ya no se muestra) */
      #onlineList { display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; }
      .online-row { display:flex; align-items:center; gap:8px; padding:5px 8px;
        border-radius:8px; background:rgba(255,255,255,0.03); }
      .online-row .or-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
      .or-dot.idle { background:#2ecc71; box-shadow:0 0 6px #2ecc71; }
      .or-dot.inRoom { background:#f39c12; box-shadow:0 0 6px #f39c12; }
      .or-dot.playing { background:#e74c3c; box-shadow:0 0 6px #e74c3c; }
      .online-row .or-name { flex:1; font-size:12px; font-weight:700; color:#cdd6e6; }
      .online-row .or-status { font-size:10px; color:#7b8fa8; }

      /* chat: widget flotante (botón abajo-derecha + popup) */
      #chatFab { position:fixed; right:20px; bottom:20px; z-index:120;
        display:flex; align-items:center; gap:8px; padding:12px 18px;
        background:linear-gradient(135deg,#7b52ff,#5534cc); color:#fff; font-weight:800;
        border:none; border-radius:999px; cursor:pointer;
        box-shadow:0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12); }
      #chatFab:hover { filter:brightness(1.08); }
      #chatFab .cf-icon { font-size:18px; line-height:1; }
      #chatFab .cf-label { font-size:14px; }
      .chat-fab-dot { display:none; width:9px; height:9px; border-radius:50%;
        background:#ff4d6d; box-shadow:0 0 8px #ff4d6d; }
      #chatWidget.has-unread #chatFab .chat-fab-dot { display:inline-block; }

      #chatPanel { position:fixed; right:20px; bottom:78px; z-index:121;
        width:min(330px, calc(100vw - 40px)); height:min(440px, calc(100vh - 120px));
        display:flex; flex-direction:column;
        background:linear-gradient(180deg,rgba(22,22,42,0.98),rgba(13,13,28,0.98));
        border:1px solid rgba(255,255,255,0.1); border-radius:16px; overflow:hidden;
        box-shadow:0 24px 70px rgba(0,0,0,0.7);
        transform-origin:bottom right; animation:riseIn .22s cubic-bezier(.2,1,.3,1) both; }
      /* minimizado: solo se ve el botón flotante */
      #chatWidget.collapsed #chatPanel { display:none; }
      #chatPanelHead { display:flex; align-items:center; justify-content:space-between;
        padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.08);
        font-size:13px; font-weight:800; color:#e0e6f0; flex-shrink:0; }
      #chatClose { background:none; border:none; color:#9fb0c8; font-size:15px; cursor:pointer;
        padding:2px 6px; box-shadow:none; transform:none !important; }
      #chatClose:hover { color:#fff; filter:none; }
      #chatMessages { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px;
        padding:12px 14px; }
      .chat-msg { font-size:11px; line-height:1.4; }
      .chat-msg .cm-user { font-weight:800; color:#b48bff; }
      .chat-msg .cm-text { color:#cdd6e6; }
      .chat-msg.mine .cm-user { color:#7fffbf; }
      #chatInputRow { display:flex; gap:6px; padding:10px 12px; border-top:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
      #chatText { flex:1; font-size:12px; padding:8px 10px; background:rgba(255,255,255,0.06);
        border:1px solid rgba(255,255,255,0.1); border-radius:8px; color:#fff; }
      #chatText:focus { outline:none; border-color:rgba(123,82,255,0.5); }
      #chatSendBtn { padding:8px 12px; font-size:13px; background:linear-gradient(135deg,#7b52ff,#5534cc); }
      #chatInputRow.guest-chat { opacity:.55; pointer-events:none; }
      #chatGuestNote { font-size:11px; color:#7b8fa8; text-align:center; padding:8px 0; }

      /* ====================================================
         FIN DASHBOARD
         ==================================================== */

      /* ====== selector de modo (Un jugador / Multijugador) ====== */
      #modeSelect { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; }
      .mode-card {
        display: flex; align-items: center; gap: 16px;
        padding: 18px 20px; width: 100%; text-align: left;
        background: linear-gradient(135deg, rgba(35,45,70,0.6) 0%, rgba(12,16,30,0.7) 100%);
        border: 1.5px solid rgba(255,255,255,0.12);
        border-radius: 16px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 6px 20px rgba(0,0,0,0.25);
        backdrop-filter: blur(10px);
        transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
      }
      .mode-card:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(127,160,255,0.55); background: linear-gradient(135deg, rgba(60,80,130,0.5) 0%, rgba(20,30,60,0.7) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(79,138,255,0.15); }
      .mode-card .mode-icon { font-size: 36px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6)); flex-shrink: 0; }
      .mode-card .mode-label { font-size: 18px; font-weight: 900; color: #fff; display: block; }
      .mode-card .mode-desc { font-size: 12px; color: #9fb0c8; font-weight: 500; display: block; margin-top: 2px; }
      #modeSoloBtn:hover { border-color: rgba(127,255,191,0.55); background: linear-gradient(135deg, rgba(30,80,60,0.5) 0%, rgba(12,16,30,0.7) 100%); box-shadow: inset 0 1px 0 rgba(127,255,191,0.12), 0 12px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(46,204,113,0.15); }
      #modeMultiBtn:hover { border-color: rgba(79,138,255,0.55); background: linear-gradient(135deg, rgba(30,50,100,0.5) 0%, rgba(12,16,30,0.7) 100%); box-shadow: inset 0 1px 0 rgba(79,138,255,0.12), 0 12px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(79,138,255,0.15); }

      .back-btn { background: none; border: none; color: #9fb0c8; font-size: 13px; font-weight: 700; padding: 0 0 10px; cursor: pointer; box-shadow: none; transform: none !important; }
      .back-btn:hover { color: #fff; filter: none; }
      .section-title { font-weight: 800; font-size: 15px; margin: 0 0 10px; }

      /* ====== botón salir durante partida (GENÉRICO, todos los juegos) ======
         ✕ flotante circular siempre visible (z-index alto: los juegos con
         contenedores a pantalla completa lo tapaban) + modal de confirmación
         centrado (mismo sistema que Match-3). */
      #exitBar { display: none; position: fixed;
        /* +62px: deja libre la cabecera del sitio (logo/monedas/Cerrar sesión),
           que sigue visible durante la partida — antes la ✕ se solapaba con ella. */
        top: calc(env(safe-area-inset-top, 0px) + 62px);
        right: calc(env(safe-area-inset-right, 0px) + 14px);
        z-index: 800; align-items: center; gap: 8px; }
      #exitGameBtn { width: 42px; height: 42px; padding: 0; font-size: 19px; line-height: 1; font-weight: 900;
        display: flex; align-items: center; justify-content: center; border-radius: 50%;
        background: rgba(30,16,20,0.8); border: 1.5px solid rgba(255,90,90,0.55); color: #ff8a8a;
        box-shadow: 0 6px 18px rgba(0,0,0,0.45); backdrop-filter: blur(6px); cursor: pointer; }
      #exitGameBtn:hover { background: #c0392b; color: #fff; border-color: transparent; }
      #exitConfirm { display: none !important; } /* aviso antiguo inline: sustituido por modal */
      #exitBar.hidden { display: none !important; }

      /* ====== contra quién juegas: barra genérica (todos los juegos) ====== */
      #matchupBar { display: none; align-items: center; justify-content: center; gap: 10px;
        max-width: 640px; margin: 0 auto 10px; padding: 9px 16px; border-radius: 999px;
        background: linear-gradient(135deg, rgba(123,92,255,0.16), rgba(255,90,180,0.1));
        border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 6px 16px rgba(0,0,0,0.25);
        font-size: 13px; font-weight: 800; color: #f0f2f8; flex-wrap: wrap; text-align: center; }
      #matchupBar .mb-you { color: #7fffbf; }
      #matchupBar .mb-vs { color: #8b93ad; font-weight: 700; font-size: 11px; }
      #matchupBar .mb-opp { color: #ffd447; }
      #matchupBar .mb-ai { color: #b48bff; }
      #matchupBar .mb-spec { color: #9fb0c8; font-weight: 700; }
      @media (max-width: 760px) {
        #matchupBar { font-size: 12px; padding: 8px 12px; margin: 0 8px 8px; max-width: none; }
      }

      /* ====== cabecera: nivel + botones ====== */
      .hdr-btn { padding: 6px 11px; font-size: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); box-shadow: none; }
      .hdr-btn:hover { background: rgba(255,255,255,0.18); }
      #wallet .lvl { color: #ffd447; }
      #dailyBtn { position: relative; }
      #dailyBtn.has::after { content: ''; position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e; }

      /* ====== modales ====== */
      .modal-back { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(4,6,12,0.72); backdrop-filter: blur(5px); align-items: center; justify-content: center; }
      .modal-card { position: relative; width: min(440px, 92vw); max-height: 86vh; overflow-y: auto; background: linear-gradient(160deg, rgba(38,48,74,0.97) 0%, rgba(16,20,34,0.98) 100%); border: 1px solid rgba(255,255,255,0.13); border-radius: 22px; padding: 22px; box-shadow: 0 32px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.1); backdrop-filter: blur(22px); animation: riseIn .32s cubic-bezier(.2,1,.3,1) both; }
      .modal-card.modal-card-wide { width: min(880px, 94vw); }
      .modal-close { position: absolute; top: 12px; right: 12px; padding: 5px 11px; background: #3a4154; }
      .modal-content { display: none; }
      .modal-title { font-size: 20px; font-weight: 900; margin: 0 0 14px; }

      .tabs { display: flex; gap: 6px; margin-bottom: 12px; }
      .tab { flex: 1; padding: 8px; font-size: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; font-weight: 700; color: #cdd6e6; box-shadow: none; }
      .tab.active { background: linear-gradient(180deg,#4f8aff,#3d7bff); color: #fff; border-color: transparent; }

      .rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,0.25); margin-bottom: 6px; }
      .rank-row.me { border: 1px solid #7fffbf; background: rgba(127,255,191,0.08); }
      .rank-pos { font-weight: 900; width: 34px; text-align: center; color: #9fb0c8; }
      .rank-pos.top { color: #ffd447; font-size: 17px; }
      .rank-name { flex: 1; font-weight: 700; }
      .rank-name small { color: #9fb0c8; font-weight: 500; }
      .rank-val { font-weight: 800; color: #ffd47f; }
      .rank-empty { text-align: center; color: #6b7a92; padding: 16px 0; font-size: 13px; }

      .prof-head { text-align: center; margin-bottom: 8px; }
      .prof-av { font-size: 48px; line-height: 1; }
      .prof-name { font-size: 22px; font-weight: 900; margin-top: 4px; }
      .prof-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 7px; }
      .prof-badge { font-size: 10.5px; font-weight: 900; letter-spacing: .3px; padding: 4px 10px; border-radius: 999px;
        background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #cdd6e6; }
      .prof-badge-top1 { background: linear-gradient(135deg,#ffd447,#ff9500); border-color: #ffd447; color: #2a1a00;
        box-shadow: 0 0 14px rgba(255,200,60,.55); }
      .prof-badge-top5 { background: linear-gradient(135deg,#e8e8f0,#b8bfd0); border-color: #d8dce6; color: #1a1d2a;
        box-shadow: 0 0 10px rgba(220,225,240,.35); }
      .prof-badge-top100 { background: rgba(180,107,255,.18); border-color: #b48bff; color: #d4b8ff; }
      .prof-badge-admin { background: linear-gradient(135deg,#ff5d5d,#c0392b); border-color: #ff8a8a; color: #fff; }
      .prof-lvl { color: #ffd447; font-weight: 800; font-size: 13px; margin-top: 2px; }
      .lvl-bar { height: 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; margin: 10px 0 4px; }
      .lvl-fill { height: 100%; background: linear-gradient(90deg,#ffd447,#ff9a3d); border-radius: 8px; transition: width .4s; }
      .lvl-sub { text-align: center; font-size: 11px; color: #9fb0c8; }
      .prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
      .stat-box { background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 4px; text-align: center; }
      .stat-box .n { font-size: 20px; font-weight: 900; color: #7fffbf; }
      .stat-box .l { font-size: 10px; color: #9fb0c8; margin-top: 2px; }

      .daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
      .daily-day { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 4px; text-align: center; }
      .daily-day.claimable { border-color: #ffd447; box-shadow: 0 0 14px rgba(255,212,71,0.45); animation: timerPulse 1.1s ease-in-out infinite; }
      .daily-day.done { opacity: 0.45; }
      .daily-day .d { font-size: 10px; color: #9fb0c8; }
      .daily-day .c { font-weight: 900; color: #ffd447; font-size: 15px; margin-top: 2px; }
      #claimDailyBtn { width: 100%; padding: 13px; margin-top: 4px; background: linear-gradient(180deg,#ffd447,#ff9a3d); color: #3a2400; font-size: 15px; }
      #claimDailyBtn:disabled { background: #3a4154; color: #9fb0c8; }

      /* ====================================================
         RESPONSIVE / MÓVIL
         ==================================================== */
      /* Tablet y móvil: el dashboard deja de ser 3 columnas fijas y se apila. */
      @media (max-width: 900px) {
        #dashboard { grid-template-columns: 1fr; min-height: auto; }

        /* Sidebar pasa a barra superior horizontal con scroll */
        #sidebar { position: static; height: auto; flex-direction: row; align-items: center;
          gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 10px 12px;
          border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .sb-logo { padding: 0 12px 0 4px; white-space: nowrap; }
        .sb-nav { flex-direction: row; margin-bottom: 0; gap: 2px; }
        .sb-link { white-space: nowrap; padding: 8px 10px; }
        .sb-link.active { border-left: none; border-bottom: 3px solid #7b52ff; }
        .sb-card { display: none; } /* las tarjetas de temporada/misión se ocultan en móvil */
        /* barra horizontal: solo caben logo + enlaces; perfil, grupos, chevrons y cofre fuera */
        .sb-profile-card, .sb-chest-card, .sb-group-label { display: none; }
        .sb-chev { display: none; }

        #onlineList { max-height: 120px; }

        /* Rejillas de tarjetas: menos columnas para que quepan */
        .game-cards-grid { grid-template-columns: repeat(2, 1fr); }
        .cg-grid { grid-template-columns: repeat(3, 1fr); }
        .play-modes { grid-template-columns: 1fr; }

        /* Tableros de juego apilados verticalmente, juntos */
        .boards { gap: 14px; }
      }

      /* Móvil estrecho: ajustes finos de tipografía y espaciados */
      @media (max-width: 560px) {
        #dashMain { padding: 14px 12px; }
        .topbar-sub { font-size: 11px; line-height: 1.4; }
        #timer { font-size: 38px; }
        .game-grid { grid-template-columns: repeat(2, 1fr); }
        .game-cards-grid { grid-template-columns: 1fr; }
        .cg-grid { grid-template-columns: repeat(2, 1fr); }
        .daily-grid { grid-template-columns: repeat(2, 1fr); }
        .prof-stats { grid-template-columns: repeat(2, 1fr); }
        /* botoneras táctiles de los juegos un poco más grandes */
        #runnerControls .rc, #snakeControls .sc { min-width: 56px; min-height: 48px; font-size: 18px; }
      }

      /* ── RESET DEFINITIVO: eliminar cualquier pseudo-elemento que tape el auth ── */
      #auth::before, #auth::after { content: none !important; display: none !important; animation: none !important; }

      /* =================================================================
         DASHBOARD HOME — estilo mockup (stats + tarjetas de acción)
         ================================================================= */
      #dashHeader { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
      #dashStats { display:flex; gap:0; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:12px 4px; }
      .dstat { text-align:center; padding:2px 20px; }
      .dstat + .dstat { border-left:1px solid rgba(255,255,255,.09); }
      .dstat .ic { font-size:15px; opacity:.9; }
      .dstat b { display:block; font-size:23px; font-weight:900; line-height:1.15; }
      .dstat small { color:#8b93ad; font-size:11px; }
      .dstat.s-win b { color:#ffd86b; } .dstat.s-game b { color:#9d8bff; } .dstat.s-coin b { color:#ffb24d; } .dstat.s-streak b { color:#ff7a45; }

      #heroBanner { display:none !important; } /* sustituido por las tarjetas de acción */

      #dashActions { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0 30px; }
      .act-card { text-align:left; border:0; cursor:pointer; border-radius:20px; padding:22px 24px; color:#fff;
        display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:118px;
        transition:transform .1s ease, box-shadow .18s, filter .15s; }
      .act-card:hover { transform:translateY(-4px); filter:brightness(1.05); }
      .act-card:active { transform:translateY(-1px); }
      .act-card .ac-txt h3 { margin:0 0 6px; font-size:21px; font-weight:900; }
      .act-card .ac-txt p { margin:0; font-size:12.5px; opacity:.9; max-width:190px; line-height:1.4; }
      .act-card .ac-ico { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.22);
        display:grid; place-items:center; font-size:24px; flex-shrink:0; }
      .act-create { background:linear-gradient(120deg,#8b5cf6,#d4467f); box-shadow:0 14px 36px rgba(139,92,246,.38); }
      .act-join   { background:linear-gradient(120deg,#3b6fe0,#5b8bff); box-shadow:0 14px 36px rgba(59,111,224,.38); }
      .act-quick  { background:linear-gradient(120deg,#ff7a3d,#ffb24d); box-shadow:0 14px 36px rgba(255,122,61,.38); }
      @media (max-width:920px) { #dashActions { grid-template-columns:1fr; } #dashStats { width:100%; justify-content:space-around; } }

      #homeSpotlight { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(250px,.75fr); gap:16px; margin:4px 0 22px; }
      .hs-main { min-height:210px; border-radius:22px; padding:24px; position:relative; overflow:hidden;
        background:
          linear-gradient(135deg,rgba(24,32,58,.98),rgba(36,20,54,.96) 48%,rgba(12,44,50,.94)),
          repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 18px);
        border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 48px rgba(0,0,0,.42);
        display:flex; flex-direction:column; justify-content:flex-end; }
      .hs-main::after { content:''; position:absolute; inset:auto 18px 18px auto; width:128px; height:128px;
        background:conic-gradient(from 20deg,#ff7a3d,#ffd447,#2ecc71,#4db5ff,#b48bff,#ff7a3d);
        clip-path:polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 35%);
        opacity:.16; pointer-events:none; }
      .hs-kicker { color:#7fffbf; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
      .hs-main h3 { margin:7px 0 8px; font-size:34px; line-height:1.05; letter-spacing:0; max-width:520px; }
      .hs-main p { margin:0 0 18px; color:#b7c4d8; font-size:14px; line-height:1.45; max-width:460px; }
      .hs-actions { display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
      .hs-btn { border-radius:12px; padding:12px 18px; font-size:14px; }
      .hs-btn.primary { background:linear-gradient(135deg,#2ecc71,#16a34a); }
      .hs-btn.secondary { background:linear-gradient(135deg,#ff8a3d,#ffd447); color:#281500; }
      .hs-side { display:grid; grid-template-rows:1fr 1fr; gap:12px; min-width:0; }
      .hs-mission, .hs-featured { background:#141428; border:1px solid rgba(255,255,255,.08);
        border-radius:16px; padding:16px; min-width:0; }
      .hs-label { display:block; color:#8b98b2; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
      .hs-mission strong { display:block; font-size:15px; margin-bottom:10px; color:#f5f7fb; }
      .hs-bar { height:9px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); }
      .hs-bar > div { height:100%; border-radius:999px; background:linear-gradient(90deg,#ffd447,#ff7a3d,#2ecc71); transition:width .35s ease; }
      .hs-mission small { display:block; margin-top:8px; color:#9aa7be; font-size:11px; }
      #homeFeaturedGames { display:flex; gap:8px; flex-wrap:wrap; }
      .hfg-chip { display:flex; align-items:center; gap:7px; padding:8px 10px; min-height:38px;
        background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:11px;
        color:#e8ecf3; font-size:12px; font-weight:800; box-shadow:none; transform:none !important; }
      .hfg-chip:hover { background:rgba(127,255,191,.12); border-color:rgba(127,255,191,.3); filter:none; }

      /* botón copiar enlace de la sala */
      .copy-link-btn { margin-left:10px; padding:5px 11px; font-size:12px; font-weight:700; border-radius:9px;
        background:linear-gradient(120deg,#7b5cff,#b14dff); border:0; color:#fff; cursor:pointer; vertical-align:middle; }
      .copy-link-btn:hover { filter:brightness(1.1); }
      .copy-link-btn.done { background:linear-gradient(120deg,#22b562,#16a34a); }
      .copy-link-btn.share { background:linear-gradient(120deg,#2b8aef,#2dd4bf); margin-left:0; }

      #roomInvitePanel { display:flex; gap:14px; align-items:stretch; margin:10px 0 14px; padding:12px;
        border-radius:16px; background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
        border:1px solid rgba(255,255,255,.1); }
      #roomQrBox { width:154px; flex:0 0 154px; padding:10px; border-radius:13px; background:#f8fbff;
        border:0; color:#172033; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:6px; box-shadow:0 10px 24px rgba(0,0,0,.32); transform:none !important; }
      #roomQrBox::before { content:none; }
      #roomQrBox:hover { filter:none; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.38); }
      #roomQrCanvas { width:132px; height:132px; border-radius:8px; image-rendering:pixelated; background:#fff; }
      #roomQrBox span { color:#172033; font-size:11px; font-weight:900; }
      .invite-copy { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px; }
      .invite-label { color:#7fffbf; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
      #inviteCodeText { font-size:20px; color:#fff; letter-spacing:.04em; }
      #inviteLinkText { color:#aab7cb; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
      .invite-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }

      /* la sala (modal) a pantalla completa en móvil para que no se corte */
      @media (max-width:560px) {
        #roomModal .room-modal-card { width:96vw; max-width:none; max-height:92vh; overflow-y:auto; padding:16px 14px; }
        .copy-link-btn { display:block; margin:8px 0 0; width:100%; }
        .room-head { flex-wrap:wrap; gap:8px; }
      }

      @media (max-width:560px) {
        #homeSpotlight { grid-template-columns:1fr; }
        .hs-main { min-height:190px; padding:20px; }
        .hs-main h3 { font-size:28px; }
        .hs-side { grid-template-rows:auto; }
        .hs-actions .hs-btn { flex:1; min-width:132px; }
        #roomInvitePanel { flex-direction:column; align-items:stretch; }
        #roomQrBox { width:100%; flex-basis:auto; }
      }

      /* =================================================================
         LANDING (página pública / marketing)
         ================================================================= */
      #landing { display:none; position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 24px 60px; overflow-x:hidden; }
      .lp-grad { background:linear-gradient(100deg,#a06bff,#ff4d8d 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }

      .lp-nav { display:flex; align-items:center; gap:18px; padding:20px 6px; }
      .lp-brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:900; letter-spacing:-.3px; }
      .lp-brand .logo { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:22px;
        background:linear-gradient(150deg,#7b5cff,#b14dff); box-shadow:0 8px 22px rgba(123,92,255,.45); }
      .lp-links { display:flex; gap:6px; margin:0 auto; }
      .lp-link { display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:11px; font-weight:700; font-size:15px;
        color:#aeb6cf; background:transparent; border:0; cursor:pointer; transition:.15s; }
      .lp-link:hover { color:#fff; background:rgba(255,255,255,.05); }
      .lp-link.active { color:#fff; }
      .lp-link.active::after { content:''; display:block; }
      .lp-link.active { position:relative; }
      .lp-link.active span.u { position:absolute; left:16px; right:16px; bottom:1px; height:2px; border-radius:2px; background:linear-gradient(90deg,#7b5cff,#ff4d8d); }
      .lp-authbtns { display:flex; gap:12px; margin-left:auto; }
      .lp-btn { border:0; cursor:pointer; font-weight:800; border-radius:13px; padding:11px 20px; font-size:15px; color:#fff;
        transition:transform .08s, filter .15s, box-shadow .15s; display:inline-flex; align-items:center; gap:8px; }
      .lp-btn:active { transform:translateY(1px); }
      .lp-btn.ghost { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); }
      .lp-btn.ghost:hover { background:rgba(255,255,255,.09); }
      .lp-btn.dark { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); }
      .lp-btn.dark:hover { background:rgba(255,255,255,.1); }
      .lp-btn.grad { background:linear-gradient(100deg,#7b5cff,#ff4d8d); box-shadow:0 10px 26px rgba(180,77,255,.4); }
      .lp-btn.grad:hover { filter:brightness(1.08); box-shadow:0 14px 34px rgba(180,77,255,.55); }
      .lp-btn.big { padding:15px 26px; font-size:16px; border-radius:15px; }

      .lp-hero { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:36px 6px 20px; }
      .lp-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:30px; font-size:13px; font-weight:700;
        color:#e7c6ff; background:rgba(160,107,255,.12); border:1px solid rgba(160,107,255,.3); margin-bottom:22px; }
      .lp-title { font-size:68px; line-height:1.02; font-weight:900; letter-spacing:-2px; margin:0 0 18px; }
      .lp-sub { font-size:18px; color:#aeb6cf; line-height:1.5; margin:0 0 28px; max-width:460px; }
      .lp-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
      .lp-feats { display:flex; gap:14px; padding:18px; border-radius:18px; background:rgba(255,255,255,.025);
        border:1px solid rgba(255,255,255,.07); flex-wrap:wrap; }
      .lp-feat { display:flex; gap:11px; align-items:flex-start; flex:1; min-width:150px; }
      .lp-feat .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px; flex-shrink:0;
        background:linear-gradient(150deg,rgba(123,92,255,.3),rgba(255,77,141,.25)); }
      .lp-feat b { display:block; font-size:14px; }
      .lp-feat small { color:#8b93ad; font-size:11.5px; line-height:1.35; }

      /* ilustración: personajes blob + mando */
      .lp-hero-right { display:flex; flex-direction:column; gap:24px; }
      .lp-illus { position:relative; height:320px; display:grid; place-items:center;
        background:radial-gradient(420px 300px at 60% 45%, rgba(123,92,255,.28), transparent 70%); }
      .lp-pad { font-size:170px; filter:drop-shadow(0 24px 40px rgba(0,0,0,.5)); transform:rotate(-8deg); }
      .blob { position:absolute; width:66px; height:66px; border-radius:20px; box-shadow:inset 0 -8px 0 rgba(0,0,0,.14), 0 12px 26px rgba(0,0,0,.35);
        animation:blobFloat 4s ease-in-out infinite; }
      .blob i.eye { position:absolute; top:24%; width:16px; height:18px; background:#fff; border-radius:50%; }
      .blob i.eye::after { content:''; position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); width:7px; height:7px; background:#222; border-radius:50%; }
      .blob i.eye.l { left:20%; } .blob i.eye.r { right:20%; }
      .blob i.mouth { position:absolute; left:50%; top:58%; transform:translateX(-50%); width:22px; height:11px; border:3px solid #2a1a1a; border-top:0; border-radius:0 0 14px 14px; }
      .blob i.cheek { position:absolute; top:52%; width:9px; height:6px; background:rgba(255,120,120,.55); border-radius:50%; }
      .blob i.cheek.l { left:8%; } .blob i.cheek.r { right:8%; }
      .blob.b1 { background:linear-gradient(160deg,#ffb24d,#ff8a1e); left:18%; top:30%; animation-delay:0s; }
      .blob.b2 { background:linear-gradient(160deg,#4db5ff,#2a7fff); left:36%; top:12%; animation-delay:.4s; }
      .blob.b3 { background:linear-gradient(160deg,#ff6a8e,#ff3d6e); right:30%; top:18%; animation-delay:.8s; }
      .blob.b4 { background:linear-gradient(160deg,#4fe08a,#22b562); right:14%; top:38%; animation-delay:1.2s; }
      @keyframes blobFloat { 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-12px) rotate(4deg);} }

      .lp-steps { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px 20px; }
      .lp-steps-title { font-weight:800; font-size:15px; text-align:center; margin-bottom:14px; }
      .lp-steps-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
      .lp-step { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:#cfd6e8; }
      .lp-step .num { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:12px;
        color:#fff; background:linear-gradient(150deg,#7b5cff,#ff4d8d); }
      .lp-step:nth-child(3) .num { background:linear-gradient(150deg,#ff8a1e,#ff4d6e); }
      .lp-step:nth-child(5) .num { background:linear-gradient(150deg,#22b562,#16a34a); }
      .lp-steps-row .arr { color:#6b7392; }

      /* juegos populares */
      .lp-games { padding:46px 6px 0; }
      .lp-games-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
      .lp-games-head h2 { font-size:26px; font-weight:900; margin:0; }
      .lp-game-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
      .lp-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden;
        cursor:pointer; transition:transform .12s, box-shadow .15s, border-color .15s; }
      .lp-card:hover { transform:translateY(-5px); border-color:rgba(160,107,255,.5); box-shadow:0 18px 40px rgba(0,0,0,.45); }
      .lp-thumb { height:110px; display:grid; place-items:center; font-size:50px; position:relative; }
      .lp-thumb .cardbadge { position:absolute; top:8px; right:8px; font-size:9px; font-weight:900; letter-spacing:.5px; padding:3px 7px; border-radius:7px; }
      .cardbadge.hot { background:#ff4d6e; } .cardbadge.new { background:#22b562; }
      .lp-card-body { padding:12px 13px 14px; }
      .lp-card-name { font-weight:800; font-size:14.5px; }
      .lp-card-meta { font-size:11.5px; color:#8b93ad; margin-top:4px; display:flex; align-items:center; gap:5px; }
      .lp-card-meta .dot { color:#4fe08a; }

      .lp-foot { text-align:center; color:#6b7392; font-size:12.5px; padding:46px 0 0; }

      @media (max-width:920px) {
        .lp-hero { grid-template-columns:1fr; }
        .lp-hero-right { order:-1; }
        .lp-title { font-size:48px; }
        .lp-links { display:none; }
        .lp-game-grid { grid-template-columns:repeat(2,1fr); }
        .lp-illus { height:230px; } .lp-pad { font-size:120px; }
        /* La barra superior envuelve: los botones bajan si no caben, nunca se ocultan */
        .lp-nav { flex-wrap:wrap; justify-content:center; gap:10px 12px; }
        .lp-authbtns { margin-left:auto; }
      }

      /* Móvil estrecho: encoger marca y botones para que entren Iniciar sesión / Crear cuenta */
      @media (max-width:480px) {
        .lp-brand { font-size:18px; gap:8px; }
        .lp-brand .logo { width:34px; height:34px; font-size:18px; }
        .lp-authbtns { margin-left:0; gap:8px; }
        .lp-authbtns .lp-btn { padding:9px 13px; font-size:13px; }
      }


      /* ====================================================
         MEJORAS DE DISEÑO v2 — portadas SVG + UI polish
         ==================================================== */

      /* — Thumbnails con arte SVG — */
      .cg-thumb svg, .lp-thumb svg { position:absolute; inset:0; width:100%; height:100%; }
      .cg-thumb { font-size:0; } /* ocultar el emoji de respaldo */
      .lp-thumb  { font-size:0; }

      /* — Hover en game cards: leve zoom en el arte SVG — */
      .cg-card:hover .cg-thumb svg { transform:scale(1.06); transition:transform .3s ease; }
      .cg-card .cg-thumb svg { transition:transform .3s ease; }
      .lp-card:hover .lp-thumb svg { transform:scale(1.06); transition:transform .3s ease; }
      .lp-card .lp-thumb svg { transition:transform .3s ease; }

      /* — Cards con más profundidad y borde sutil — */
      .cg-card { background:#0f1020; box-shadow:0 4px 16px rgba(0,0,0,0.5); }
      .cg-card:hover { box-shadow:0 16px 40px rgba(0,0,0,0.7); border-color:rgba(255,255,255,0.22); }
      .cg-info { background:rgba(8,8,20,0.85); }
      .cg-name { font-size:12.5px; letter-spacing:0.2px; }

      /* — Landing cards mejoradas — */
      .lp-card { border-radius:14px; background:#0f1020; border-color:rgba(255,255,255,0.07); }
      .lp-card:hover { border-color:rgba(160,107,255,0.6); box-shadow:0 20px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(160,107,255,0.25); }
      .lp-thumb { height:120px; }
      .lp-card-body { background:rgba(8,8,20,0.8); padding:10px 12px 12px; }
      .lp-card-name { font-size:13px; letter-spacing:0.2px; }

      /* — Logo del sitio mejorado — */
      .lp-brand .logo { background:linear-gradient(150deg,#7b5cff,#ff4d8d); box-shadow:0 6px 18px rgba(123,92,255,0.5); border-radius:14px; overflow:hidden; padding:0; }
      .lp-brand .logo svg { width:40px; height:40px; display:block; }

      /* — Navegación landing más refinada — */
      .lp-nav { padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.05); margin-bottom:4px; }

      /* — Header del app con logo — */
      #topHeader { padding:10px 20px 10px; }
      #topHeader .site-logo { display:flex; align-items:center; gap:10px; }
      #topHeader .site-logo-icon { width:32px; height:32px; border-radius:10px; overflow:hidden; flex-shrink:0; }
      #topHeader .site-logo-icon svg { width:32px; height:32px; display:block; }
      #topHeader .site-logo-name { font-size:15px; font-weight:900;
        background:linear-gradient(90deg,#7fb0ff,#b48bff,#7fffbf);
        -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

      /* Marca única: en desktop vive en el TOP-HEADER (arriba a la izquierda).
         Se oculta la de la barra lateral para no duplicarla (id #sbLogo para
         ganar a la regla base .sb-logo{display:flex}). En móvil no hay sidebar. */
      @media (min-width: 761px) {
        #sbLogo { display:none !important; }
      }

      /* — Auth screen logo — */
      .auth-logo .auth-logo-icon { width:70px; height:70px; border-radius:20px; margin:0 auto 12px;
        overflow:hidden; box-shadow:0 12px 32px rgba(123,92,255,0.45); }
      .auth-logo .auth-logo-icon svg { width:70px; height:70px; display:block; }

      /* — Sidebar logo pequeño — */
      .sb-logo { display:flex; align-items:center; gap:8px; }
      .sb-logo-icon { width:26px; height:26px; border-radius:8px; overflow:hidden; flex-shrink:0; }
      .sb-logo-icon svg { width:26px; height:26px; display:block; }

      /* — Badges más visibles — */
      .cg-badge { font-size:9.5px; padding:3px 7px; }
      .cardbadge { padding:3px 8px; font-size:9.5px; border-radius:8px; font-weight:900; letter-spacing:0.4px; }

      /* — Mejora tipografía general — */
      body { letter-spacing:0.01em; }
      .cg-section-title { font-size:15px; letter-spacing:0.4px; color:#e0e6f0; }
      .dash-sh > span { font-size:16px; }

      /* — Cards de acción del home más pulidas — */
      .act-card { border-radius:18px; }
      .act-card .ac-txt h3 { font-size:19px; }

      /* — Animación de entrada en las game cards — */
      @keyframes cardIn { from { opacity:0; transform:translateY(10px) scale(0.98); } to { opacity:1; transform:none; } }
      .cg-card { animation:cardIn .3s ease both; }
      .cg-card:nth-child(1) { animation-delay:.02s; }
      .cg-card:nth-child(2) { animation-delay:.04s; }
      .cg-card:nth-child(3) { animation-delay:.06s; }
      .cg-card:nth-child(4) { animation-delay:.08s; }
      .cg-card:nth-child(5) { animation-delay:.10s; }
      .cg-card:nth-child(6) { animation-delay:.12s; }

      /* — Lobby game cards con arte SVG (portal de juego de sala) — */
      .game-card .emoji { font-size:0; line-height:0; position:relative; display:block; width:44px; height:30px; overflow:hidden; margin:0 auto; }
      .game-card .emoji svg { position:absolute; inset:0; width:100%; height:100%; border-radius:6px; }
      .game-card { padding:10px 6px; }

      /* — Play button más destacado en hover — */
      .cg-play-btn span { padding:6px 18px; font-size:12px; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,0.5); }

      /* — Sección de juegos próximamente más diferenciada — */
      .cg-card.soon .cg-thumb { filter:saturate(0.4) brightness(0.7); }
      .cg-card.soon:hover .cg-thumb { filter:saturate(0.5) brightness(0.8); }

      /* — Línea divisora secciones del catálogo — */
      .cg-section-title::after { background:rgba(255,255,255,0.1); }


      /* ===== TIENDA ===== */
      #dashShop { animation: fadeIn .3s ease; }
      .shop-coins-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding:14px 18px; background:linear-gradient(135deg, rgba(255,212,71,0.12), rgba(255,212,71,0.04)); border:1px solid rgba(255,212,71,0.25); border-radius:14px; }
      .shop-coins-bar .scb-label { color:#b8c7d9; font-size:14px; }
      .shop-coins-bar .scb-amt { color:#ffd447; font-weight:900; font-size:24px; text-shadow:0 0 16px rgba(255,212,71,0.4); }
      .shop-cat { margin-bottom:26px; }
      .shop-cat-title { font-size:17px; font-weight:800; color:#fff; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
      .shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
      .shop-skin-game { margin-bottom: 18px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
      .shop-skin-game-title { font-size: 13px; font-weight: 800; color: #b48bff; margin-bottom: 10px; letter-spacing: .2px; }
      .shop-card { position:relative; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:16px 14px 14px; text-align:center; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
      .shop-card:hover { transform:translateY(-3px); border-color:rgba(180,139,255,0.4); box-shadow:0 10px 30px rgba(0,0,0,0.35); }
      .shop-card.owned { border-color:rgba(46,204,113,0.35); }
      .shop-card.equipped { border-color:rgba(255,212,71,0.6); box-shadow:0 0 0 1px rgba(255,212,71,0.3), 0 10px 30px rgba(0,0,0,0.35); }
      .shop-icon { font-size:46px; line-height:1; margin:6px 0 10px; display:block; }
      .shop-name { font-weight:800; color:#fff; font-size:14px; margin-bottom:3px; }
      .shop-desc { font-size:11px; color:#92a0b5; min-height:28px; margin-bottom:10px; line-height:1.3; }
      .shop-btn { width:100%; border:0; border-radius:10px; padding:9px 0; font-weight:800; font-size:13px; cursor:pointer; transition:filter .12s ease; }
      .shop-btn:hover { filter:brightness(1.1); }
      .shop-btn.buy { background:linear-gradient(135deg,#b48bff,#7c5cff); color:#fff; }
      .shop-btn.equip { background:rgba(255,255,255,0.1); color:#cfe; border:1px solid rgba(255,255,255,0.15); }
      .shop-btn.equipped { background:rgba(255,212,71,0.15); color:#ffd447; border:1px solid rgba(255,212,71,0.4); cursor:default; }
      .shop-btn.cant { background:rgba(255,255,255,0.05); color:#6b7688; cursor:not-allowed; }
      .shop-price { display:inline-flex; align-items:center; gap:4px; justify-content:center; }
      .shop-badge { position:absolute; top:8px; right:8px; font-size:10px; font-weight:800; padding:2px 7px; border-radius:20px; }
      .shop-badge.owned { background:rgba(46,204,113,0.2); color:#5fe39a; }
      .shop-badge.equipped { background:rgba(255,212,71,0.2); color:#ffd447; }
      .shop-badge.premium { background:rgba(96,208,255,0.18); color:#7fe0ff; border:1px solid rgba(96,208,255,0.4); }
      .shop-guest-note { text-align:center; color:#ffcf9a; background:linear-gradient(135deg,rgba(255,138,76,0.14),rgba(255,77,141,0.10)); border:1px solid rgba(255,138,76,0.35); border-radius:14px; padding:14px 16px; margin-bottom:18px; font-size:13px; line-height:1.6; }
      .shop-guest-note b { color:#fff; }
      .shop-guest-cta { display:inline-block; margin-top:10px; border:0; cursor:pointer; font-weight:800; font-size:13px; padding:9px 18px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#a06bff,#ff4d8d); box-shadow:0 6px 16px rgba(255,77,141,0.3); }
      .shop-guest-cta:hover { filter:brightness(1.08); }
      /* Saldo de diamantes en la barra de saldo */
      .shop-coins-bar .scb-amt .scb-dia { margin-left:14px; color:#7fe0ff; text-shadow:0 0 16px rgba(96,208,255,0.4); }
      /* Sección y tarjetas PREMIUM (diamantes) */
      .shop-cat-premium { background:linear-gradient(135deg, rgba(96,208,255,0.08), rgba(150,110,255,0.05)); border:1px solid rgba(96,208,255,0.22); border-radius:18px; padding:16px 16px 6px; }
      .shop-cat-note { color:#aebfe0; font-size:12.5px; margin:-6px 0 14px; }
      .shop-card.premium { border-color:rgba(96,208,255,0.32); background:linear-gradient(160deg, rgba(96,208,255,0.07), rgba(255,255,255,0.03)); }
      .shop-card.premium:hover { border-color:rgba(96,208,255,0.6); box-shadow:0 10px 30px rgba(40,120,180,0.3); }
      /* Icono previsualizable (ojo al pasar el ratón) */
      .shop-icon.previewable { position:relative; cursor:pointer; display:inline-block; }
      .shop-icon .shop-eye { position:absolute; bottom:-2px; right:-10px; font-size:13px; opacity:0; transition:opacity .15s; }
      .shop-icon.previewable:hover .shop-eye { opacity:0.95; }

      /* Vista previa de cosmético (modal) */
      #shopPreviewDlg { position:fixed; inset:0; z-index:9992; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; padding:16px; }
      .sp-box { width:min(330px,92vw); }
      .sp-title { font-size:18px; font-weight:900; color:#fff; margin-bottom:14px; }
      .sp-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:130px;
        background:radial-gradient(circle at 50% 40%, rgba(255,255,255,0.08), rgba(0,0,0,0.2)); border-radius:16px; padding:18px; margin-bottom:14px; }
      .sp-avatar { font-size:74px; line-height:1; }
      .sp-snake { display:flex; gap:6px; }
      .sp-seg { width:34px; height:34px; border-radius:9px; }
      .sp-seg:first-child { border-radius:11px 11px 9px 9px; }
      .sp-piece { font-size:64px; line-height:1; }
      .sp-board { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px; background:#1746c8; border-radius:12px; }
      .sp-board i { width:22px; height:22px; border-radius:50%; background:#0b1020; display:block; }
      .sp-theme-swatches { display:flex; gap:10px; }
      .sp-theme-swatches span { width:42px; height:42px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
      .sp-theme-btn { border:none; border-radius:10px; padding:9px 18px; color:#fff; font-weight:900; font-size:13px; }
      .sp-theme-bar { width:80%; height:8px; background:rgba(255,255,255,0.12); border-radius:5px; overflow:hidden; }
      .sp-theme-bar span { display:block; height:100%; width:65%; border-radius:5px; }
      .sp-desc { color:#9fb0c8; font-size:13px; line-height:1.5; margin-bottom:18px; }
      .sp-row { display:flex; gap:10px; }
      .sp-act { flex:1; padding:12px 8px; border-radius:12px; font-size:14px; font-weight:900; cursor:pointer; border:none; }
      .sp-act.equip { background:linear-gradient(135deg,#6a4cff,#b14dff); color:#fff; }
      .sp-act.buy { background:linear-gradient(135deg,#2ecc71,#1fae63); color:#06210f; }
      .sp-act.close { background:rgba(255,255,255,0.08); color:#c0cce0; border:1px solid rgba(255,255,255,0.12); }
      .sp-cant { flex:1; padding:12px 8px; border-radius:12px; font-weight:800; font-size:13px; color:#ff9b9b; background:rgba(255,107,107,0.1); display:flex; align-items:center; justify-content:center; }

      /* Marcos de avatar equipados (clase en el wrapper) */
      .avframe-gold { box-shadow:0 0 0 3px #ffd447, 0 0 16px rgba(255,212,71,0.6); border-radius:50%; }
      .avframe-neon { box-shadow:0 0 0 3px #b46bff, 0 0 18px rgba(180,107,255,0.7); border-radius:50%; }
      .avframe-fire { box-shadow:0 0 0 3px #ff6a2b, 0 0 20px rgba(255,106,43,0.75); border-radius:50%; }
      .avframe-ice { box-shadow:0 0 0 3px #6fe0ff, 0 0 18px rgba(111,224,255,0.7); border-radius:50%; }
      .avframe-shadow { box-shadow:0 0 0 3px #2a2a35, 0 0 16px rgba(0,0,0,0.8); border-radius:50%; }
      .avframe-royal { box-shadow:0 0 0 3px #b48bff, 0 0 18px rgba(180,107,255,0.5), 0 0 0 6px rgba(255,212,71,0.35); border-radius:50%; }
      .avframe-rainbow { border-radius:50%; box-shadow:0 0 0 3px transparent, 0 0 20px rgba(255,255,255,0.4);
        animation: avFrameRainbow 3s linear infinite; }
      @keyframes avFrameRainbow {
        0%   { box-shadow:0 0 0 3px #ff5d5d, 0 0 18px rgba(255,93,93,.6); }
        20%  { box-shadow:0 0 0 3px #ffd447, 0 0 18px rgba(255,212,71,.6); }
        40%  { box-shadow:0 0 0 3px #2ecc71, 0 0 18px rgba(46,204,113,.6); }
        60%  { box-shadow:0 0 0 3px #3aa0ff, 0 0 18px rgba(58,160,255,.6); }
        80%  { box-shadow:0 0 0 3px #b46bff, 0 0 18px rgba(180,107,255,.6); }
        100% { box-shadow:0 0 0 3px #ff5d5d, 0 0 18px rgba(255,93,93,.6); }
      }

      /* ===== AMIGOS ===== */
      #dashFriends { animation: fadeIn .3s ease; }
      .fr-search-bar { display:flex; gap:10px; margin-bottom:18px; }
      .fr-search-bar input { flex:1; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:#fff; font-size:14px; }
      .fr-search-bar input:focus { outline:none; border-color:rgba(180,139,255,0.5); }
      .fr-search-btn { padding:12px 22px; border:0; border-radius:12px; background:linear-gradient(135deg,#b48bff,#7c5cff); color:#fff; font-weight:800; cursor:pointer; }
      .fr-search-btn:hover { filter:brightness(1.1); }
      .fr-section-title { font-size:16px; font-weight:800; color:#fff; margin:22px 0 12px; }
      .fr-row { display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px; margin-bottom:10px; }
      .fr-av { width:42px; height:42px; border-radius:50%; background:rgba(180,139,255,0.15); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
      .fr-info { flex:1; min-width:0; }
      .fr-name { font-weight:800; color:#fff; font-size:14px; }
      .fr-meta { font-size:12px; color:#92a0b5; margin-top:2px; }
      .fr-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
      .fr-dot.on { background:#3ddc84; box-shadow:0 0 8px rgba(61,220,132,0.6); }
      .fr-dot.off { background:#5a6577; }
      .fr-actions { display:flex; gap:8px; flex-shrink:0; }
      .fr-btn { border:0; border-radius:9px; padding:8px 14px; font-weight:700; font-size:13px; cursor:pointer; }
      .fr-btn.add { background:linear-gradient(135deg,#b48bff,#7c5cff); color:#fff; }
      .fr-btn.accept { background:linear-gradient(135deg,#2ecc71,#27ae60); color:#fff; }
      .fr-btn.reject, .fr-btn.remove { background:rgba(255,90,110,0.15); color:#ff8a8a; border:1px solid rgba(255,90,110,0.3); }
      .fr-btn.pending { background:rgba(255,255,255,0.06); color:#92a0b5; cursor:default; }
      .fr-empty { color:#92a0b5; text-align:center; padding:20px; font-size:14px; }
      .fr-guest-note { text-align:center; color:#ffb37a; background:rgba(255,138,76,0.1); border:1px solid rgba(255,138,76,0.25); border-radius:12px; padding:14px; font-size:14px; }
      .sb-link.has-badge::after { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff5a6e; margin-left:6px; vertical-align:middle; box-shadow:0 0 8px rgba(255,90,110,0.7); }

      /* UX Fase 6: movil pequeno (<= 400px) — la doc marcaba que se rompia aqui */
      @media (max-width: 400px) {
        #dashShop .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .shop-card { padding: 12px 8px 10px; }
        .shop-icon { font-size: 36px; }
        .fr-row { flex-wrap: wrap; }
        .fr-actions { width: 100%; margin-top: 6px; }
        #bubbleGame.is-active { max-width: 98vw; padding: 12px 8px 14px; margin: 10px auto; }
        .scb-amt { font-size: 20px; }
        .dash-welcome { font-size: 18px; }
      }



      /* ===================================================================
         REDISENO MOVIL COMPLETO (bottom nav + hero + header limpio)
         Solo aplica a <= 760px. En desktop todo esto queda oculto.
         =================================================================== */
      #mobileHero, #mobileNav { display: none; }

      @media (max-width: 760px) {
        /* --- ocultar elementos de escritorio --- */
        #sidebar { display: none !important; }
        #rightPanel { display: none !important; }
        #homeSpotlight { display: none !important; }
        #dashHeader { display: none !important; }
        #dashboard { grid-template-columns: 1fr !important; }
        .wrap { padding: 0 !important; }
        body { overflow-x: hidden; }

        /* dejar espacio para la barra inferior */
        #dashMain { padding: 12px 14px 96px !important; max-width: 100vw; overflow-x: hidden; }

        /* --- HEADER MOVIL limpio --- */
        #topHeader { padding: 10px 14px !important; position: sticky; top: 0; z-index: 50;
          background: rgba(10,11,20,0.92); backdrop-filter: blur(14px);
          border-bottom: 1px solid rgba(255,255,255,0.06); }
        #topHeader .site-logo-name { font-size: 17px; }
        #wallet { gap: 8px !important; flex-wrap: nowrap !important; overflow: visible !important; }
        #wallet .lvl, #walletUser, #profileBtn { display: none !important; }
        #wallet .coins { font-size: 14px; background: rgba(255,212,71,0.12);
          padding: 5px 10px; border-radius: 20px; border: 1px solid rgba(255,212,71,0.25); }
        #logoutBtn { display: none !important; }
        #dailyBtn, #rankBtn { display: inline-flex !important; width: 38px; height: 38px;
          align-items: center; justify-content: center; padding: 0 !important; border-radius: 50%;
          background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 16px; }
        #guestBanner { display: none !important; }

        /* --- HERO MOVIL --- */
        #mobileHero { display: block; position: relative; overflow: hidden;
          margin: 4px 0 18px; padding: 22px 20px; border-radius: 22px;
          background: linear-gradient(135deg, #4a2da0 0%, #7b2d8a 55%, #5a1f7a 100%);
          box-shadow: 0 18px 40px rgba(91,31,122,0.4); }
        #mobileHero .mh-glow { position: absolute; top: -40%; right: -20%; width: 240px; height: 240px;
          background: radial-gradient(circle, rgba(255,120,200,0.35), transparent 70%); pointer-events: none; }
        #mobileHero .mh-content { position: relative; z-index: 2; max-width: 75%; }
        #mobileHero h2 { margin: 0 0 8px; font-size: 26px; font-weight: 900; color: #fff; line-height: 1.1; }
        #mobileHero p { margin: 0 0 16px; font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.4; }
        #mhPlayBtn { background: linear-gradient(180deg, #ffc24d, #ff9a3d); color: #3a2400;
          border: none; padding: 13px 22px; border-radius: 14px; font-size: 15px; font-weight: 900;
          box-shadow: 0 8px 22px rgba(255,154,61,0.45); cursor: pointer; }
        #mobileHero .mh-art { position: absolute; right: 14px; bottom: 6px; font-size: 76px;
          filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); z-index: 1; opacity: 0.95; }

        /* --- ACTION CARDS apiladas --- */
        #dashActions { display: grid !important; grid-template-columns: 1fr !important;
          gap: 12px !important; margin: 0 0 24px !important; }
        .act-card { min-height: 84px !important; padding: 18px 20px !important; border-radius: 18px !important; }
        .act-card .ac-txt h3 { font-size: 18px !important; }
        .act-card .ac-txt p { font-size: 12px !important; max-width: none !important; }
        .act-card .ac-ico { width: 46px !important; height: 46px !important; font-size: 22px !important; }

        /* --- CATALOGO: titulos y rejilla en 2 columnas --- */
        .cg-section-title { font-size: 17px !important; font-weight: 900; margin: 18px 0 12px !important; }
        .cg-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
        .cg-cats { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch;
          padding-bottom: 6px; scrollbar-width: none; }
        .cg-cats::-webkit-scrollbar { display: none; }
        .cg-cats .cg-cat { flex: 0 0 auto !important; white-space: nowrap !important; }

        /* --- secciones genericas --- */
        #dashRooms, #dashProfile, #dashShop, #dashFriends { padding-bottom: 96px; }

        /* ===== BOTTOM NAV ===== */
        #mobileNav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
          height: 68px; align-items: center; justify-content: space-around;
          background: rgba(13,14,26,0.96); backdrop-filter: blur(20px);
          border-top: 1px solid rgba(255,255,255,0.08);
          padding: 0 6px env(safe-area-inset-bottom, 0); }
        .mn-item { background: none; border: none; cursor: pointer; padding: 6px 4px;
          display: flex; flex-direction: column; align-items: center; gap: 3px;
          color: #7b8499; flex: 1; min-width: 0; transition: color .15s; box-shadow: none; }
        .mn-item .mn-ico { font-size: 21px; line-height: 1; filter: grayscale(0.4); transition: filter .15s, transform .15s; }
        .mn-item .mn-lbl { font-size: 10px; font-weight: 700; white-space: nowrap; }
        .mn-item.active { color: #b48bff; }
        .mn-item.active .mn-ico { filter: grayscale(0); transform: translateY(-1px); }
        .mn-center { position: relative; }
        .mn-center .mn-plus { width: 52px; height: 52px; margin-top: -22px; border-radius: 50%;
          background: linear-gradient(135deg, #7b5cff, #b44dff); color: #fff;
          display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 400;
          box-shadow: 0 8px 22px rgba(123,92,255,0.55), 0 0 0 4px rgba(13,14,26,0.96); }
        .mn-center .mn-lbl { color: #b48bff; margin-top: 2px; }

        /* el chat flotante sube para no chocar con la nav */
        #chatWidget { bottom: 84px !important; }
        #chatFab { transform: scale(0.92); }
      }

      /* readyBtn sticky en sala */
      #readyBtn {
        position: sticky;
        bottom: 12px;
        z-index: 10;
      }

      /* Match-3 mobile: escalar canvas y ocultar rover */
      @media (max-width: 700px) {
        #selfCanvas, #oppCanvas {
          max-width: 96vw !important;
          height: auto !important;
        }
        /* cabecera del juego mas limpia en movil */
        #game .topbar-sub { display: none !important; }
        #game #timer { font-size: 30px !important; margin-bottom: 2px; }
        #game #topbar { margin-bottom: 6px; }
        #game .boards .board-col h3 { font-size: 15px; margin: 4px 0; }
        #game .hint { font-size: 11px; margin: 8px auto 0; opacity: .75; }
        /* equilibrar verticalmente el contenido del juego en movil (sin tocar display) */
        #game { padding-top: 5vh; padding-bottom: 3vh; box-sizing: border-box; }
        .boards { flex-direction: column; align-items: center; }
        .board-col { width: 100%; text-align: center; }
      }
      /* === MOBILE HEADER FIX === */
      @media (max-width: 700px) {
        header { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
        #wallet { gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
        #wallet .coins { font-size: 14px; white-space: nowrap; }
        #logoutBtn { display: none; }
        #topHeader .site-logo-name { font-size: 13px; }
        .hdr-btn { padding: 5px 8px; font-size: 11px; }
        #profileBtn { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #guestBanner { font-size: 11px; gap: 4px; }
        #guestBanner button { padding: 3px 8px; font-size: 11px; }
      }

      /* === MOBILE DASHBOARD FIX === */
      @media (max-width: 700px) {
        body { overflow-x: hidden; }
        .wrap { padding: 0; }
        #dashboard { width: 100%; max-width: 100vw; overflow-x: hidden; }
        #dashMain { max-width: 100vw; overflow-x: hidden; }
        #homeSpotlight { grid-template-columns: 1fr !important; }
        #dashActions { grid-template-columns: 1fr !important; }
        .act-card { min-height: 90px; padding: 16px; }
        .act-card .ac-txt h3 { font-size: 17px; }
        #dashStats { flex-wrap: wrap; }
        .dstat { padding: 2px 12px; }
      }

      /* ===================================================================
         DOPAMINA MOVIL — animaciones, brillos y feedback tactil
         Todo dentro de <= 760px para no tocar escritorio.
         =================================================================== */
      @keyframes mhFloat   { 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } }
      @keyframes mhGlow    { 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.15); } }
      @keyframes shineMove { 0%{ left:-60%; } 60%,100%{ left:130%; } }
      @keyframes playPulse { 0%,100%{ box-shadow:0 8px 22px rgba(255,154,61,.45), 0 0 0 0 rgba(255,184,77,.55); } 50%{ box-shadow:0 8px 26px rgba(255,154,61,.6), 0 0 0 10px rgba(255,184,77,0); } }
      @keyframes riseUp    { 0%{ opacity:0; transform:translateY(16px); } 100%{ opacity:1; transform:translateY(0); } }
      @keyframes navPop    { 0%{ transform:translateY(-1px) scale(1); } 45%{ transform:translateY(-4px) scale(1.28); } 100%{ transform:translateY(-1px) scale(1); } }
      @keyframes coinPop   { 0%{ transform:scale(1); } 50%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

      @media (max-width: 760px) {
        /* --- ENTRADA ESCALONADA de las secciones del home --- */
        #dashHome > #mobileHero { animation: riseUp .45s cubic-bezier(.2,1,.3,1) both; }
        #dashHome > #dashActions { animation: riseUp .45s .06s cubic-bezier(.2,1,.3,1) both; }
        #dashHome > .cg-catalog { animation: riseUp .45s .12s cubic-bezier(.2,1,.3,1) both; }

        /* --- HERO: arte flotando + glow latiendo + boton con brillo --- */
        #mobileHero .mh-art  { animation: mhFloat 3.2s ease-in-out infinite; }
        #mobileHero .mh-glow { animation: mhGlow 3.8s ease-in-out infinite; }
        #mhPlayBtn { position: relative; overflow: hidden; animation: playPulse 2.4s ease-in-out infinite;
          transition: transform .12s ease; }
        #mhPlayBtn::after { content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
          background:linear-gradient(110deg, transparent, rgba(255,255,255,.55), transparent);
          transform:skewX(-20deg); animation: shineMove 3.2s ease-in-out infinite; }
        #mhPlayBtn:active { transform: scale(.95); }

        /* --- ACTION CARDS: brillo al pulsar + feedback tactil --- */
        .act-card { position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .2s ease; }
        .act-card::before { content:''; position:absolute; top:0; left:-60%; width:50%; height:100%;
          background:linear-gradient(110deg, transparent, rgba(255,255,255,.28), transparent);
          transform:skewX(-20deg); transition:left .5s ease; pointer-events:none; }
        .act-card:active { transform: scale(.97); }
        .act-card:active::before { left:130%; }
        .act-card .ac-ico { transition: transform .2s ease; }
        .act-card:active .ac-ico { transform: rotate(8deg) scale(1.12); }

        /* --- GAME CARDS: feedback tactil + leve realce --- */
        .cg-card { transition: transform .12s ease, box-shadow .2s ease; }
        .cg-card:active { transform: scale(.95); box-shadow: 0 6px 20px rgba(123,92,255,.35); }

        /* --- COINS pill: latido sutil --- */
        #wallet .coins { transition: transform .15s ease; }
        #wallet .coins.coin-pop { animation: coinPop .4s ease; }

        /* --- HEADER botones: feedback tactil --- */
        #dailyBtn:active, #rankBtn:active, #hdrChatBtn:active { transform: scale(.9); }

        /* ===== BOTTOM NAV con vida ===== */
        .mn-item { position: relative; transition: color .15s ease, transform .1s ease; }
        .mn-item:active { transform: scale(.9); }
        /* pastilla de realce detras del icono activo (limpio, estilo app) */
        .mn-item .mn-ico { padding: 5px 14px; border-radius: 16px;
          transition: background .2s ease, filter .15s ease, transform .15s ease; }
        .mn-item.active .mn-ico { background: rgba(123,92,255,0.20);
          box-shadow: 0 4px 14px rgba(123,92,255,0.30); animation: navPop .4s cubic-bezier(.2,1.4,.4,1); }
        .mn-center:active .mn-plus { transform: scale(.92) rotate(90deg); transition: transform .2s ease; }
        .mn-center .mn-plus { transition: transform .2s ease; }

        /* ===== CHAT INTEGRADO EN HEADER (estilo mockup) ===== */
        #chatFab { display: none !important; }            /* sin pill flotante en movil */
        #hdrChatBtn { display: inline-flex !important; position: relative; width:38px; height:38px;
          align-items:center; justify-content:center; padding:0 !important; border-radius:50%;
          background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); font-size:16px; }
        #hdrChatDot { display:none; position:absolute; top:6px; right:7px; width:8px; height:8px;
          border-radius:50%; background:#ff4d6d; box-shadow:0 0 8px #ff4d6d; }
        #chatWidget.has-unread #hdrChatBtn #hdrChatDot { display:block; }
        /* el panel se abre como hoja inferior, por encima de la nav */
        #chatPanel { left:8px !important; right:8px !important; bottom:80px !important;
          width:auto !important; height:min(58vh, 440px) !important;
          transform-origin:bottom center; }
      }

      /* en escritorio el boton de chat del header no existe */
      #hdrChatBtn { display: none; }


      /* ===================================================================
         PARTIDAGO · REDISEÑO MÓVIL V2 (premium native feel)
         Senior Product Designer pass — discovery-first, color discipline,
         breathing room, one-handed. Sobrescribe reglas móviles anteriores.
         Paleta: Morado (primario) · Naranja (acción) · Azul (secundaria)
         =================================================================== */
      @media (max-width: 760px) {
        /* —— Lienzo general: menos espacio en los lados —— */
        #dashMain { padding: 10px 9px 70px !important; }
        .hv2-hero { padding: 18px 14px !important; }
        .hv2-card { padding: 13px 12px !important; }

        /* ============ 1. HERO compacto (−35% alto) ============ */
        #mobileHero { margin: 2px 0 18px !important; padding: 15px 16px !important;
          border-radius: 20px !important;
          background: linear-gradient(125deg, #5b3bc4 0%, #7a2d9e 60%, #4a1f7a 100%) !important; }
        #mobileHero .mh-content { max-width: 70% !important; }
        #mobileHero h2 { font-size: 20px !important; margin: 0 0 4px !important; }
        #mobileHero p { font-size: 11.5px !important; margin: 0 0 11px !important;
          color: rgba(255,255,255,0.75) !important; }
        #mhPlayBtn { padding: 10px 18px !important; font-size: 13.5px !important;
          border-radius: 12px !important; }
        #mobileHero .mh-art { font-size: 58px !important; right: 12px !important; bottom: 4px !important; }

        /* ============ 2. ACCIONES en fila compacta (3 mini-cards) ============ */
        #dashActions { display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
          gap: 10px !important; margin: 0 0 22px !important; }
        .act-card { min-height: 0 !important; flex-direction: column !important;
          align-items: center !important; justify-content: center !important;
          gap: 8px !important; padding: 14px 8px !important; border-radius: 16px !important;
          text-align: center !important; }
        .act-card .ac-txt p { display: none !important; }              /* sin descripción: menos saturación */
        .act-card .ac-txt h3 { font-size: 12.5px !important; margin: 0 !important; line-height: 1.15 !important; }
        .act-card .ac-ico { width: 40px !important; height: 40px !important; font-size: 20px !important;
          order: -1 !important; }                                       /* icono arriba */
        /* disciplina de color: crear=morado, unirse=azul, rápido=naranja */
        .act-create { background: linear-gradient(135deg,#7b52ff,#9a4dff) !important; }
        .act-join   { background: linear-gradient(135deg,#2f6fe0,#3b8bff) !important; }
        .act-quick  { background: linear-gradient(135deg,#ff8a3d,#ff7a2d) !important; }

        /* ============ 3. CATEGORÍAS · chips scroll lateral ============ */
        .cg-cats { display: flex !important; gap: 8px !important; overflow-x: auto !important;
          flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch;
          padding: 2px 0 10px !important; margin: 0 -16px 6px !important;
          padding-left: 16px !important; padding-right: 16px !important;
          scrollbar-width: none !important; scroll-snap-type: x proximity; }
        .cg-cats::-webkit-scrollbar { display: none !important; }
        .cg-cats .cg-cat { flex: 0 0 auto !important; white-space: nowrap !important;
          scroll-snap-align: start; padding: 8px 15px !important; font-size: 12.5px !important;
          border-radius: 999px !important; background: rgba(255,255,255,0.05) !important;
          border: 1px solid rgba(255,255,255,0.09) !important; color: #b7c0d4 !important; }
        .cg-cats .cg-cat.active { background: linear-gradient(135deg,#7b52ff,#5534cc) !important;
          border-color: transparent !important; color: #fff !important;
          box-shadow: 0 4px 14px rgba(123,82,255,0.4) !important; }

        /* ============ 5. JERARQUÍA · títulos de sección ============ */
        .cg-section-title { font-size: 16px !important; font-weight: 900 !important;
          letter-spacing: .2px !important; margin: 22px 0 12px !important; color: #f0f2f8 !important; }
        #cgSectionSoon { opacity: .92; }
        #cgSectionSoon .cg-section-title { color: #9aa3b8 !important; }

        /* ============ 9. TARJETAS DE JUEGO rediseñadas (CTR + legibilidad) ============ */
        .cg-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
          gap: 14px !important; }
        .cg-card { border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.07) !important;
          background: #14152a !important; box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important; }
        .cg-card:active { transform: scale(.96) !important; }
        .cg-thumb { aspect-ratio: 16/9 !important; }                    /* ratio 16:9 = thumbnails correctas en movil */
        .cg-info { padding: 9px 11px 11px !important; background: rgba(8,8,18,0.9) !important; }
        .cg-name { font-size: 13.5px !important; font-weight: 800 !important; color: #f0f2f8 !important; }
        .cg-tag { display: none !important; }                          /* sin tagline: tarjeta limpia */
        /* CTA persistente (no hay hover en táctil): pastilla JUGAR naranja */
        .cg-card:not(.soon) .cg-play-btn { opacity: 1 !important; background: none !important;
          inset: auto !important; position: absolute !important; right: 7px !important; bottom: 7px !important;
          z-index: 4 !important; display: block !important; }
        .cg-play-btn span { background: linear-gradient(135deg,#ff9a3d,#ff7a2d) !important; color: #fff !important;
          font-size: 10px !important; font-weight: 900 !important; padding: 4px 11px !important;
          box-shadow: 0 3px 10px rgba(255,122,61,0.5) !important; letter-spacing: .4px !important; }
        .cg-players { left: 7px !important; right: auto !important; bottom: 7px !important;
          background: rgba(0,0,0,0.62) !important; font-size: 9.5px !important; }
        .cg-badge { font-size: 9px !important; padding: 3px 7px !important; border-radius: 6px !important; }

        /* ============ 8. NAV INFERIOR estilo app nativa ============ */
        #mobileNav { height: 64px !important;
          background: rgba(11,12,22,0.97) !important; backdrop-filter: blur(22px) !important;
          border-top: 1px solid rgba(255,255,255,0.07) !important; }
        .mn-item .mn-lbl { font-size: 10.5px !important; font-weight: 700 !important; }
        .mn-item .mn-ico { font-size: 20px !important; }
      }


      /* ===== FIX FAB central de la nav (enmascarado limpio del borde) ===== */
      @media (max-width: 760px) {
        #mobileNav { background: #0b0c16 !important; }
        .mn-center { z-index: 3 !important; }
        .mn-center .mn-plus {
          position: relative; z-index: 3;
          width: 46px !important; height: 46px !important; margin-top: -20px !important;
          font-size: 20px !important;
          background: linear-gradient(135deg, #8a5cff, #b44dff) !important;
          border: none !important;
          box-shadow: 0 6px 16px rgba(123,92,255,0.55) !important;
        }
        /* sin linea de borde detras del circulo: el tramo central de la nav no pinta borde */
        #mobileNav { border-top: none !important;
          box-shadow: 0 -1px 0 rgba(255,255,255,0.07) !important; }
        .mn-center { background: none !important; }
      }


      /* ===== FIX FAB v3: el CSS global de button tiene overflow:hidden y hover con gradiente ===== */
      @media (max-width: 760px) {
        #mobileNav, .mn-item, .mn-center { overflow: visible !important; }
        .mn-item::before, .mn-item::after { content: none !important; display: none !important; }
        .mn-item:hover, .mn-item:focus, .mn-item:active {
          background: none !important; transform: none !important;
          filter: none !important; box-shadow: none !important; border: none !important; }
        .mn-item:hover .mn-ico { background: none; }
        .mn-item.active:hover .mn-ico, .mn-item.active .mn-ico { background: rgba(123,92,255,0.20); }
        .mn-center:hover .mn-plus { filter: brightness(1.08); }
      }


      /* ===================================================================
         HOME MÓVIL V3 · "gaming app" — evento, pase, recompensas, social
         Las secciones .mv3 solo existen en móvil. Glow sutil + profundidad.
         =================================================================== */
      .mv3, .mv3-tail { display: none; }

      @media (max-width: 760px) {
        #mobileHero { display: none !important; }   /* sustituido por el hero de evento */
        .mv3 { display: block; margin: 0 0 18px; }
        .mv3-tail { display: block; }

        /* —— HERO DE EVENTO —— */
        .mv3-event { position: relative; overflow: hidden; border-radius: 20px;
          padding: 14px 16px 15px;
          background: linear-gradient(125deg, #5b3bc4 0%, #7a2d9e 60%, #4a1f7a 100%);
          box-shadow: 0 14px 34px rgba(91,31,122,0.45), inset 0 1px 0 rgba(255,255,255,0.12); }
        .mv3-event .me-glow { position: absolute; top: -50%; right: -15%; width: 220px; height: 220px;
          background: radial-gradient(circle, rgba(255,150,80,0.3), transparent 70%);
          animation: mhGlow 4s ease-in-out infinite; pointer-events: none; }
        .me-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
        .me-badge { font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px; color: #ffd9a8;
          background: rgba(255,154,61,0.22); border: 1px solid rgba(255,154,61,0.4);
          padding: 3px 9px; border-radius: 999px; }
        .me-timer { font-size: 13px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums;
          text-shadow: 0 0 12px rgba(255,255,255,0.4); }
        .mv3-event h3 { margin: 0 0 8px; font-size: 17px; font-weight: 900; color: #fff; }
        .me-prize { font-size: 12px; color: rgba(255,255,255,0.85); margin-bottom: 10px; }
        .me-prize b { color: #ffd447; }
        /* CTA único y enorme; crear/unirse quedan como acciones secundarias debajo */
        #mePlay { display: block; width: 100%; background: linear-gradient(180deg,#ffc24d,#ff9a3d); color: #3a2400;
          border: none; padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 900;
          letter-spacing: .3px; box-shadow: 0 8px 22px rgba(255,154,61,0.55);
          animation: playPulse 2.4s ease-in-out infinite; }
        #mePlay:active { transform: scale(.97); }
        .me-cta-row { display: flex; gap: 8px; margin-top: 9px; }
        .me-cta-mini { flex: 1; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important;
          color: #fff !important; font-size: 11.5px !important; font-weight: 800 !important;
          padding: 8px 6px !important; border-radius: 10px !important; box-shadow: none !important; }
        .me-cta-mini:active { transform: scale(.96) !important; }

        /* —— TICKER de actividad / recompensas (encima del catálogo) —— */
        .mv3-ticker { display: flex !important; align-items: center; gap: 9px;
          background: linear-gradient(135deg, rgba(255,154,61,0.14), rgba(123,92,255,0.1));
          border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
          padding: 9px 14px; font-size: 12px; font-weight: 700; color: #f0f2f8; }
        .mvt-ico { font-size: 14px; flex-shrink: 0; animation: mhGlow 2.4s ease-in-out infinite; }
        #mvtText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* —— PASE DE TEMPORADA (compacto: cabecera + barra + track + misión) —— */
        .mv3-season { position: relative; overflow: hidden;
          background: linear-gradient(160deg, #2a1f55, #14102a 65%, #0d0a1c);
          border: 1px solid rgba(180,140,255,0.28); border-radius: 18px; padding: 12px 14px 11px;
          box-shadow: 0 10px 24px rgba(91,31,122,0.35), inset 0 1px 0 rgba(255,255,255,0.1); }
        .mv3-season::before { content:''; position: absolute; top: -60%; left: -10%; width: 180px; height: 180px;
          background: radial-gradient(circle, rgba(180,77,255,0.24), transparent 70%); pointer-events: none; }
        .ms-head { position: relative; display: flex; justify-content: space-between; align-items: center;
          font-size: 13px; font-weight: 900; color: #fff; margin-bottom: 7px; letter-spacing: .2px; }
        .ms-head-btn { background: none !important; border: none !important; box-shadow: none !important;
          padding: 0 !important; color: #fff !important; font-size: 13px; font-weight: 900; letter-spacing: .2px;
          cursor: pointer; display: flex; align-items: center; gap: 6px; }
        .ms-see { font-size: 10px; color: #b48bff; font-weight: 800; }
        .ms-lvl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
        .ms-lvl b { color: #ffd447; font-size: 13px; }
        .ms-dia { font-size: 11px; color: #9ee7ff; font-weight: 800; }
        .ms-bar { position: relative; height: 8px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; }
        .ms-bar > div { height: 100%; background: linear-gradient(90deg,#7b5cff,#ff5ad0,#ffd447);
          border-radius: 5px; box-shadow: 0 0 10px rgba(180,77,255,0.7); transition: width .5s; }
        .ms-xp { font-size: 9.5px; color: #b3a9d9; margin: 4px 0 9px; }
        .ms-track { position: relative; display: flex; align-items: center; justify-content: space-between; }
        .ms-node { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .ms-node i { font-style: normal; width: 30px; height: 30px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center; font-size: 14px;
          background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.14);
          filter: grayscale(1) opacity(.5); }
        .ms-node b { font-size: 8px; color: #8b80ad; font-weight: 800; }
        .ms-node.ok i { filter: none; background: rgba(180,77,255,0.22);
          border-color: #b48bff; box-shadow: 0 0 14px rgba(180,77,255,0.5); }
        .ms-node.ok b { color: #d4b8ff; }
        .ms-link { flex: 1; height: 2px; margin: 0 3px 11px;
          background: rgba(255,255,255,0.1); }
        /* indicador de recompensas pendientes de niveles anteriores a la ventana */
        .ms-node.ms-more i { filter: none; background: rgba(46,204,113,0.25); border-color: #2ecc71;
          box-shadow: 0 0 12px rgba(46,204,113,.5); animation: msAiPulse 1.4s ease-in-out infinite; }
        .ms-node.ms-more b { color: #2ecc71; }

        /* misión más cercana a completar, integrada en el pase (ahorra una tarjeta entera) */
        .ms-mission { display: flex !important; align-items: center; gap: 9px; width: 100%;
          margin-top: 10px; padding: 8px 10px !important; border-radius: 12px;
          background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important;
          box-shadow: none !important; text-align: left; cursor: pointer; }
        .ms-mission:active { transform: scale(.98) !important; }
        .ms-mission-ico { font-size: 16px; flex-shrink: 0; }
        .ms-mission-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
        .ms-mission-body b { font-size: 11px; font-weight: 800; color: #f0f2f8;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ms-mission-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
        .ms-mission-bar span { display: block; height: 100%; background: linear-gradient(90deg,#7b5cff,#b44dff); border-radius: 3px; }

        /* —— RECOMPENSAS (2 columnas: la misión ya vive en el pase) —— */
        .mv3-rewards { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 10px; }
        .mv3-rewards-2 { grid-template-columns: repeat(2,1fr) !important; }
        .mr-card { position: relative; display: flex; flex-direction: column; align-items: center;
          gap: 3px; padding: 12px 6px 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.07) !important;
          background: linear-gradient(160deg,#1a1c32,#121322) !important; color: #fff;
          box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important; overflow: visible !important; }
        .mr-card::before, .mr-card::after { content: none !important; }
        .mr-card:active { transform: scale(.95) !important; }
        .mr-card .mr-ico { font-size: 24px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5)); }
        .mr-card .mr-t { font-size: 11px; font-weight: 900; color: #e8ecf5; }
        .mr-card .mr-s { font-size: 9px; color: #8b93ad; max-width: 100%; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
        .mr-chest { border-color: rgba(255,154,61,0.35) !important; }
        .mr-dot { display: none; position: absolute; top: 8px; right: 10px; width: 9px; height: 9px;
          border-radius: 50%; background: #ff9a3d; box-shadow: 0 0 10px #ff9a3d;
          animation: timerPulse 1s ease-in-out infinite; }
        .mr-bar { width: 80%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08);
          overflow: hidden; margin-top: 2px; }
        .mr-bar span { display: block; height: 100%; background: linear-gradient(90deg,#7b5cff,#b44dff); }

        /* —— SECCIONES tail —— */
        .mv3-sh { display: flex; justify-content: space-between; align-items: center;
          font-size: 16px; font-weight: 900; color: #f0f2f8; margin-bottom: 10px; }
        .mv3-see { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important;
          color: #9aa3b8 !important; font-size: 11px !important; font-weight: 700 !important;
          padding: 6px 12px !important; border-radius: 999px !important; box-shadow: none !important; }

        /* salas activas: scroll horizontal */
        #mRoomsHost #activeRoomsGrid { display: flex !important; gap: 10px; overflow-x: auto;
          padding-bottom: 6px; scrollbar-width: none; }
        #mRoomsHost #activeRoomsGrid::-webkit-scrollbar { display: none; }
        #mRoomsHost .ar-card { flex: 0 0 178px; background: linear-gradient(160deg,#181a30,#11121f);
          border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 11px 12px; }
        #mRoomsHost .ar-host { font-size: 12.5px; font-weight: 800; color: #f0f2f8;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #mRoomsHost .ar-game { font-size: 10.5px; color: #8b93ad; margin: 2px 0 8px; }
        #mRoomsHost .ar-footer { display: flex; justify-content: space-between; align-items: center; }
        #mRoomsHost .ar-count { font-size: 10.5px; color: #9aa3b8; }
        #mRoomsHost .ar-join { background: linear-gradient(135deg,#2f6fe0,#3b8bff) !important;
          border: none !important; color: #fff !important; font-size: 11px !important; font-weight: 900 !important;
          padding: 6px 14px !important; border-radius: 999px !important; box-shadow: 0 4px 12px rgba(59,111,224,0.4) !important; }
        #mRoomsHost .rooms-empty { font-size: 12px; color: #8b93ad; padding: 10px 4px; }

        /* torneo */
        .mv3-tour { position: relative; border-radius: 18px; overflow: hidden;
          background: linear-gradient(135deg, #2a1f08 0%, #1c1430 55%, #14101f 100%);
          border: 1px solid rgba(255,212,71,0.22); padding: 14px 15px;
          box-shadow: 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,212,71,0.12); }
        .mt-badge { display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: 1px;
          color: #0a2a16; background: linear-gradient(135deg,#52e891,#2ecc71); padding: 3px 9px;
          border-radius: 999px; margin-bottom: 8px; }
        .mt-body { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        .mt-body h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 900; color: #fff; }
        .mt-meta { font-size: 11.5px; color: #9aa3b8; }
        .mt-meta b { color: #ffd447; }
        #mtTimer { color: #ff9a3d; font-weight: 900; font-variant-numeric: tabular-nums; }
        #mtRank { background: linear-gradient(135deg,#7b52ff,#9a4dff) !important; border: none !important;
          color: #fff !important; font-size: 12px !important; font-weight: 900 !important;
          padding: 10px 14px !important; border-radius: 12px !important; white-space: nowrap;
          box-shadow: 0 6px 16px rgba(123,82,255,0.45) !important; }

        /* actividad */
        .mv3-activity { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
        .mv3-activity::-webkit-scrollbar { display: none; }
        .ma-chip { flex: 0 0 auto; font-size: 11px; color: #c3cad9;
          background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
          padding: 7px 12px; border-radius: 999px; }
        .ma-chip b { color: #b48bff; }

        /* amigos / salas vacías: altura mínima fija para que no "parpadeen" de
           tamaño al pasar de vacío a con contenido */
        .mf-hint { min-height: 44px; display: flex; align-items: center;
          font-size: 12px; color: #8b93ad; background: rgba(255,255,255,0.03);
          border: 1px dashed rgba(255,255,255,0.12); border-radius: 14px; padding: 12px 14px; }
        #mRoomsHost .rooms-empty { min-height: 44px; display: flex; align-items: center; justify-content: center; }

        /* chip XP en tarjetas de juego */
        .m-xp { position: absolute; top: 7px; right: 7px; z-index: 4; font-size: 9px; font-weight: 900;
          color: #2a1600; background: linear-gradient(135deg,#ffd447,#ff9a3d);
          padding: 3px 8px; border-radius: 999px; box-shadow: 0 3px 8px rgba(255,154,61,0.45); }
      }

    
/* === Pase de temporada: nodos reclamables (mhome) ============================
   Los nodos reclamables son <button>: resetear el estilo global de button
   (gradiente, overflow:hidden, ::before de brillo) que ya nos mordió antes. */
@media (max-width: 760px) {
  button.ms-node { background: none; border: none; padding: 0; box-shadow: none;
    overflow: visible; cursor: default; transform: none; }
  button.ms-node::before, button.ms-node::after { content: none !important; display: none !important; }
  button.ms-node:hover, button.ms-node:active { background: none; transform: none;
    filter: none; box-shadow: none; border: none; }
  @keyframes msClaimPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  .ms-node.claim { cursor: pointer; }
  .ms-node.claim i { filter: none; background: rgba(255,154,61,0.2); border-color: #ff9a3d;
    box-shadow: 0 0 14px rgba(255,154,61,0.65); animation: msClaimPulse 1.1s ease-in-out infinite; }
  .ms-node.claim b { color: #ffb24d; }
  .ms-node.done i { filter: none; background: rgba(46,204,113,0.15);
    border-color: rgba(46,204,113,0.6); box-shadow: none; animation: none; }
  .ms-node.done b { color: #2ecc71; }
  .ms-node.ms-more { cursor: pointer; }
}

/* === MATCH-3: ESCENARIO PREMIUM (tablero protagonista) ======================
   PC >=1100px: rejilla de 3 columnas (objetivo | tablero gigante | combo).
   Movil: tablero a 96vw + chip de combo flotante + paneles debajo. */
@keyframes m3Pop  { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes m3Halo { 0%, 100% { box-shadow: 0 0 60px rgba(123,92,255,0.18), 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(123,92,255,0.22); }
                    50%      { box-shadow: 0 0 110px rgba(123,92,255,0.34), 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(180,77,255,0.4); } }

.m3-card { background: linear-gradient(160deg, #181a30, #10111e); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 14px 15px; box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.m3-card-t { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #8b93ad; margin-bottom: 8px; text-transform: uppercase; }
.m3-card-b { font-size: 14px; font-weight: 800; color: #fff; }
.m3-card-s { font-size: 11px; color: #8b93ad; margin-top: 6px; line-height: 1.4; }
.m3-card-s b { color: #ffd447; }
.m3-obj { font-size: 26px; font-weight: 900; color: #ffd447; }
#m3Stars { font-size: 24px; letter-spacing: 4px; }
.m3-score { font-size: 26px; font-weight: 900; color: #7fffbf; }
.m3-score small { font-size: 13px; color: #6b7390; font-weight: 700; }
.m3-score #m3Score.pop { animation: m3Pop 0.3s ease; display: inline-block; }
.m3-prog { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 8px; }
#m3ProgFill { height: 100%; width: 0%; border-radius: 5px; transition: width 0.45s cubic-bezier(0.2,1,0.3,1);
  background: linear-gradient(90deg, #7b5cff, #b44dff, #ff9a3d); box-shadow: 0 0 12px rgba(180,77,255,0.7); }
#m3ComboNum { font-size: 34px; font-weight: 900; color: #b48bff; text-shadow: 0 0 18px rgba(123,92,255,0.7); }
#m3ComboNum.pop { animation: m3Pop 0.3s ease; display: inline-block; }
.m3-combo-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 6px; }
#m3ComboFill { height: 100%; width: 0%; background: linear-gradient(90deg, #7b5cff, #ff5ad0); border-radius: 4px; }
#m3BoostHost .charge-wrap { margin-top: 4px; }
#m3Left, #m3Right { display: none; }
#m3ComboChip { display: none; }

/* (El "fuegito" del evento en el tablero se quitó; el evento vive en el home.) */
@keyframes efPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); filter: drop-shadow(0 0 6px rgba(255,140,40,0.85)); } }

@media (min-width: 1100px) {
  /* !important: start() pone display:block inline; destroy() quita la clase
     antes de que el cleanup oculte #game, así que el none posterior funciona */
  #game.m3-stage-solo { display: grid !important; grid-template-columns: 240px minmax(0, 1fr) 260px;
    gap: 14px 20px; max-width: 1320px; margin: 0 auto; padding: 6px 24px 16px; align-items: start; }
  #game.m3-stage-solo #topbar { margin: 0; }
  #game.m3-stage-solo #topbar #timer { font-size: 34px; }
  #game.m3-stage-solo #m3Left  { display: flex; flex-direction: column; gap: 14px; grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 74px; }
  #game.m3-stage-solo #m3Right { display: flex; flex-direction: column; gap: 14px; grid-column: 3; grid-row: 1 / span 4; position: sticky; top: 74px; }
  #game.m3-stage-solo #topbar  { grid-column: 2; }
  #game.m3-stage-solo .boards  { grid-column: 2; }
  #game.m3-stage-solo #selfCanvas { width: min(62vh, 640px) !important; max-width: 100% !important; height: auto !important;
    animation: m3Halo 4s ease-in-out infinite; border-color: rgba(123,92,255,0.35) !important; }
  /* el HUD fijo duplicaria el panel izquierdo */
  body:has(#game.m3-stage-solo) #match3LevelHud { display: none !important; }
  #game.m3-stage-pvp .boards { gap: 46px; }
  #game.m3-stage-pvp canvas { width: min(58vh, 520px) !important; height: auto !important; }
}

@media (max-width: 1099px) {
  #game.m3-stage-solo #m3Right { display: flex; flex-direction: column; gap: 10px; margin: 14px auto 0; width: 96vw; max-width: 440px; }
  #game.m3-stage-solo #m3Left { display: none; } /* el HUD compacto superior ya muestra esos datos */
  #m3ComboChip { display: block; position: absolute; top: -4px; right: 4px; z-index: 6;
    padding: 6px 13px; border-radius: 999px; pointer-events: none;
    background: linear-gradient(135deg, #7b5cff, #b44dff); color: #fff; font-weight: 900; font-size: 14px;
    box-shadow: 0 6px 18px rgba(123,92,255,0.6); opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.25s; }
  #m3ComboChip.on { opacity: 1; transform: scale(1); }
}

/* === MATCH-3 ESCENARIO V2: réplica del mockup premium ====================== */
@keyframes m3StarPop { 0% { transform: translate(-50%, -50%) scale(0.4); } 55% { transform: translate(-50%, -50%) scale(1.7) rotate(18deg); } 100% { transform: translate(-50%, -50%) scale(1.15); } }
@keyframes m3Ready  { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,194,77,0.55); } 50% { box-shadow: 0 0 18px 4px rgba(255,194,77,0.35); } }

.m3-pill { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
  color: #fff; background: linear-gradient(90deg, #b44dff, #ff4d8d); padding: 4px 14px;
  border-radius: 999px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(180,77,255,0.4); }
.m3-obj-card { text-align: center; }
.m3-obj-char { font-size: 52px; line-height: 1.1; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.m3-obj-big { font-size: 28px; font-weight: 900; color: #fff; margin: 6px 0 2px; }
.m3-obj-card #m3Stars { margin: 8px 0 4px; }

/* barra de puntos con estrellas incrustadas */
#m3ScoreBar { display: none; background: linear-gradient(160deg, #181a30, #10111e);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 12px 18px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.m3sb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.m3sb-label { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #8b93ad; }
.m3sb-num b { font-size: 20px; font-weight: 900; color: #ffd447; }
.m3sb-num small { font-size: 12px; color: #6b7390; font-weight: 700; }
.m3sb-track { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.07); }
#m3ProgFill { height: 100%; width: 0%; border-radius: 6px; transition: width 0.45s cubic-bezier(0.2,1,0.3,1);
  background: linear-gradient(90deg, #ffb24d, #ffd447); box-shadow: 0 0 14px rgba(255,212,71,0.55); }
.m3sb-star { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 22px;
  color: #3a3f58; text-shadow: 0 2px 6px rgba(0,0,0,0.6); transition: color 0.2s; }
.m3sb-star.on { color: #ffd447; text-shadow: 0 0 14px rgba(255,212,71,0.9); animation: m3StarPop 0.5s cubic-bezier(0.2,1.4,0.4,1) both; }

/* misiones */
.m3-mi { margin-bottom: 10px; }
.m3-mi:last-child { margin-bottom: 0; }
.m3-mi-top { display: flex; justify-content: space-between; font-size: 11.5px; color: #c3cad9; margin-bottom: 4px; }
.m3-mi-top b { color: #ffd447; }
.m3-mi-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.m3-mi-bar div { height: 100%; background: linear-gradient(90deg, #4f8aff, #7b5cff); border-radius: 4px; transition: width 0.4s; }
.m3-mi.done .m3-mi-top { color: #7fffbf; }
.m3-mi.done .m3-mi-top b { color: #2ecc71; }
.m3-mi.done .m3-mi-bar div { background: linear-gradient(90deg, #2ecc71, #7fffbf); }

/* estadísticas */
.m3-stat { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); margin-bottom: 6px; }
.m3-stat:last-child { margin-bottom: 0; }
.m3-stat span { font-size: 12px; color: #9aa3b8; }
.m3-stat b { font-size: 19px; font-weight: 900; color: #fff; }
.m3-stat b.pop { animation: m3Pop 0.3s ease; display: inline-block; }
.m3-stat b.c-gold { color: #ffd447; }
.m3-stat b.c-blue { color: #4f9aff; }

/* boosters integrados (sistema real de powerups) */
.m3-ch-bar { margin-bottom: 4px; }
#m3ChFill { height: 100%; width: 0%; background: linear-gradient(90deg, #ffb24d, #ffd447); border-radius: 4px; transition: width 0.4s; }
.m3-bst { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px;
  padding: 9px 11px !important; border-radius: 12px !important; text-align: left;
  background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important; overflow: visible !important; opacity: 0.5; cursor: default; transform: none !important; }
.m3-bst::before, .m3-bst::after { content: none !important; }
.m3-bst .m3-bst-ico { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(255,255,255,0.07); }
.m3-bst .m3-bst-tx b { display: block; font-size: 12.5px; font-weight: 900; color: #fff; }
.m3-bst .m3-bst-tx small { font-size: 10px; color: #8b93ad; }
.m3-bst.ready { opacity: 1; cursor: pointer; border-color: rgba(255,194,77,0.5) !important;
  animation: m3Ready 1.6s ease-in-out infinite; }
.m3-bst.ready:hover { background: rgba(255,194,77,0.12) !important; filter: none; }
.m3-bst.ready .m3-bst-ico { background: rgba(255,194,77,0.18); }

/* tira inferior: movimientos · pase · racha */
#m3Bottom { display: none; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; }
.m3-bot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.m3-bot-ico { font-size: 30px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.m3-bot-tx { flex: 1; min-width: 0; }
.m3-bot-tx b { display: block; font-size: 13px; font-weight: 900; color: #fff; }
.m3-bot-tx small { font-size: 11px; color: #8b93ad; }
.m3-pass-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 4px 0 3px; }
#m3PassFill { height: 100%; width: 0%; background: linear-gradient(90deg, #7b5cff, #b44dff); border-radius: 4px; }
.m3-bot-mv { font-size: 26px; font-weight: 900; color: #ffd447;
  text-shadow: 0 0 14px rgba(255,212,71,0.45); }

@media (min-width: 1100px) {
  #game.m3-stage-solo #m3ScoreBar { display: block; grid-column: 2; }
  #game.m3-stage-solo #m3Bottom { display: grid; grid-column: 1 / -1; margin-top: 4px; }
  #game.m3-stage-solo #m3Left,
  #game.m3-stage-solo #m3Right { grid-row: 1 / span 3; }
  /* el panel sustituye a los duplicados bajo el tablero */
  #game.m3-stage-solo .stats { display: none; }
  #game.m3-stage-solo .charge-wrap { display: none; }
  #game.m3-stage-solo .topbar-sub { display: none; }
  #game.m3-stage-solo #topbar #timer::before { content: 'TIEMPO'; display: block;
    font-size: 10px; font-weight: 900; letter-spacing: 2px; color: #8b93ad; }
  #game.m3-stage-solo #game .hint { display: none; }
  #game.m3-stage-solo .hint { display: none; }
}

@media (max-width: 1099px) {
  /* móvil minimalista: HUD compacto + tablero + booster nativo. Nada duplicado. */
  #game.m3-stage-solo #m3ScoreBar { display: none; }
  #game.m3-stage-solo #m3Right { display: none; }
  #game.m3-stage-solo #m3Bottom { display: none; }
  #game.m3-stage-solo .m3-bst-card { display: none; }
  #game.m3-stage-solo .board-col h3 { display: none; }
  #game.m3-stage-solo .hint { display: none; }
}

/* === MATCH-3 V3: header integrado + arte candy en paneles =================== */
.m3-cicon { width: 40px; height: 40px; vertical-align: middle; }
.m3-cicon-s { width: 17px; height: 17px; vertical-align: -3px; }
#m3HdrPills { display: none; align-items: center; gap: 8px; margin-left: 14px; }
.m3-hpill { font-size: 12px; font-weight: 800; color: #c3cad9; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
#m3HdrTime { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; line-height: 1.05; pointer-events: none; }
#m3HdrTime small { display: block; font-size: 9px; font-weight: 900; letter-spacing: 2px; color: #8b93ad; }
#m3HdrTime b { font-size: 24px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(180,77,255,0.8); }
.m3-conn-row { display: flex; justify-content: space-between; align-items: center; }
.m3-conn { font-size: 11.5px; color: #9aa3b8; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 6px 12px; }
.m3-conn b { color: #7fffbf; }
#m3Fs { width: 34px; height: 34px; padding: 0 !important; border-radius: 10px !important;
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important;
  color: #c3cad9 !important; font-size: 16px !important; box-shadow: none !important; }
#m3Shop { width: 100%; margin-top: 10px; background: linear-gradient(180deg, #ffc24d, #ff9a3d) !important;
  color: #3a2400 !important; border: none !important; font-size: 13px !important; font-weight: 900 !important;
  padding: 11px !important; border-radius: 12px !important; box-shadow: 0 5px 16px rgba(255,154,61,0.4) !important; }
#m3StreakChecks { display: flex; gap: 4px; margin-top: 4px; }
.m3-chk { width: 17px; height: 17px; border-radius: 50%; font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.25); }
.m3-chk.on { background: #2ecc71; color: #fff; box-shadow: 0 0 8px rgba(46,204,113,0.6); }

@media (min-width: 1100px) {
  body:has(#game.m3-stage-solo) #topHeader { position: relative; }
  body:has(#game.m3-stage-solo) #m3HdrPills { display: flex; }
  body:has(#game.m3-stage-solo) #m3HdrTime { display: block; }
  /* con el TIEMPO en el header, el topbar del juego se compacta */
  #game.m3-stage-solo #topbar { display: none; }
  /* vineta morada de profundidad detras del escenario */
  #game.m3-stage-solo { background: radial-gradient(1100px 600px at 50% 22%, rgba(123,60,200,0.12), transparent 62%); }
}

@media (min-width: 1100px) {
  /* sin duplicados en el escenario: el header ya muestra sala/nivel/tiempo */
  body:has(#game.m3-stage-solo) #status { display: none !important; }
  #game.m3-stage-solo .board-col h3 { display: none; }
  #game.m3-stage-solo .boards { margin-top: 2px; }
}

/* === MATCH-3 MÓVIL PREMIUM (jerarquía: tablero > objetivo > tiempo) ========= */
#m3MobObj { display: none; }
@keyframes moPop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes fabGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,194,77,0.6), 0 8px 22px rgba(0,0,0,0.5); }
                     50% { box-shadow: 0 0 22px 6px rgba(255,194,77,0.45), 0 8px 22px rgba(0,0,0,0.5); } }

@media (max-width: 1099px) {
  /* OBJETIVO protagonista sobre el tablero */
  #game.m3-stage-solo #m3MobObj { display: flex; align-items: center; gap: 12px;
    width: 96vw; max-width: 440px; margin: 2px auto 8px; padding: 10px 14px;
    border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgba(123,60,200,0.28), rgba(20,14,40,0.92));
    border: 1px solid rgba(180,120,255,0.35);
    box-shadow: 0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); }
  #m3MobObj.pop { animation: moPop 0.35s cubic-bezier(0.2,1.4,0.4,1); }
  #m3MobObj .mo-ico img { width: 42px; height: 42px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
  #m3MobObj .mo-tx { flex: 1; }
  #m3MobObj .mo-tx small { display: block; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #d8b8ff; }
  #m3MobObj .mo-tx b { font-size: 22px; font-weight: 900; color: #fff; }
  #m3MobObj .mo-mv { text-align: center; }
  #m3MobObj .mo-mv small { display: block; font-size: 8px; font-weight: 900; letter-spacing: 1px; color: #8b93ad; }
  #m3MobObj .mo-mv b { font-size: 18px; font-weight: 900; color: #ffd447; }

  /* una sola puntuación (el HUD ya la muestra) */
  #game.m3-stage-solo .stats { display: none; }
  /* tablero con glow premium */
  #game.m3-stage-solo #selfCanvas { box-shadow: 0 0 50px rgba(140,80,255,0.3),
    0 18px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(150,90,255,0.35) !important; }
  /* viñeta de profundidad también en móvil */
  #game.m3-stage-solo { background: radial-gradient(500px 400px at 50% 24%, rgba(123,60,200,0.14), transparent 65%); }

  /* BOOSTER como FAB circular flotante con carga */
  #game.m3-stage-solo .charge-wrap { position: fixed; right: 14px; bottom: 18px; z-index: 60;
    width: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
  #game.m3-stage-solo .charge { width: 56px; height: 5px; border-radius: 3px; }
  #game.m3-stage-solo #boosterBtn { width: 58px; height: 58px; border-radius: 50% !important;
    padding: 0 !important; font-size: 0 !important; overflow: hidden;
    background: linear-gradient(160deg, #3a4154, #262c3e) !important;
    border: 2px solid rgba(255,255,255,0.15) !important; }
  #game.m3-stage-solo #boosterBtn.ready { background: linear-gradient(160deg, #ffc24d, #ff9a3d) !important;
    color: #3a2400 !important; animation: fabGlow 1.4s ease-in-out infinite; border-color: #ffd9a0 !important; }
  #game.m3-stage-solo .hint { display: none; }
  #game.m3-stage-solo .board-col h3 { display: none; }
}

@media (max-width: 1099px) {
  #game.m3-stage-solo #boosterBtn::after { content: '⚡'; font-size: 24px; }
}

/* === MATCH-3 MÓVIL: marco completo del mockup =============================== */
#m3MobTop, #m3MobBoost, #m3MobEvt { display: none; }
@media (max-width: 1099px) {
  .t-green { color: #5fff9f !important; text-shadow: 0 0 14px rgba(95,255,159,0.7); }
  .t-gold  { color: #ffd447 !important; }

  /* fila superior */
  #game.m3-stage-solo #m3MobTop { display: grid; grid-template-columns: 32px 32px 1fr 1.7fr 1fr;
    gap: 6px; width: 96vw; max-width: 472px; margin: 4px auto 8px; align-items: center; }
  /* Fuera de la app el botón de pantalla completa está oculto: si no, su columna
     de 32px queda vacía y empuja "TIEMPO" a un hueco estrecho ("TIEM 3:4"). */
  html:not(.in-app) #game.m3-stage-solo #m3MobTop { grid-template-columns: 32px 1fr 1.7fr 1fr; }
  #m3MobQuit { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,80,80,0.3);
    background: rgba(255,60,60,0.12); color: #ff6b6b; font-size: 14px; font-weight: 900;
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
    flex-shrink: 0; }
  /* botón de pantalla completa (solo app): toggle de body.m3-app-fs */
  #m3MobFS { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(123,140,255,0.35);
    background: rgba(123,140,255,0.14); color: #aab8ff; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  #m3MobFS:active { transform: scale(0.92); }
  #m3MobTop .mt-c { background: linear-gradient(160deg, rgba(40,28,72,0.85), rgba(16,12,32,0.95));
    border: 1px solid rgba(160,110,255,0.25); border-radius: 14px; padding: 8px 6px;
    text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); }
  #m3MobTop small { display: block; font-size: 8.5px; font-weight: 900; letter-spacing: 1.5px; color: #b8a8e0; }
  #m3MobTop b { font-size: 20px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
  #m3MobTop b i { font-style: normal; font-size: 11px; color: #8b93ad; }
  #m3MobTop #m3MobStars { font-size: 13px; letter-spacing: 2px; line-height: 1.1; }
  #m3MobTop .mt-rk { letter-spacing: 0.5px; margin-top: 1px; color: #ffb24d; }
  /* COMBO lleva debajo los MOVIMIENTOS (✋ + número + "movimientos"), en CIAN para
     diferenciarlo claramente del oro del combo/puntos. */
  #m3MobTop .mt-mv { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 800;
    letter-spacing: .3px; color: #5fd0ff; line-height: 1.15; }
  #m3MobTop .mt-mv .mt-mv-l { font-size: 9px; color: #7fc4e6; font-weight: 700; }
  #m3MobTop .mt-mv b { font-size: 19px; color: #5fd0ff; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(95,208,255,0.45); }
  /* monedas que ganarás esta partida (debajo del marcador de PUNTOS) */
  #m3MobTop .mt-coins { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: #ffd447; }
  #m3MobTop .mt-coins b { font-size: 13px; color: #ffd447; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px rgba(255,212,71,0.45); }

  /* el HUD y el topbar antiguos sobran: la fila nueva lo cubre todo */
  body:has(#game.m3-stage-solo) #match3LevelHud { display: none !important; }
  #game.m3-stage-solo #topbar { display: none; }
  /* match3 móvil ya tiene su propia ✕ integrada (#m3MobQuit): oculta la genérica */
  body:has(#game.m3-stage-solo) #exitBar { display: none !important; }

  /* objetivo + recompensa */
  #game.m3-stage-solo #m3MobObj { display: grid !important; grid-template-columns: 1fr;
    gap: 8px; padding: 0; background: none; border: none; box-shadow: none; }
  .mo-card { background: linear-gradient(150deg, rgba(50,30,90,0.8), rgba(18,12,36,0.95));
    border: 1px solid rgba(180,120,255,0.3); border-radius: 16px; padding: 10px 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1); }
  .mo-left { display: flex; align-items: center; gap: 10px; }
  .mo-char { width: 54px; height: 54px; flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
  .mo-char svg { width: 54px; height: 54px; }
  .mo-emoji { font-size: 44px; line-height: 54px; }
  .mo-pill { font-size: 8.5px; font-weight: 900; letter-spacing: 1.5px; color: #fff;
    background: linear-gradient(90deg, #b44dff, #ff4d8d); padding: 2px 10px; border-radius: 999px; }
  .mo-row { display: flex; align-items: center; gap: 7px; margin: 4px 0 2px; }
  .mo-row img { width: 30px; height: 30px; }
  .mo-row b { font-size: 24px; font-weight: 900; color: #fff; }
  .mo-mid small { font-size: 10px; color: #b8a8e0; font-weight: 700; }
  .mo-mid small b { color: #ffd447; font-size: 12px; }
  .mo-right { text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .mo-right small { font-size: 8.5px; font-weight: 900; letter-spacing: 1.2px; color: #b8a8e0; }
  .mo-right small b { font-size: 12px; }
  .mo-x2 { font-size: 20px; font-weight: 900; color: #ffd447; text-shadow: 0 0 12px rgba(255,212,71,0.5); }

  /* boosters + cofre */
  #game.m3-stage-solo #m3MobBoost { display: grid; grid-template-columns: 1fr;
    gap: 6px; width: 96vw; max-width: 440px; margin: 6px auto 0; }
  .mb-card { background: linear-gradient(150deg, rgba(40,28,72,0.8), rgba(16,12,32,0.95));
    border: 1px solid rgba(160,110,255,0.25); border-radius: 12px; padding: 6px 10px; text-align: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45); }
  .mb-card > small { font-size: 8px; font-weight: 900; letter-spacing: 1.5px; color: #b8a8e0; }
  .mb-row { display: flex; align-items: flex-start; justify-content: center; gap: 5px; margin-top: 4px; }
  .mb-fab { width: 34px; height: 34px; border-radius: 50% !important; padding: 0 !important;
    font-size: 16px !important; display: flex; align-items: center; justify-content: center;
    margin-top: 0 !important; }
  .mb-ch { width: 36px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
  .mb-ch span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#ffb24d,#ffd447); }
  .mb-mv { margin-top: 2px; }
  .mb-mv b { font-size: 24px; font-weight: 900; color: #ffd447; line-height: 1.15;
    text-shadow: 0 0 12px rgba(255,212,71,0.45); }

  /* banda de evento */
  #game.m3-stage-solo #m3MobEvt { display: flex; align-items: center; gap: 10px;
    width: 96vw; max-width: 440px; margin: 8px auto 18px; padding: 10px 14px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(120,40,10,0.5), rgba(30,14,40,0.92));
    border: 1px solid rgba(255,140,60,0.35); box-shadow: 0 8px 20px rgba(0,0,0,0.45); }
  .me-fire { font-size: 24px; }
  #m3MobEvt .me-tx { flex: 1; }
  #m3MobEvt .me-tx b { display: block; font-size: 12.5px; font-weight: 900; color: #ffb070; }
  #m3MobEvt .me-tx small { font-size: 10.5px; color: #c8b8d8; }
  .me-x2 { font-size: 22px; font-weight: 900; color: #ffd447; text-shadow: 0 0 14px rgba(255,212,71,0.6); }

  /* la casita sube al objetivo, pero el ratón EXPLORADOR sigue correteando */
  #match3CharPanel { visibility: hidden !important; }
  /* fuera el FAB suelto: los boosters viven en su fila */
  #game.m3-stage-solo .charge-wrap { display: none !important; }
}

@media (max-width: 1099px) {
  body:has(#game.m3-stage-solo) #status { display: none !important; }
  #game.m3-stage-solo { padding-bottom: 0 !important; }
}

.mo-cheese { font-size: 13px; font-weight: 900; color: #ffd447; background: rgba(255,212,71,0.12);
  border: 1px solid rgba(255,212,71,0.3); border-radius: 999px; padding: 3px 9px; margin-left: 8px; }

/* === MATCH-3 móvil: fidelidad mockup ronda 2 ================================ */
@media (max-width: 1099px) {
  .mt-bar { display: block; width: 86%; height: 7px; margin: 3px auto; border-radius: 4px;
    background: rgba(255,255,255,0.08); overflow: hidden; }
  .mt-bar span { display: block; height: 100%; width: 0%; border-radius: 4px;
    background: linear-gradient(90deg, #ffb24d, #ffd447); box-shadow: 0 0 10px rgba(255,212,71,0.6);
    transition: width 0.4s cubic-bezier(0.2,1,0.3,1); }
  #m3MobTop .mt-c small { letter-spacing: 2px; }
  #m3MobTop #m3MobTime::before { content: '⏱ '; font-size: 15px; }
  .mo-name { font-size: 11.5px; font-weight: 800; color: #e8dcff; margin: 3px 0 1px; }
  .mo-char { width: 62px; height: 62px; }
  .mo-char svg { width: 62px; height: 62px; }
  .mo-emoji { font-size: 50px; line-height: 62px; }
  .mo-row b { font-size: 26px; }
  .mo-row img { width: 32px; height: 32px; }
  .mo-cheese { font-size: 12px; padding: 2px 8px; margin-left: 6px; }
  .mo-mid small { letter-spacing: 0.8px; font-size: 9px; font-weight: 900; color: #b8a8e0; }
  .mo-mid small b { font-size: 13px; }
  #game.m3-stage-solo #m3MobObj { grid-template-columns: 1fr; }
}

/* === Boosters de TIENDA (la barra de carga se retiró) ======================= */
.m3-ch-bar, #m3ChHint, .mb-ch { display: none !important; }
.m3-bst { position: relative; }
.m3-bst::before, .m3-bst::after { content: none !important; }
.m3-bst[data-count]::after { content: attr(data-count) !important; position: absolute;
  bottom: -4px; right: -4px; min-width: 19px; height: 19px; border-radius: 999px;
  background: linear-gradient(135deg, #7b5cff, #b44dff); color: #fff;
  font-size: 11px; font-weight: 900; display: flex !important;
  align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
/* sin unidades: el botón pasa a modo COMPRA — fuera el badge "0", se ve el precio */
.m3-bst.none { opacity: 0.8; cursor: pointer !important; }
.m3-bst.none[data-count]::after { content: none !important; }

/* con unidades: fondo dorado para que el emoji (p.ej. el martillo, oscuro de por
   sí) se lea bien y se note que está listo para usar */
.mb-fab.ready { background: linear-gradient(180deg, rgba(255,194,77,0.30), rgba(255,140,40,0.16)) !important;
  box-shadow: 0 0 0 2px rgba(255,194,77,0.55), 0 0 12px rgba(255,194,77,0.30) !important; }

/* modo puntería del martillo: pulso brillante hasta que tocas una ficha */
.m3-bst.aim { box-shadow: 0 0 0 3px rgba(255,212,71,0.9), 0 0 18px rgba(255,212,71,0.6) !important;
  animation: m3AimPulse 0.8s ease-in-out infinite; }
@keyframes m3AimPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }

/* precio de los boosters (PC: a la derecha de la fila · móvil: bajo el botón) */
.m3-bst-price { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 900;
  color: #ffd447; background: rgba(255,212,71,0.1); border: 1px solid rgba(255,212,71,0.3);
  border-radius: 999px; padding: 3px 8px; }
.m3-bst-price.hide, .mb-price.hide { visibility: hidden; }
.mb-bst { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mb-price { font-style: normal; font-size: 9.5px; font-weight: 900; color: #ffd447; }

/* ── Diálogo de confirmación de salida del Match-3 ── */
#m3QuitDlg, #exitQuitDlg { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center; }
.mqd-box { background: linear-gradient(160deg, #1e1440, #0d0a20);
  border: 1px solid rgba(160,110,255,0.3); border-radius: 20px;
  padding: 28px 24px 22px; width: min(320px, 88vw); text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
.mqd-icon { font-size: 38px; margin-bottom: 10px; }
.mqd-title { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 8px; }
.mqd-sub { font-size: 13px; color: #9fb0c8; margin-bottom: 22px; line-height: 1.5; }
.mqd-row { display: flex; gap: 10px; }
.mqd-row button { flex: 1; padding: 12px 8px; border-radius: 12px; font-size: 14px;
  font-weight: 900; cursor: pointer; border: none; }
#mqd-cancel { background: rgba(255,255,255,0.08); color: #c0cce0;
  border: 1px solid rgba(255,255,255,0.12); }
#mqd-confirm { background: linear-gradient(135deg, #c0392b, #922b21); color: #fff; }

/* Diálogo de confirmación genérico + reporte (reutilizan .mqd-box) */
#pgConfirmDlg, #pgReportDlg { position: fixed; inset: 0; z-index: 9991; background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
#pgc-cancel, #pgr-cancel { background: rgba(255,255,255,0.08); color: #c0cce0;
  border: 1px solid rgba(255,255,255,0.12); }
.pgc-ok { background: linear-gradient(135deg, #6a4cff, #b14dff); color: #fff; }
.pgr-box { width: min(380px, 92vw); }
.pgr-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.pgr-tab { flex: 1; padding: 9px 4px; border-radius: 10px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; background: rgba(255,255,255,0.06); color: #b9c4d8;
  border: 1px solid rgba(255,255,255,0.12); }
.pgr-tab.on { background: linear-gradient(135deg,#6a4cff,#b14dff); color: #fff; border-color: transparent; }
#pgr-text { width: 100%; min-height: 100px; resize: vertical; border-radius: 12px; padding: 11px 12px;
  font-size: 14px; font-family: inherit; color: #fff; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15); box-sizing: border-box; }
#pgr-text:focus { outline: none; border-color: rgba(160,110,255,0.6); }
.pgr-hint { color: #ffb347; font-size: 12px; min-height: 16px; margin: 6px 2px 12px; text-align: left; }

/* Panel de Ajustes (⚙️) */
.set-h { font-size: 20px; font-weight: 900; color: #fff; margin: 0 0 18px; text-align: center; }
.set-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 15px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.set-row:hover { background: rgba(255,255,255,0.09); }
.set-lbl { font-size: 14.5px; font-weight: 700; color: #e8edf6; }
.set-sw { position: relative; width: 46px; height: 26px; border-radius: 14px; flex-shrink: 0;
  background: rgba(255,255,255,0.16); transition: background .18s; }
.set-sw.on { background: linear-gradient(135deg,#34d27b,#1fae63); }
.set-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.set-sw.on i { transform: translateX(20px); }
.set-report { width: 100%; padding: 13px; border-radius: 14px; font-size: 14px; font-weight: 800;
  cursor: pointer; color: #fff; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14); }
.set-report:hover { background: rgba(255,255,255,0.12); }
.set-ver { text-align: center; color: rgba(255,255,255,0.35); font-size: 11px; margin-top: 16px; }

/* Botón grande "Informar de un problema" en el home (desktop hv2 + móvil) */
.hv2-report-btn, .mrep-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 22px;
  padding: 16px 20px; border-radius: 16px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, rgba(255,138,76,0.14), rgba(255,77,141,0.10));
  border: 1px solid rgba(255,138,76,0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hv2-report-btn:hover, .mrep-btn:hover { transform: translateY(-2px); border-color: rgba(255,138,76,0.6); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.hv2-report-ic, .mrep-ic { font-size: 30px; line-height: 1; flex-shrink: 0; }
.hv2-report-tx, .mrep-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hv2-report-tx b, .mrep-tx b { color: #fff; font-size: 16px; font-weight: 900; }
.hv2-report-tx small, .mrep-tx small { color: #d6c2b8; font-size: 12.5px; margin-top: 2px; }
.hv2-report-arrow, .mrep-ar { font-size: 26px; color: rgba(255,255,255,0.55); flex-shrink: 0; }
.mv3-report { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.mrep-btn { margin-top: 0; }

/* coste en ROJO cuando no hay monedas suficientes (infografía #4) */
.shop-btn.cant .shop-price { color:#ff6b6b; font-weight:900; }
.shop-btn.cant { border:1px solid rgba(255,107,107,0.3); }

/* #1 infografía: el regalo pasa a ser disparador oculto (cofre lo usa); el
   header muestra AMIGOS. El punto rojo avisa de solicitudes pendientes. */
#dailyBtn { display: none !important; }
#hdrFriendsDot { display: none; width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; position: absolute; top: 5px; right: 6px; }
#hdrFriendsBtn.has #hdrFriendsDot { display: block; }
#hdrFriendsBtn { position: relative; }

/* quitar chip flotante de combo (redundante con la tarjeta COMBO) */
#m3ComboChip { display: none !important; }

/* sin hueco vacio bajo el home movil ni rebote al deslizar */
@media (max-width: 760px) {
  html, body { overscroll-behavior-y: none; }
  #dashHome .mv3-tail .mv3:last-child,
  #dashHome .mv3-tail > section:last-child { margin-bottom: 0 !important; }
}

/* ============================================================
   ✨ GLASSMORPHISM PRO — refresco visual global (capa superior)
   Solo añade profundidad/movimiento sobre el diseño existente.
   ============================================================ */
@property --pg-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@keyframes pgBorderSpin { to { --pg-angle: 360deg; } }
@keyframes pgFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pgSelGlow {
  0%,100% { box-shadow: 0 0 0 2px rgba(127,255,191,.28), 0 0 20px rgba(127,255,191,.16), inset 0 1px 0 rgba(127,255,191,.2); }
  50%     { box-shadow: 0 0 0 2px rgba(127,255,191,.5),  0 0 34px rgba(127,255,191,.34), inset 0 1px 0 rgba(127,255,191,.32); }
}
@keyframes pgHeaderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* Anillo de luz que rota lentamente alrededor del lobby (aurora viva) */
#lobby::before {
  background: conic-gradient(from var(--pg-angle),
    rgba(79,138,255,.60), rgba(180,107,255,.55), rgba(46,204,113,.42),
    rgba(255,212,71,.42), rgba(255,93,115,.45), rgba(79,138,255,.60)) !important;
  filter: blur(7px);
  animation: pgBorderSpin 9s linear infinite;
}

/* Cabecera: hilo de luz animado bajo el borde inferior */
header { position: relative; }
header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, #4f8aff, #b46bff, #2ecc71, #ffd447, transparent);
  background-size: 200% 100%;
  animation: pgHeaderFlow 6s linear infinite;
  opacity: .55; pointer-events: none;
}

/* Tarjetas de juego: entrada escalonada + hover con muelle + glass más profundo */
.game-grid .game-card {
  transition: transform .24s cubic-bezier(.34,1.56,.64,1), border-color .2s, background .2s, box-shadow .25s !important;
  animation: pgFadeUp .5s cubic-bezier(.2,.8,.3,1) both;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 14px rgba(0,0,0,.28);
}
.game-grid .game-card:nth-child(1) { animation-delay: .02s; }
.game-grid .game-card:nth-child(2) { animation-delay: .05s; }
.game-grid .game-card:nth-child(3) { animation-delay: .08s; }
.game-grid .game-card:nth-child(4) { animation-delay: .11s; }
.game-grid .game-card:nth-child(5) { animation-delay: .14s; }
.game-grid .game-card:nth-child(6) { animation-delay: .17s; }
.game-grid .game-card:nth-child(7) { animation-delay: .20s; }
.game-grid .game-card:nth-child(8) { animation-delay: .23s; }
.game-grid .game-card:nth-child(9) { animation-delay: .26s; }
.game-grid .game-card:nth-child(n+10) { animation-delay: .29s; }
.game-grid .game-card:hover { transform: translateY(-6px) scale(1.045) !important; }
.game-grid .game-card.selected { animation: pgSelGlow 2.4s ease-in-out infinite; }

/* Botones primarios: brillo interior sutil permanente (más “premium”) */
button:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 16px rgba(60,90,180,.22);
}

/* Tarjetas de cristal genéricas: realce de borde superior */
#room, .stats, .pchip { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 22px rgba(0,0,0,.30); }

/* Scrollbar premium (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(127,160,255,.55), rgba(180,107,255,.5));
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(147,180,255,.75), rgba(200,127,255,.7)); background-clip: padding-box; }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  #lobby::before, header::after, .game-grid .game-card,
  .game-grid .game-card.selected { animation: none !important; }
}

/* controles de tiempo real: sin retardo tactil del navegador (pointerdown + esto) */
#snakeControls .sc, #runnerControls .rc, #snakeControls button, #runnerControls button {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}

/* Joystick virtual reutilizable (tanks, etc.) */
.pg-joy { position: relative; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(127,176,255,0.10), rgba(255,255,255,0.03));
  border: 2px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 2px 14px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.4);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; }
.pg-joy.on { border-color: rgba(127,176,255,0.55); }
.pg-joy-stick { position: absolute; left: 50%; top: 50%; border-radius: 50%;
  background: linear-gradient(160deg, #9cc2ff, #4f8aff);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,255,255,0.35);
  transition: transform 0.06s ease-out; pointer-events: none; }

/* Botón invitar amigo + popup de invitación recibida */
.fr-btn.invite { background: linear-gradient(135deg,#2ecc71,#1aa050) !important; color:#fff !important; border:none !important; }
#inviteToast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 10010; animation: itIn .3s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes itIn { from { opacity:0; transform: translateX(-50%) translateY(-16px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
.it-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px;
  background:linear-gradient(150deg,#1c2a4a,#10162c); border:1px solid rgba(127,176,255,0.35);
  box-shadow:0 14px 40px rgba(0,0,0,0.6); max-width:92vw; }
.it-emoji { font-size:28px; }
.it-tx { font-size:13.5px; color:#dbe6f5; }
.it-tx b { color:#7fb0ff; }
.it-btns { display:flex; gap:8px; margin-left:6px; }
#itJoin { background:linear-gradient(135deg,#2ecc71,#1aa050); color:#fff; border:none; font-weight:900; font-size:13px; padding:9px 16px; border-radius:11px; cursor:pointer; }
#itNo { background:rgba(255,255,255,0.08); color:#9fb0c8; border:none; font-size:12px; padding:9px 12px; border-radius:11px; cursor:pointer; }

/* Modal de matchmaking (Buscar partida) */
#matchSearch { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,12,0.9); backdrop-filter: blur(8px); }
#matchSearch .ms-card { width: min(340px,90vw); text-align: center; padding: 30px 24px;
  background: linear-gradient(160deg,#1b2340,#10162c); border: 1px solid rgba(255,138,61,0.3);
  border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
#matchSearch .ms-spin { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  border: 4px solid rgba(255,138,61,0.2); border-top-color: #ff8a3d; animation: msSpin 0.8s linear infinite; }
@keyframes msSpin { to { transform: rotate(360deg); } }
#matchSearch .ms-emoji { font-size: 40px; margin-bottom: 6px; }
#matchSearch h2 { margin: 0 0 6px; font-size: 19px; color: #fff; font-weight: 900; }
#matchSearch p { margin: 0 0 18px; font-size: 12.5px; color: #9fb0c8; line-height: 1.45; }
#msCancel { padding: 11px 26px; border: none; border-radius: 12px; font-weight: 900; font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: #c3cad9; }
#msAI.ms-ai-pulse { animation: msAiPulse 1.1s ease-in-out infinite; }
@keyframes msAiPulse { 0%,100% { box-shadow: 0 0 0 rgba(46,204,113,0.6); } 50% { box-shadow: 0 0 0 8px rgba(46,204,113,0.18); } }

/* ============================================================
   HOME v2 (rediseño INICIO según mockup) — solo escritorio
   ============================================================ */
.hv2 { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: start; }
/* glow amplio detrás de las tarjetas: sin esto, en pantallas grandes el
   contenido "flota" sobre una franja negra enorme alrededor */
.hv2::before { content: ''; position: absolute; z-index: -1; top: -60px; left: -80px; right: -80px; bottom: -60px;
  background: radial-gradient(900px 500px at 15% 10%, rgba(123,92,255,.10), transparent 60%),
              radial-gradient(700px 500px at 90% 60%, rgba(255,150,80,.07), transparent 60%);
  pointer-events: none; }
.hv2-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hv2-card { background: linear-gradient(160deg, rgba(40,50,80,0.45), rgba(14,18,32,0.6)); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 16px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 22px rgba(0,0,0,.3); }
.hv2-sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hv2-sec-h h2 { font-size: 20px; margin: 0; } .hv2-sec-h h3 { font-size: 16px; margin: 0; }
.hv2-link { background: none; border: none; color: #9b8cff; font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; box-shadow: none; }
.hv2-link:hover { color: #b9adff; }
.hv2-muted { color: #9fb0c8; }
.hv2-btn { border: none; border-radius: 14px; padding: 13px 22px; font-weight: 900; font-size: 14px; cursor: pointer; transition: transform .12s, box-shadow .2s; }
.hv2-btn.grad { background: linear-gradient(135deg, #a06bff, #ff4d8d); color: #fff; box-shadow: 0 10px 28px rgba(160,107,255,.4); }
.hv2-btn.ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.hv2-btn:hover { transform: translateY(-2px); }

/* HERO */
.hv2-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; border-radius: 22px; padding: 30px 32px; background: linear-gradient(135deg, rgba(120,60,200,0.35) 0%, rgba(60,30,110,0.5) 45%, rgba(20,20,45,0.65) 100%); border: 1px solid rgba(160,107,255,0.25); box-shadow: 0 16px 46px rgba(0,0,0,.45); }
.hv2-hero-l { flex: 1; min-width: 0; }
.hv2-badge { display: inline-block; background: rgba(160,107,255,0.22); color: #d7c6ff; font-size: 11px; font-weight: 900; letter-spacing: .5px; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.hv2-h1 { font-size: 40px; line-height: 1.05; font-weight: 900; margin: 0 0 10px; }
.hv2-grad { background: linear-gradient(90deg,#8b6bff,#4dd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv2-sub { color: #c9d2e6; font-size: 14px; max-width: 460px; margin: 0 0 18px; }
.hv2-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hv2-feats { display: flex; gap: 18px; flex-wrap: wrap; color: #aeb9d0; font-size: 12.5px; font-weight: 600; }
.hv2-feats span { display: inline-flex; align-items: center; }
.hv2-feats span::before { content: ''; width: 6px; height: 6px; border-radius: 2px; margin-right: 8px; background: linear-gradient(135deg,#8b6bff,#4dd6ff); }
/* Collage de miniaturas reales en el hero (imágenes de verdad, no emojis). */
.hv2-hero-art { position: relative; width: 400px; height: 232px; flex-shrink: 0; align-self: center; }
.hv2-art-glow { position: absolute; inset: -10% -6%; z-index: 0;
  background: radial-gradient(ellipse at 52% 48%, rgba(139,107,255,.42), rgba(77,214,255,.14) 42%, rgba(139,107,255,0) 66%); }
.hv2-art-card { position: absolute; z-index: 2; }
.hv2-art-card img { display: block; width: 138px; height: 108px; object-fit: cover; border-radius: 15px;
  border: 1.5px solid rgba(255,255,255,.16); box-shadow: 0 18px 38px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3);
  animation: haFloat 5.5s ease-in-out infinite; }
.hv2-art-card.c1 { left: 8px;   top: 78px;  transform: rotate(-13deg); z-index: 2; }
.hv2-art-card.c2 { left: 96px;  top: 20px;  transform: rotate(-5deg);  z-index: 3; }
.hv2-art-card.c3 { left: 196px; top: 8px;   transform: rotate(4deg);   z-index: 5; }
.hv2-art-card.c4 { left: 150px; top: 116px; transform: rotate(6deg);   z-index: 6; }
.hv2-art-card.c5 { left: 262px; top: 96px;  transform: rotate(13deg);  z-index: 4; }
.hv2-art-card.c2 img { animation-delay: .7s; } .hv2-art-card.c3 img { animation-delay: 1.3s; }
.hv2-art-card.c4 img { animation-delay: 2s; }  .hv2-art-card.c5 img { animation-delay: 2.6s; }
.hv2-art-badge { position: absolute; right: 2px; bottom: 4px; z-index: 8;
  background: linear-gradient(135deg,#8b6bff,#4dd6ff); color: #08101f; font-size: 11.5px; font-weight: 900;
  letter-spacing: .3px; padding: 5px 11px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
@keyframes haFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* En desktop estrecho/tablet el collage aprieta el texto → ocúltalo. */
@media (max-width: 980px) { .hv2-hero-art { display: none; } }
@keyframes hv2float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* STATS */
.hv2-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.hv2-stat { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, rgba(40,50,80,0.45), rgba(14,18,32,0.6)); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; }
.hv2-stat-ic { font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(160,107,255,0.16); border-radius: 12px; }
.hv2-stat b { font-size: 26px; display: block; line-height: 1; } .hv2-stat small { color: #9fb0c8; font-size: 12px; }

/* JUEGOS POPULARES */
/* JUEGOS EN LÍNEA: carrusel horizontal (arrastrable con el ratón o el dedo,
   y con flechas en escritorio) que muestra TODOS los juegos jugables. */
.hv2-carousel { position: relative; display: flex; align-items: center; gap: 6px; }
.hv2-pop { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; padding: 2px 2px 10px; cursor: grab;
  scrollbar-width: thin; scrollbar-color: rgba(160,107,255,.4) transparent; }
.hv2-pop.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.hv2-pop::-webkit-scrollbar { height: 6px; }
.hv2-pop::-webkit-scrollbar-thumb { background: rgba(160,107,255,.35); border-radius: 4px; }
.hv2-car-arrow { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .15s; }
.hv2-car-arrow:hover { background: rgba(160,107,255,.28); border-color: rgba(160,107,255,.6); transform: scale(1.08); }
.hv2-car-arrow:active { transform: scale(.95); }
.hv2-game { position: relative; cursor: pointer; flex: 0 0 150px; scroll-snap-align: start;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  overflow: hidden; transition: transform .16s, border-color .16s; text-align: center; }
.hv2-game:hover { transform: translateY(-4px); border-color: rgba(160,107,255,.5); }
.hv2-game .thumb { height: 84px; display: grid; place-items: center; font-size: 40px; background: linear-gradient(160deg, rgba(120,90,220,.3), rgba(30,30,60,.4)); }
.hv2-game .nm { font-size: 12px; font-weight: 800; padding: 8px 4px 2px; }
.hv2-game .pl { font-size: 10.5px; color: #9fb0c8; padding-bottom: 8px; }
.hv2-game .pl.on { color: #6fe0a0; }
.hv2-game .badge2 { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 6px; }
.hv2-game .badge2.hot { background: #ff5364; color: #fff; } .hv2-game .badge2.new { background: #2ecc71; color: #06351c; }

/* SALAS + TORNEOS */
.hv2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hv2-rooms { display: flex; flex-direction: column; gap: 8px; }
.hv2-room { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border-radius: 12px; padding: 8px 10px; }
.hv2-room .ravi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(160,107,255,.2); font-size: 16px; }
.hv2-room .rtxt { flex: 1; min-width: 0; } .hv2-room .rtxt b { font-size: 13px; display: block; } .hv2-room .rtxt small { color: #9fb0c8; font-size: 11px; }
.hv2-room .rcap { font-size: 12px; color: #9fb0c8; font-weight: 700; }
.hv2-room .rjoin { background: linear-gradient(135deg,#7b52ff,#a06bff); border: none; color: #fff; font-weight: 800; font-size: 12px; padding: 7px 14px; border-radius: 10px; cursor: pointer; }
.hv2-empty { color: #9fb0c8; font-size: 13px; text-align: center; padding: 16px; }
.hv2-tourneys { display: flex; flex-direction: column; gap: 10px; }
.hv2-tourney { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(255,180,40,.12), rgba(40,30,15,.4)); border: 1px solid rgba(255,200,80,.2); border-radius: 12px; padding: 10px 12px; }
.hv2-tourney .tic { font-size: 30px; } .hv2-tourney .ttxt { flex: 1; } .hv2-tourney .ttxt b { font-size: 13px; display: block; } .hv2-tourney .ttxt small { color: #ffce85; font-size: 11px; }
.hv2-tag { font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 6px; background: #ff5364; color: #fff; }

/* RAIL */
.hv2-rail { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.hv2-challenge strong { display: block; font-size: 15px; margin: 4px 0 8px; }
.hv2-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.hv2-bar > div { height: 100%; background: linear-gradient(90deg,#a06bff,#ff4d8d); border-radius: 6px; transition: width .4s; }
.hv2-reward { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: #9fb0c8; }
.hv2-xp { background: rgba(160,107,255,.2); color: #d7c6ff; font-weight: 800; padding: 3px 9px; border-radius: 8px; margin-left: auto; }
.hv2-coin-r { background: rgba(255,212,71,.16); color: #ffd447; font-weight: 800; padding: 3px 9px; border-radius: 8px; }
.hv2-missions { display: flex; flex-direction: column; gap: 10px; }
.hv2-mission { display: flex; align-items: center; gap: 10px; }
.hv2-mission .mic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,212,71,.14); font-size: 16px; }
.hv2-mission .mtxt { flex: 1; } .hv2-mission .mtxt b { font-size: 12.5px; display: block; } .hv2-mission .mtxt small { color: #9fb0c8; font-size: 11px; }
.hv2-mission .mxp { background: rgba(160,107,255,.2); color: #d7c6ff; font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 8px; }
.hv2-activity { display: flex; flex-direction: column; gap: 11px; }
.hv2-act { display: flex; align-items: center; gap: 10px; }
.hv2-act .aav { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(160,107,255,.2); font-size: 14px; }
.hv2-act .atxt { font-size: 12px; line-height: 1.3; } .hv2-act .atxt b { font-weight: 800; } .hv2-act .atxt small { color: #9fb0c8; display: block; font-size: 10.5px; }
/* Banner de invitado — full-width, prominente */
.hv2-guestbar {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-radius:16px; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(255,160,30,.13), rgba(255,77,0,.10));
  border:1px solid rgba(255,160,30,.35);
  box-shadow:0 4px 24px rgba(255,120,0,.10);
}
.hv2-guestbar-icon { font-size:28px; flex-shrink:0; }
.hv2-guestbar-body { flex:1; min-width:0; }
.hv2-guestbar-body strong { display:block; color:#ffd580; font-size:14px; font-weight:900; margin-bottom:3px; }
.hv2-guestbar-body span { color:#e8d5b0; font-size:12.5px; line-height:1.45; }
.hv2-guestbar-btn { flex-shrink:0; border:0; cursor:pointer; font-weight:800; font-size:12px;
  padding:9px 15px; border-radius:11px; color:#fff;
  background:linear-gradient(135deg,#a06bff,#ff4d8d); white-space:nowrap; }
.hv2-guestbar-login { flex-shrink:0; border:1px solid rgba(255,255,255,.22); cursor:pointer; font-weight:700;
  font-size:12px; padding:9px 15px; border-radius:11px; color:#fff; background:rgba(255,255,255,.07);
  white-space:nowrap; }
.hv2-guestbar-login:hover { background:rgba(255,255,255,.14); }
/* Variante para contenedores estrechos (p.ej. tarjeta de Perfil invitado):
   el texto no debe aplastarse — los botones bajan a su propia fila. */
.hv2-guestbar.stacked { flex-wrap:wrap; row-gap:14px; }
.hv2-guestbar.stacked .hv2-guestbar-body { flex:1 1 100%; }
.hv2-guestbar.stacked .hv2-guestbar-icon { align-self:flex-start; }
.hv2-guestbar.stacked .hv2-guestbar-btn,
.hv2-guestbar.stacked .hv2-guestbar-login { flex:1 1 0; text-align:center; padding:11px 14px; font-size:13px; }

/* Juegos destacados en el rail: rellena la columna derecha con arte real. */
#railFeatured .hv2-feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px; }
.hv2-feat-tile { position:relative; border:none; padding:0; cursor:pointer; border-radius:12px; overflow:hidden;
  aspect-ratio:16/10; background:#0f1226; box-shadow:0 6px 16px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08); }
.hv2-feat-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .28s ease; }
.hv2-feat-tile:hover img { transform:scale(1.07); }
.hv2-feat-tile:hover { border-color:rgba(139,107,255,.55); }
.hv2-feat-emoji { display:flex; align-items:center; justify-content:center; height:100%; font-size:34px; }
.hv2-feat-name { position:absolute; left:0; right:0; bottom:0; padding:16px 9px 7px; text-align:left;
  font-size:11.5px; font-weight:800; color:#fff; letter-spacing:.2px;
  background:linear-gradient(to top, rgba(5,7,16,.94), rgba(5,7,16,.5) 55%, rgba(5,7,16,0)); }

/* Estado vacío reutilizable (secciones sin contenido: Salas, etc.).
   Antes eran líneas de texto sueltas en un mar de negro → poco profesional. */
.empty-state { text-align:center; padding:48px 24px; max-width:440px; margin:0 auto; }
.empty-state .es-icon { width:66px; height:66px; margin:0 auto 16px; display:block; opacity:.95; }
.empty-state h4 { margin:0 0 8px; font-size:17px; font-weight:800; color:#e2e8f6; }
.empty-state p { margin:0 0 20px; font-size:13px; line-height:1.55; color:#8b97b0; }
.empty-state .es-cta { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  padding:11px 22px; border-radius:12px; font-size:13.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#8b6bff,#4dd6ff); box-shadow:0 8px 24px rgba(139,107,255,.3); }
.empty-state .es-cta:hover { filter:brightness(1.08); }
/* Banner de invitado orientado a beneficios (regalos/skins) */
.hv2-guestbar { background:linear-gradient(135deg, rgba(255,160,30,.18), rgba(255,77,141,.14)); border-color:rgba(255,160,30,.45); }
.hv2-guestbar-icon { font-size:36px; filter:drop-shadow(0 0 10px rgba(255,180,60,.5)); animation:hvGiftPulse 1.8s ease-in-out infinite; }
@keyframes hvGiftPulse { 0%,100%{transform:scale(1) rotate(-4deg);} 50%{transform:scale(1.12) rotate(4deg);} }
.hv2-guest-perks { display:grid; grid-template-columns:1fr 1fr; gap:5px 18px; margin-top:9px; }
.hv2-guest-perks span { color:#f2e7d2; font-size:12px; line-height:1.5; }
.hv2-guest-perks b { color:#fff; }
.hv2-guestbar-cta { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.hv2-guestbar-btn { font-size:13px; padding:11px 18px; box-shadow:0 8px 20px rgba(255,77,141,.35); }
@media (max-width:760px) {
  .hv2-guest-perks { grid-template-columns:1fr; }
  .hv2-guestbar-cta { flex-direction:row; flex:1 1 100%; }
  .hv2-guestbar-cta button { flex:1; }
}
@media (max-width:760px) {
  /* el icono decorativo se oculta; el cuerpo ocupa toda la fila (flex-basis:100%,
     porque .hv2-guestbar-body tiene flex:1 → flex-basis:0 que ignoraba width:100%)
     y los dos botones comparten la fila de abajo. Antes quedaba todo apretado. */
  .hv2-guestbar { flex-wrap:wrap; gap:10px 8px; padding:14px 16px; }
  .hv2-guestbar-icon { display:none; }
  .hv2-guestbar-body { flex:1 1 100%; min-width:0; }
  .hv2-guestbar-btn, .hv2-guestbar-login { flex:1 1 0; text-align:center; padding:11px 12px; }
}

/* Tarjeta del rail bloqueada para invitados */
.hv2-card.rail-highlight { border-color: rgba(160,107,255,.6) !important; box-shadow: 0 0 0 2px rgba(160,107,255,.3), 0 6px 22px rgba(0,0,0,.3) !important; transition: border-color .2s, box-shadow .2s; }
/* Estado "bloqueado para invitado": velo esmerilado limpio + chip de candado
   legible (antes: texto a 45% de opacidad → parecía medio roto). */
.hv2-card.guest-locked { position:relative; overflow:hidden; }
.hv2-card.guest-locked > * { opacity:.16; filter:grayscale(70%) blur(1px); pointer-events:none; }
.hv2-card.guest-locked::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:1;
  background:linear-gradient(160deg, rgba(12,14,28,.78), rgba(20,14,34,.86)); backdrop-filter:blur(3px);
}
.hv2-card.guest-locked::after {
  content:'🔒 Solo con cuenta';
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  padding:8px 16px; border-radius:999px; white-space:nowrap; pointer-events:none;
  background:rgba(160,107,255,.24); border:1px solid rgba(160,107,255,.55);
  font-size:12.5px; font-weight:800; color:#eadfff; letter-spacing:.3px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.hv2-guest { background: linear-gradient(160deg, rgba(160,107,255,.22), rgba(255,77,141,.14)); border-color: rgba(160,107,255,.3); }
.hv2-guest p { color: #d2c9e6; font-size: 12.5px; margin: 6px 0 12px; } .hv2-guest .hv2-btn { width: 100%; }

/* PASE DE BATALLA — banner en home */
/* ---- PASE DE TEMPORADA ---- */
.hv2-pass-banner {
  background: linear-gradient(135deg, #1c1240 0%, #25144d 45%, #160b30 100%);
  border: 1px solid rgba(255,200,60,.4); border-radius: 16px; padding: 0;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 38px rgba(160,107,255,.22), inset 0 1px 0 rgba(255,200,60,.18);
}
.hv2-pass-banner::before {
  content: ''; position: absolute; top: -70px; right: 30px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,60,.16) 0%, transparent 70%);
  pointer-events: none; animation: mhGlow 5s ease-in-out infinite;
}
.hv2-pass-banner::after {
  content: ''; position: absolute; bottom: -80px; left: 10%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123,92,255,.14) 0%, transparent 70%);
  pointer-events: none;
}
.hpb-header { display: flex; align-items: center; justify-content: space-between; }
.hpb-label { font-size: 11.5px; font-weight: 900; color: #ffd447; letter-spacing: .8px;
  text-shadow: 0 0 12px rgba(255,212,71,.5); }
.hpb-season { font-size: 9.5px; font-weight: 700; background: rgba(255,212,71,.18); color: #ffd447;
  padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.hpb-timer { font-size: 11px; color: rgba(255,212,71,.6); font-weight: 700; }
.hpb-body { display: flex; align-items: center; gap: 14px; }
.hpb-left { flex-shrink: 0; min-width: 140px; }
.hpb-level { position: relative; font-size: 34px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 7px;
  text-shadow: 0 0 18px rgba(255,180,40,.45); }
.hpb-level span { background: linear-gradient(135deg,#ffe066,#ffb300); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 10px rgba(255,180,40,.5)); }
.hpb-max { font-size: 13px; color: rgba(255,212,71,.5); font-weight: 700; }
.hpb-xprow { display: flex; align-items: center; gap: 8px; }
.hpb-xpbar { position: relative; flex: 1; height: 9px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; }
.hpb-xpbar > div { position: relative; height: 100%; background: linear-gradient(90deg,#ffd447,#ff9500); border-radius: 6px;
  box-shadow: 0 0 12px rgba(255,180,40,.6); transition: width .5s; overflow: hidden; }
.hpb-xpbar > div::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  width: 50%; animation: hpbShine 2.4s ease-in-out infinite;
}
@keyframes hpbShine { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
.hpb-xptxt { font-size: 10.5px; color: rgba(255,212,71,.7); font-weight: 800; white-space: nowrap; }
.hpb-next { font-size: 11px; color: #c9b8ff; font-weight: 700; }
.hpb-next b { color: #ffd447; }

/* Track scrollable de 100 niveles */
.hpb-track-wrap { flex: 1; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,200,60,.3) transparent; }
.hpb-track-wrap::-webkit-scrollbar { height: 4px; }
.hpb-track-wrap::-webkit-scrollbar-thumb { background: rgba(255,200,60,.3); border-radius: 2px; }
.hpb-track { display: flex; align-items: flex-end; gap: 2px; padding: 3px 0 4px; width: max-content; }
.hpb-node { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; border-radius: 7px; padding: 3px 1px; transition: background .15s; }
.hpb-node.done:not(.claimed) { cursor: pointer; }
.hpb-node.done:not(.claimed):hover { background: rgba(255,212,71,.12); }
.hpb-node-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); transition: all .2s; }
.hpb-node.hpb-mile .hpb-node-ico { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
.hpb-node.done .hpb-node-ico { background: linear-gradient(135deg,#ffd447,#ff9500); border-color: #ffd447; box-shadow: 0 0 12px rgba(255,212,71,.55); }
.hpb-node.claimed .hpb-node-ico { background: linear-gradient(135deg,#2ecc71,#1a8f4e); border-color: #2ecc71; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 0 10px rgba(46,204,113,.4); }
.hpb-node-lv { font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,.35); }

/* Pase de Temporada completo (modal "Ver todo"/"Ver pase"): mucho más sitio
   que en el banner del home, así que los nodos van notablemente más grandes. */
.modal-pass-track-wrap { max-width: 100%; }
.modal-pass-track { gap: 8px; padding: 6px 4px 10px; }
.modal-pass-track .hpb-node { padding: 6px 3px; border-radius: 10px; gap: 5px; }
.modal-pass-track .hpb-node-ico { width: 46px; height: 46px; font-size: 22px; border-radius: 13px; border-width: 2px; }
.modal-pass-track .hpb-node.hpb-mile .hpb-node-ico { width: 56px; height: 56px; font-size: 26px; border-radius: 16px; }
.modal-pass-track .hpb-node.claimed .hpb-node-ico { font-size: 22px; }
.modal-pass-track .hpb-node-lv { font-size: 13px; }
.modal-pass-track .ms-link, .modal-pass-track .hpb-link { height: 3px; }
.hpb-node.done .hpb-node-lv { color: #ffd447; }
.hpb-node.claimed .hpb-node-lv { color: #2ecc71; }
.hpb-node.hpb-mile .hpb-node-lv { font-size: 9.5px; color: rgba(255,200,60,.5); }
.hpb-node.hpb-mile.done .hpb-node-lv { color: #ffb300; }

/* Banner: pase ocupa todo el espacio disponible, misión ancho fijo.
   flex:1 + width:100% para que .hpb-body LLENE el banner: el JS pone
   #hv2PassBanner en display:flex y sin esto el contenido se quedaba a la
   izquierda dejando un hueco morado vacío a la derecha. */
.hpb-body { display: flex; align-items: stretch; gap: 0; flex: 1 1 auto; width: 100%; }
.hpb-half { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-width: 0; }
.hpb-pass-side { flex: 1; }
.hpb-mission-side { flex: none; width: 220px; align-items: center; justify-content: center; text-align: center;
  background: rgba(255,200,60,.07); border-left: 1px solid rgba(255,212,71,.18); }
.hpb-m-barwrap { width: 100%; }
.hpb-vdivider { display: none; }
.hpb-pass-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }

/* indicador "tienes recompensas pendientes de niveles anteriores" al borde del track */
.hpb-node.hpb-more .hpb-node-ico { background: linear-gradient(135deg,#2ecc71,#1a8f4e); border-color: #2ecc71;
  color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 0 10px rgba(46,204,113,.5); animation: msAiPulse 1.4s ease-in-out infinite; }
.hpb-node.hpb-more .hpb-node-lv { color: #2ecc71; }
.hpb-node.hpb-more { cursor: pointer; }

/* Misión diaria dentro del pass banner */
.hpb-mission-mid { flex-shrink: 0; width: 220px; background: rgba(255,200,60,.1); border: 1.5px solid rgba(255,200,60,.45); border-radius: 12px; padding: 11px 14px; box-shadow: 0 0 12px rgba(255,200,60,.12) inset; }
.hpb-m-icon { font-size: 36px; line-height: 1; }
.hpb-m-label { font-size: 10.5px; font-weight: 900; color: #ffd447; letter-spacing: .6px; margin-bottom: 6px; text-shadow: 0 0 8px rgba(255,212,71,.4); }
.hpb-m-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 9px; }
.hpb-m-barwrap { display: flex; align-items: center; gap: 8px; }
.hpb-m-bar { flex: 1; height: 6px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.hpb-m-bar > div { height: 100%; background: linear-gradient(90deg,#ffd447,#ff9500); border-radius: 4px; transition: width .4s; }
.hpb-m-meta { font-size: 10px; color: #ffd447; font-weight: 700; white-space: nowrap; }

.hpb-cta { flex-shrink: 0; border: none; cursor: pointer; font-weight: 800; font-size: 12px;
  padding: 10px 16px; border-radius: 12px; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg,#ffd447,#ff9500);
  box-shadow: 0 4px 16px rgba(255,150,0,.35); transition: filter .15s; }
.hpb-cta:hover { filter: brightness(1.1); }

/* Salas activas: altura mínima pequeña cuando está vacía (antes 240/280px
   forzaban una caja enorme con una sola línea de texto dentro); si hay
   contenido real, se expande hasta 340px con scroll. */
.hv2-rooms-big .hv2-rooms { min-height: 0; max-height: 340px; overflow-y: auto; }
.hv2-empty { display: flex; align-items: center; justify-content: center; min-height: 56px; color: rgba(255,255,255,.35); font-size: 13px; text-align: center; padding: 12px; }

@media (max-width: 760px) {
  .hpb-body { flex-direction: column; }
  .hpb-half { padding: 14px 16px; }
  .hpb-mission-side { border-left: none; border-top: 1px solid rgba(255,212,71,.18); align-items: flex-start; text-align: left; }
  .hpb-cta { width: 100%; text-align: center; padding: 12px; }
}

/* RESPONSIVE: en móvil/tablet el rail baja debajo */
@media (max-width: 980px) { .hv2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  /* HOME MÓVIL: una sola fuente de verdad (V3 de mhome.js) — el hero grande,
     los contadores y la columna lateral (.hv2-rail) de la V2 desktop se OCULTAN
     aquí para no duplicar contenido ni alargar la pantalla. Lo único de la V2
     que se conserva en móvil es "Juegos en línea" (.hv2-pop), redimensionado. */
  .hv2 { display: flex !important; flex-direction: column; gap: 16px; align-items: stretch !important; }
  .hv2-main { width: 100%; }
  .hv2-hero, .hv2-stats, .hv2-pass-banner, .hv2-rail, .hv2-event { display: none !important; }
  .hv2-two { grid-template-columns: 1fr; }
  /* en móvil V3 ya trae misión/racha/actividad: evita duplicar esas tarjetas */
  .hv2-hide-mobile { display: none; }

  /* JUEGOS EN LÍNEA: el deslizar con el dedo ya es natural en móvil, así que
     las flechas del carrusel (pensadas para ratón) se ocultan aquí. */
  .hv2-car-arrow { display: none; }
  .hv2-pop { gap: 12px; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin: 0 -2px; scrollbar-width: none; }
  .hv2-pop::-webkit-scrollbar { display: none; }
  .hv2-game { flex: 0 0 42%; }
  .hv2-game .thumb { height: 96px; font-size: 46px; }
  .hv2-game .nm { font-size: 13px; }
}

/* HOME v2 — amigos online */
.hv2-friends { display:flex; flex-direction:column; gap:9px; }
.hv2-friend { display:flex; align-items:center; gap:9px; }
.hv2-friend .fdot { width:9px; height:9px; border-radius:50%; background:#2ecc71; box-shadow:0 0 8px #2ecc71; flex-shrink:0; }
.hv2-friend .ftxt { flex:1; min-width:0; }
.hv2-friend .ftxt b { font-size:12.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hv2-friend .ftxt small { color:#9fb0c8; font-size:11px; }
.hv2-friend .fcreate { background:linear-gradient(135deg,#2ecc71,#1aa050); border:none; color:#fff; font-weight:800; font-size:11.5px; padding:6px 11px; border-radius:9px; cursor:pointer; flex-shrink:0; }
.hv2-friend .fcreate:hover { filter:brightness(1.08); }

/* ---- SECCIÓN MISIONES ---- */
/* ---------- PERFIL COMPACTO (top de home móvil) ---------- */
.mh-profile { display: none; } /* solo móvil — se activa en la media query */
@media (max-width: 760px) {
  .mh-profile {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 12px; margin-bottom: 4px; cursor: pointer;
  }
  .mh-profile.guest-locked > * { pointer-events: none; }
  .mhp-avatar { font-size: 24px; line-height: 1; flex-shrink: 0; }
  .mhp-body { flex: 1; min-width: 0; }
  .mhp-name { font-size: 12.5px; font-weight: 900; color: #e0e6f0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mhp-lvl { font-size: 9.5px; color: #b48bff; font-weight: 700; margin: 0 0 3px; }
  .mhp-xpbar { height: 4px; background: rgba(255,255,255,.08); border-radius: 4px;
    overflow: hidden; margin-bottom: 2px; }
  .mhp-xpbar > div { height: 100%; background: linear-gradient(90deg,#ffd447,#ff9a3d);
    border-radius: 4px; transition: width .4s; }
  .mhp-xptxt { font-size: 8.5px; color: #7b8fa8; }
  .mhp-stats { display: flex; gap: 7px; flex-shrink: 0; }
  .mhp-stat { text-align: center; }
  .mhp-stat b { font-size: 12px; font-weight: 900; color: #7fffbf; display: block; }
  .mhp-stat small { font-size: 8px; color: #7b8fa8; }

  /* ocultar en móvil: el banner grande del pase (la sección mv3-season es la móvil) */
  #hv2PassBanner { display: none !important; }
}

#dashMisiones { padding: 4px 0; }
.msec-block { margin-bottom: 24px; }
.msec-head { font-size: 13px; font-weight: 800; color: #8894aa; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 12px; }
.msec-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 18px 20px; }
.msec-title { font-size: 15px; font-weight: 800; color: #e0e6f0; margin-bottom: 12px; }
.msec-barwrap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.msec-bar { flex: 1; height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.msec-bar > div { height: 100%; background: linear-gradient(90deg,#7b52ff,#c87dff); border-radius: 4px; transition: width .4s; }
.msec-meta { font-size: 12px; color: #9fb0c8; white-space: nowrap; }
.msec-reward { font-size: 13px; color: #9fb0c8; display: flex; align-items: center; gap: 8px; }
.msec-xp { background: rgba(160,107,255,.2); color: #d7c6ff; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 8px; }
.msec-coin-pill { background: rgba(255,212,71,.16); color: #ffd447; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 8px; }
.msec-diamond-pill { background: rgba(110,200,255,.16); color: #7fd6ff; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 8px; }

/* ---- Reto del día (tarjeta grande con ilustración) ---- */
.msec-challenge-card { position: relative; display: flex; align-items: stretch; gap: 18px; background: linear-gradient(120deg,#3a1f6b,#1e1448 60%); border: 1px solid rgba(180,139,255,.25); border-radius: 18px; padding: 22px 26px; overflow: hidden; }
.msec-ch-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.msec-ch-label { font-size: 12px; font-weight: 900; letter-spacing: .6px; color: #ff7ad9; margin-bottom: 8px; }
.msec-ch-title { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.msec-ch-desc { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 16px; }
.msec-ch-progress { margin-bottom: 14px; }
.msec-ch-plabel { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .4px; color: rgba(255,255,255,.55); text-transform: uppercase; margin-bottom: 8px; }
.msec-ch-bar { background: rgba(255,255,255,.12); }
.msec-ch-art { position: relative; width: 180px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.msec-ch-pad { font-size: 70px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.msec-ch-fx { position: absolute; font-size: 26px; animation: hv2float 3s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.msec-ch-fx.g1 { top: 10px; left: 10px; font-size: 22px; }
.msec-ch-fx.g2 { top: 4px; right: 24px; font-size: 20px; animation-delay: .4s; }
.msec-ch-fx.g3 { bottom: 8px; right: 4px; font-size: 26px; animation-delay: .8s; }
.msec-ch-fx.g4 { bottom: 18px; left: 0; font-size: 18px; animation-delay: 1.2s; }
.msec-ch-fx.g5 { bottom: -2px; left: 60px; font-size: 16px; animation-delay: 1.6s; }
@media (max-width: 760px) { .msec-challenge-card { flex-direction: column; } .msec-ch-art { width: 100%; height: 70px; } }

/* ---- Misiones diarias (lista con barra de progreso real) ---- */
.msec-list { display: flex; flex-direction: column; gap: 10px; }
.msec-mission { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 16px; flex-wrap: wrap; }
.msec-mission.done { border-color: rgba(46,204,113,.35); background: rgba(46,204,113,.06); }
.msec-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,212,71,.12); font-size: 18px; flex-shrink: 0; }
.msec-tx { flex: 0 0 220px; } .msec-tx b { font-size: 13px; display: block; color: #e0e6f0; } .msec-tx small { color: #9fb0c8; font-size: 11.5px; }
.msec-mission-bar { flex: 1; min-width: 100px; height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.msec-mission-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#7b52ff,#c87dff); border-radius: 4px; transition: width .4s; }
.msec-mission.done .msec-mission-bar > span { background: linear-gradient(90deg,#2ecc71,#7fffbf); }
.msec-mission.done .msec-mission-bar { background: rgba(46,204,113,.15); }
.msec-done-pill { background: rgba(46,204,113,.18); color: #7fffbf; font-weight: 800; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
/* Overlay de carga con spinner (descarga de módulos de juego) */
#pgLoading { position: fixed; inset: 0; z-index: 9993; background: rgba(8,10,20,0.82); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.pgl-box { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pgl-spin { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.14); border-top-color: #b48bff; animation: pglSpin 0.8s linear infinite; }
.pgl-tx { color: #cdd6e6; font-size: 14px; font-weight: 700; }
@keyframes pglSpin { to { transform: rotate(360deg); } }

/* Racha del cofre diario */
.daily-streak { text-align: center; color: #ffb070; font-weight: 800; font-size: 14px; margin: 4px 0 14px;
  background: rgba(255,140,60,0.1); border: 1px solid rgba(255,140,60,0.25); border-radius: 10px; padding: 8px; }

/* Bloque de recompensa COBRABLE de la misión diaria (estado real del servidor) */
.msec-claim { width: 100%; text-align: center; border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.msec-claim.ready { border: none; cursor: pointer; color: #06210f; background: linear-gradient(135deg, #ffd447, #ff9f1c); box-shadow: 0 8px 22px rgba(255,180,40,0.35); animation: msecPulse 1.6s ease-in-out infinite; }
.msec-claim.ready:hover { filter: brightness(1.06); }
.msec-claim.locked { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #b9c4d8; }
.msec-claim.locked b { color: #ffd447; }
.msec-claim.claimed { background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.3); color: #7fffbf; }
@keyframes msecPulse { 0%,100% { box-shadow: 0 8px 22px rgba(255,180,40,0.35); } 50% { box-shadow: 0 8px 30px rgba(255,180,40,0.6); } }

/* ---- Cofre diario ---- */
.msec-daily { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.msec-daily-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.msec-daily-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(160,107,255,.14); font-size: 26px; flex-shrink: 0; }
.msec-daily-sub { font-size: 12px; color: #9fb0c8; }
.msec-daily-r { flex-shrink: 0; }
.msec-daily-next { text-align: right; }
.msec-daily-next small { display: block; font-size: 11px; color: #8894aa; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.msec-daily-next b { font-size: 18px; font-weight: 900; color: #d7c6ff; font-variant-numeric: tabular-nums; }
.msec-claim-btn { background: linear-gradient(135deg,#ffd447,#ff9a3d); border: none; color: #1a1200; font-weight: 900; font-size: 13px; padding: 10px 20px; border-radius: 10px; cursor: pointer; flex-shrink: 0; }
.msec-claim-btn:disabled { opacity: .4; cursor: default; }

/* ---- Torneos dentro de Misiones y Torneos ---- */
.msec-tournament { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.msec-tour-badge { background: linear-gradient(135deg,#ff5364,#c8002a); color: #fff; font-size: 9px; font-weight: 900; padding: 3px 8px; border-radius: 6px; letter-spacing: .6px; flex-shrink: 0; }
.msec-tour-badge-next { background: linear-gradient(135deg,#7b52ff,#4a2ea8); }
.msec-tour-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,212,71,.12); font-size: 20px; flex-shrink: 0; }
.msec-tour-next .msec-tour-ic { background: rgba(160,107,255,.14); }
.msec-tour-info { flex: 1; min-width: 160px; }
.msec-tour-meta { font-size: 12px; color: #9fb0c8; margin-top: 2px; }
.msec-tour-meta b { color: #ffd447; }
.msec-tour-top3 { display: flex; gap: 10px; }
.msec-tour-av { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; }
.msec-tour-av-rank { font-size: 14px; }
.msec-tour-av-circ { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); font-size: 18px; }
.msec-tour-av small { font-size: 10.5px; color: #9fb0c8; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msec-tour-av b { font-size: 11px; color: #ffd447; font-weight: 800; }
.msec-tour-prizes { font-size: 12px; color: #9fb0c8; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.msec-tour-btn { background: linear-gradient(135deg,#ffd447,#ff9500); color: #1a1200; }
.msec-tour-btn-2 { background: linear-gradient(135deg,#7b52ff,#c87dff); color: #fff; }
@media (max-width: 760px) { .msec-tournament { flex-direction: column; align-items: flex-start; } .msec-tour-top3 { order: 5; } }

/* ===================================================================
   MOBILE GAME UX — juegos en teléfono (360-904px)
   Breakpoints: S7/Fold-folded ≤374px, móvil ≤760px, tablet ≤904px
   =================================================================== */

/* Prevenir scroll/pull-to-refresh mientras se juega con touch */
#game canvas, #snakeCanvas, #pongCanvas, #brCanvas, #twCanvas {
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Panel de torres horizontalmente deslizable — sin barra de scroll */
#twTowers::-webkit-scrollbar { display: none; }
#twTowers { scrollbar-width: none; }

/* HUD del Tower más compacto en móvil */
@media (max-width: 540px) {
  #twHud { font-size: 11px !important; gap: 6px !important; padding: 4px 8px !important; }
  #twStartWave { padding: 4px 10px !important; font-size: 11px !important; }
}

/* Botones D-pad de Snake más grandes en móvil estrecho */
@media (max-width: 480px) {
  #snakeControls .sc { min-width: 60px !important; min-height: 60px !important; font-size: 22px !important; padding: 0 !important; }
  #snakeControls { gap: 6px !important; margin: 10px 0 !important; }
  #snakeControls .sc-mid { gap: 6px !important; }
}

/* Canvas de juego: centra y usa el máximo ancho en móvil */
@media (max-width: 760px) {
  #game { padding: 4px 0 !important; }
  #game canvas { display: block; margin: 0 auto; }

  /* Snake: canvas a ancho casi completo */
  #snakeCanvas { max-width: 96vw !important; height: auto !important; }

  /* Race: canvas scrollable horizontalmente */
  #raceCanvas { max-width: 96vw !important; height: auto !important; }

  /* Texto de pista (hint) más pequeño */
  .hint, p.hint { font-size: 11px !important; margin: 4px 0 !important; }

  /* Breakout: alinea bien el wrap */
  #brWrap { padding: 4px 0 !important; }
}

/* ≤374px: Galaxy S7, Galaxy Fold 5 cerrado */
@media (max-width: 374px) {
  /* HUD del Tower: reducir más aún */
  #twHud { font-size: 10px !important; gap: 4px !important; }

  /* Botones de Snake más juntos */
  #snakeControls .sc { min-width: 54px !important; min-height: 54px !important; font-size: 20px !important; }

  /* Marcador de Pong más compacto */
  #pgSelf, #pgOpp { font-size: 18px !important; }

  /* Lobby: padding reducido para que quepa el formulario */
  #lobby { padding: 18px 14px !important; margin: 2vh auto !important; }
  .lobby-title { font-size: 24px !important; }

  /* Dashboard: hero más compacto */
  #mobileHero h2 { font-size: 20px !important; }
  #mobileHero { padding: 16px 14px !important; }
  .cg-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* Safe-area para iPhone X / Android con notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobileNav { padding-bottom: env(safe-area-inset-bottom) !important; }
  body { padding-bottom: 0; }
  @media (max-width: 760px) {
    #dashMain { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  }
}

/* Galaxy Fold 5 abierto (~904px): tratarlo como tablet ancho */
@media (min-width: 760px) and (max-width: 920px) {
  #dashboard { grid-template-columns: 220px 1fr !important; }
  #sidebar { width: 220px; }
  .cg-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Botones de juego: sin highlight azul táctil en toda la app */
button { -webkit-tap-highlight-color: transparent; }

/* Evitar que el canvas pierda interactividad en iOS por zoom */
#game { touch-action: pan-y; }
#game canvas, #snakeCanvas { touch-action: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   PASE DE TEMPORADA — página dedicada (v48)
   ═══════════════════════════════════════════════════════════════════════════ */

.tp-page { max-width: 960px; margin: 0 auto; padding: 0 0 40px; }

/* Hero banner */
.tp-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  min-height: 200px; display: flex; align-items: flex-end;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #1a0a3d 0%, #2d1b69 40%, #4a2c8a 70%, #7c3aed 100%);
}
.tp-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55; pointer-events: none;
}
.tp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,5,30,0.92) 0%, rgba(10,5,30,0.3) 60%, transparent 100%);
}
.tp-hero-content {
  position: relative; z-index: 1; padding: 28px 28px 24px; width: 100%;
}
.tp-hero-crown { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.tp-hero-title {
  font-size: clamp(22px, 4vw, 36px); font-weight: 900;
  color: #ffd447; text-shadow: 0 2px 12px rgba(255,212,71,0.5);
  margin: 0 0 4px;
}
.tp-hero-season { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 16px; }
.tp-hero-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tp-timer-pill {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #fff;
}
.tp-claim-all-btn {
  background: linear-gradient(135deg, #ffd447, #ff9500); color: #1a0a0a;
  border: none; padding: 8px 18px; border-radius: 22px; font-size: 13px; font-weight: 800;
  cursor: pointer; touch-action: manipulation; letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(255,212,71,0.4);
  animation: tp-pulse 1.8s ease-in-out infinite;
}
@keyframes tp-pulse { 0%,100% { box-shadow: 0 4px 16px rgba(255,212,71,0.4); } 50% { box-shadow: 0 4px 24px rgba(255,212,71,0.75); } }

/* Progress bar */
.tp-progress-wrap {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 24px;
}
.tp-progress-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.tp-lvl-badge { font-size: 15px; font-weight: 800; color: #ffd447; }
.tp-lvl-badge b { font-size: 20px; }
.tp-xp-txt { font-size: 12px; color: rgba(255,255,255,0.5); }
.tp-xpbar { height: 10px; background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; }
.tp-xpfill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #7c3aed, #ffd447);
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(255,212,71,0.4);
}
/* Botón "Acelerar pase" (gasta diamantes para subir 1 nivel) */
.tp-skip-btn { margin-top: 12px; width: 100%; padding: 10px; border-radius: 12px; border: 1px solid rgba(96,208,255,0.35);
  background: linear-gradient(135deg, rgba(96,208,255,0.16), rgba(150,110,255,0.12)); color: #cde9ff;
  font-weight: 800; font-size: 13.5px; cursor: pointer; }
.tp-skip-btn:hover { filter: brightness(1.12); border-color: rgba(96,208,255,0.6); }

/* Tarjeta de recompensa de CIERRE de temporada */
.tp-closing-card { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding: 16px 18px;
  border-radius: 16px; background: linear-gradient(135deg, rgba(46,204,113,0.16), rgba(124,58,237,0.12));
  border: 1px solid rgba(46,204,113,0.4); box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.tp-closing-ico { font-size: 32px; line-height: 1; flex-shrink: 0; }
.tp-closing-tx { flex: 1; min-width: 0; }
.tp-closing-tx b { display: block; color: #fff; font-size: 15px; font-weight: 900; }
.tp-closing-tx small { color: #cfe6d8; font-size: 12px; }
.tp-closing-rw { font-weight: 900; color: #ffd447; font-size: 15px; flex-shrink: 0; white-space: nowrap; }
.tp-closing-btn { flex-shrink: 0; padding: 10px 18px; border-radius: 12px; border: none; cursor: pointer;
  font-weight: 900; font-size: 13.5px; color: #06210f; background: linear-gradient(135deg, #2ecc71, #1fae63); }
.tp-closing-btn:hover { filter: brightness(1.08); }

/* Track section */
.tp-track-section { margin-bottom: 32px; display: flex; flex-direction: column; gap: 6px; }
.tp-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 10px 12px;
  transition: background 0.2s;
}
.tp-row.tp-row-done { border-color: rgba(46,204,113,0.2); }
.tp-row.tp-row-active { border-color: rgba(255,212,71,0.3); background: rgba(255,212,71,0.05); }
.tp-row-label { font-size: 10px; color: rgba(255,255,255,0.3); font-weight: 700; min-width: 36px; }
.tp-row-nodes { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }

/* Individual nodes */
.tp-node {
  width: 42px; height: 52px; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: default; position: relative; transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.tp-node.tp-mile {
  width: 52px; height: 60px;
  background: rgba(255,212,71,0.08); border-color: rgba(255,212,71,0.3);
}
.tp-node.tp-claimed {
  background: rgba(46,204,113,0.12); border-color: rgba(46,204,113,0.4);
  opacity: 0.7;
}
.tp-node.tp-done {
  background: rgba(255,212,71,0.1); border-color: rgba(255,212,71,0.5);
  cursor: pointer;
  animation: tp-node-pulse 2s ease-in-out infinite;
}
.tp-node.tp-done:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(255,212,71,0.4); animation: none; }
.tp-node.tp-current {
  border-color: #ffd447 !important; box-shadow: 0 0 0 3px rgba(255,212,71,0.25), 0 4px 16px rgba(255,212,71,0.3);
  background: rgba(255,212,71,0.15) !important;
}
@keyframes tp-node-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,212,71,0.3); } 50% { box-shadow: 0 0 0 4px rgba(255,212,71,0.15); } }

.tp-node-ico { font-size: 16px; line-height: 1.2; }
.tp-node.tp-mile .tp-node-ico { font-size: 20px; }
.tp-node-lv { font-size: 9px; color: rgba(255,255,255,0.4); font-weight: 700; line-height: 1; }
.tp-node.tp-done .tp-node-lv, .tp-node.tp-current .tp-node-lv { color: #ffd447; }
.tp-node-dia { font-size: 8px; color: #80deea; line-height: 1; }

/* Stats row */
.tp-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px;
}
.tp-stat-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 16px 12px; text-align: center;
}
.tp-stat-ico { font-size: 24px; margin-bottom: 6px; }
.tp-stat-val { font-size: 20px; font-weight: 900; color: #ffd447; margin-bottom: 4px; }
.tp-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.5); }

/* How to earn XP section */
.tp-howto { background: rgba(255,255,255,0.03); border-radius: 14px; padding: 20px 20px 16px; }
.tp-howto h3 { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.6); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.tp-howto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tp-howto-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; background: rgba(255,255,255,0.04); border-radius: 10px;
  text-align: center;
}
.tp-howto-ico { font-size: 24px; }
.tp-howto-card b { font-size: 12px; color: #fff; }
.tp-howto-card span { font-size: 11px; color: rgba(255,255,255,0.45); }

/* Mobile adaptations */
@media (max-width: 760px) {
  .tp-hero { min-height: 160px; border-radius: 12px; }
  .tp-hero-content { padding: 20px 16px 18px; }
  .tp-hero-crown { font-size: 28px; }
  .tp-stats-row { grid-template-columns: repeat(2, 1fr); }
  .tp-howto-grid { grid-template-columns: repeat(2, 1fr); }
  .tp-node { width: 34px; height: 44px; border-radius: 6px; }
  .tp-node.tp-mile { width: 40px; height: 50px; }
  .tp-node-ico { font-size: 13px; }
  .tp-node.tp-mile .tp-node-ico { font-size: 16px; }
  .tp-row { padding: 8px 10px; gap: 6px; }
  .tp-row-nodes { gap: 3px; }
  .tp-row-label { display: none; }
}
@media (max-width: 480px) {
  .tp-node { width: 28px; height: 38px; }
  .tp-node.tp-mile { width: 34px; height: 44px; }
  .tp-node-dia { display: none; }
  .tp-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tp-stat-val { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MINIATURAS — mejoras de game cards sin imagen (gradiente de color)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gradientes por categoría para cards sin thumbnail */
.cg-thumb[data-fallback="estrategia"] { background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%); }
.cg-thumb[data-fallback="accion"]     { background: linear-gradient(135deg, #b71c1c 0%, #c62828 50%, #e53935 100%); }
.cg-thumb[data-fallback="puzzle"]     { background: linear-gradient(135deg, #006064 0%, #00838f 50%, #00acc1 100%); }
.cg-thumb[data-fallback="casual"]     { background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #43a047 100%); }
.cg-thumb[data-fallback="cartas"]     { background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 50%, #8e24aa 100%); }
.cg-thumb[data-fallback="reflejos"]   { background: linear-gradient(135deg, #e65100 0%, #ef6c00 50%, #fb8c00 100%); }
.cg-thumb[data-fallback="clasico"]    { background: linear-gradient(135deg, #33691e 0%, #558b2f 50%, #7cb342 100%); }
.cg-thumb[data-fallback="multij"]     { background: linear-gradient(135deg, #880e4f 0%, #ad1457 50%, #e91e63 100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   MEJORAS ESTÉTICAS v48 — cards, play button, shimmer, sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card hover — borde de color por categoría de juego */
.cg-card:not(.soon):hover { border-color: rgba(160,107,255,0.45) !important; }

/* Play button mejorado */
.cg-play-btn span {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  padding: 7px 20px !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.5);
}

/* Fade-in de imagen al cargar */
.cg-thumb img { transition: opacity 0.3s; opacity: 1; }

/* Landing cards — más alto contraste en hover */
.lp-card:hover { box-shadow: 0 20px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(160,107,255,0.3) !important; }
.lp-thumb img { transition: transform 0.3s; }
.lp-card:hover .lp-thumb img { transform: scale(1.05); }

/* Sidebar — visual refinement */
.sb-link { transition: background 0.15s, color 0.15s, border-left-color 0.15s; }
.sb-link.active::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #7c3aed, #a855f7);
}
.sb-link { position: relative; }

/* Improved badge animations */
.cg-badge.hot { animation: badge-hot 2s ease-in-out infinite; }
@keyframes badge-hot { 0%,100% { box-shadow: 0 2px 8px rgba(255,77,77,.6); } 50% { box-shadow: 0 2px 14px rgba(255,77,77,.9); } }

/* Season pass home banner — better visual */
.hv2-pass-banner {
  background: linear-gradient(135deg, #1a0a3d 0%, #2d1b69 50%, #4a2c8a 100%) !important;
  border: 1px solid rgba(124,58,237,0.3) !important;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.hv2-pass-banner::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,71,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Stat cards on dashboard — subtle gradient border */
.dstat { transition: transform 0.15s; }
.dstat:hover { transform: translateY(-2px); }


/* Guest/loading state for season pass page */
.tp-guest-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 320px; text-align: center; padding: 40px 20px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; margin: 40px auto; max-width: 440px;
}

/* ====================================================
   GAME SCALING — PC (min-width: 900px)
   Canvas games scale up to fill the viewport better.
   CSS overrides inline styles via !important.
   ==================================================== */
@media (min-width: 900px) {

  /* Tower Defense: intrinsic 504×360 → ~900×643 on PC */
  #twCanvas {
    width: min(900px, 92vw) !important;
    height: auto !important;
    max-width: 92vw !important;
  }
  #twHud, #twTowers {
    max-width: min(900px, 92vw) !important;
    width: min(900px, 92vw) !important;
  }

  /* Pong: intrinsic 600×360 → ~900×540 on PC */
  #pongCanvas {
    width: min(900px, 92vw) !important;
    height: auto !important;
    max-width: 92vw !important;
  }

  /* Breakout: intrinsic 400×620 (portrait, ratio 20:31) — explicit width */
  #brCanvas {
    width: min(490px, 55vw) !important;
    height: auto !important;
    aspect-ratio: 400 / 620 !important;
    max-width: 55vw !important;
  }
  #brWrap {
    align-items: center !important;
  }

  /* Tetris: intrinsic 260×520 (ratio 1:2) — explicit dimensions */
  #tetSelf {
    width: min(330px, 38vw) !important;
    height: auto !important;
    aspect-ratio: 1 / 2 !important;
  }
  #tetOpp {
    width: min(230px, 26vw) !important;
    height: auto !important;
    aspect-ratio: 1 / 2 !important;
  }
  #tetNext { width: 80px !important; height: 80px !important; }

  /* Snake: intrinsic 460×460 → 680×680 on PC */
  #snakeCanvas {
    width: min(680px, 80vw) !important;
    height: auto !important;
    max-width: 80vw !important;
  }
}

/* ===== ONLINE DRAWER ===== */
#onlineDrawerPanel {
  position: relative;
  background: #111525;
  border-radius: 24px 24px 0 0;
  min-height: 60vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
}
.odr-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}
.odr-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 10px;
  flex-shrink: 0;
}
.odr-title {
  font-size: 17px; font-weight: 900; color: #fff; flex: 1;
}
.odr-badge {
  background: #7b5cff; color: #fff;
  font-size: 11px; font-weight: 900;
  padding: 2px 8px; border-radius: 20px;
  min-width: 20px; text-align: center;
}
.odr-badge:empty { display: none; }
.odr-close {
  background: rgba(255,255,255,0.08); border: none;
  color: #9fb0c8; width: 32px; height: 32px;
  border-radius: 50%; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.odr-body {
  padding: 0 16px 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.odr-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.odr-act-btn {
  padding: 14px 10px; border-radius: 16px; border: none;
  font-size: 14px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.odr-create {
  background: linear-gradient(135deg, #7b5cff, #9f4fff);
  color: #fff;
}
.odr-mm-open {
  background: rgba(184,160,255,0.12);
  border: 1px solid rgba(184,160,255,0.4);
  color: #c9b8ff;
}
.odr-mm-open.active {
  background: linear-gradient(135deg, #b8a0ff, #8e6bff);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(150,110,255,0.35);
}
.odr-quick {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #c8d8f0;
}
.odr-act-plus {
  font-size: 22px; font-weight: 900; line-height: 1;
  margin-top: -2px;
}
.odr-join-row {
  display: flex; gap: 8px;
}
.odr-code-inp {
  flex: 1; padding: 12px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; color: #fff;
  font-size: 16px; font-weight: 900; letter-spacing: 3px;
  text-transform: uppercase; text-align: center;
  outline: none;
}
.odr-code-inp::placeholder { color: rgba(255,255,255,0.25); letter-spacing: 1px; font-weight: 400; font-size: 13px; }
.odr-join-btn {
  padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #3a7bff, #7b52ff);
  border: none; color: #fff; font-size: 13px; font-weight: 900;
  cursor: pointer; white-space: nowrap;
}
.odr-section {}
.odr-sec-title {
  font-size: 11px; font-weight: 900; color: #5d7090;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 8px;
}
.odr-empty {
  font-size: 13px; color: #4a5c78; padding: 10px 0;
}
.odr-fr-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.odr-fr-row:last-child { border-bottom: none; }
.odr-fr-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.odr-fr-name { font-size: 14px; font-weight: 700; color: #e0ecff; }
.odr-fr-st { font-size: 11px; color: #5d7090; }
.odr-fr-st.idle { color: #2ecc71; }
.odr-fr-st.inRoom { color: #f39c12; }
.odr-fr-st.playing { color: #9b59b6; }
.odr-fr-btn {
  padding: 6px 14px; border-radius: 10px;
  background: rgba(123,92,255,0.18);
  border: 1px solid rgba(123,92,255,0.35);
  color: #b48bff; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.odr-rm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 6px; cursor: pointer;
}
.odr-rm-row:hover { background: rgba(255,255,255,0.08); }
.odr-rm-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.odr-rm-game { font-size: 13px; font-weight: 700; color: #e0ecff; }
.odr-rm-code { font-size: 11px; color: #5d7090; letter-spacing: 1px; }
.odr-rm-cnt { font-size: 12px; color: #9fb0c8; white-space: nowrap; }

/* Shop button */
.hdr-shop-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
@media (max-width: 760px) {
  #hdrShopBtn { background: rgba(255,212,71,0.12); border-color: rgba(255,212,71,0.25); }
}
@media (min-width: 761px) {
  .hdr-shop-lbl { display: none; }
}

/* ===== COINS/DIAMONDS BUTTONS ===== */
.hdr-btn-coins {
  background: none; border: none; color: #ffd447;
  font-size: 14px; font-weight: 800; cursor: pointer; padding: 4px 8px;
  border-radius: 10px; transition: background .15s;
}
.hdr-btn-coins:hover { background: rgba(255,212,71,0.15); }
@media (max-width: 760px) {
  .hdr-btn-coins { font-size: 13px; padding: 4px 6px; }
}

/* ===== CHAT TABS ===== */
.cp-tabs { display: flex; gap: 2px; flex: 1; }
.cp-tab {
  flex: 1; padding: 6px 8px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.06); border: none; border-radius: 8px;
  color: #6b7a92; cursor: pointer; position: relative; transition: all .15s;
}
.cp-tab.active { background: rgba(123,92,255,0.25); color: #b48bff; }
.cp-tab.cp-tab-dot::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: #ff4d8d;
}
#chatRoomMessages { padding: 10px 12px; overflow-y: auto; flex: 1; }
#chatPanelHead { gap: 8px; }
.cdm-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.cdm-user { font-weight: 700; flex: 1; color: #e0ecff; font-size: 14px; }
#chatDMMessages { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }

/* ===== MATCHMAKING SECTION (online drawer) ===== */
.odr-mm {
  margin: 0 0 10px; padding: 12px 12px 10px;
  background: rgba(123,92,255,0.07); border: 1px solid rgba(123,92,255,0.18);
  border-radius: 14px;
}
.odr-mm-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.odr-mm-htitle { font-size: 13px; font-weight: 800; color: #b8a0ff; }
.odr-mm-hsub { font-size: 11px; color: #5d7090; }
.odr-mm-pills {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;
  max-height: 120px; overflow-y: auto;
}
.odr-mm-pill {
  padding: 4px 9px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; color: #6b7a92; cursor: pointer; transition: all .13s;
  white-space: nowrap;
}
.odr-mm-pill:hover { background: rgba(255,255,255,0.09); color: #b0c0d8; }
.odr-mm-pill.active {
  background: rgba(123,92,255,0.22); border-color: rgba(123,92,255,0.45);
  color: #c0a8ff; font-weight: 800;
}
.odr-mm-btn {
  width: 100%; padding: 10px; font-size: 13px; font-weight: 800;
  background: linear-gradient(135deg,#7b5cff,#c040a0);
  border: none; border-radius: 10px; color: #fff; cursor: pointer;
  transition: opacity .15s; box-shadow: 0 4px 14px rgba(123,92,255,0.3);
}
.odr-mm-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.odr-mm-searching { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.odr-mm-spin {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid rgba(123,92,255,0.2); border-top-color: #7b5cff;
  animation: odr-spin 0.9s linear infinite;
}
@keyframes odr-spin { to { transform: rotate(360deg); } }
.odr-mm-stitle { font-size: 13px; font-weight: 800; color: #b8a0ff; }
.odr-mm-ssub { font-size: 10px; color: #5d7090; margin-top: 2px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odr-mm-cancel {
  width: 100%; padding: 8px; font-size: 12px; font-weight: 700;
  background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.18);
  border-radius: 10px; color: #ff8080; cursor: pointer; transition: all .15s;
}
.odr-mm-cancel:hover { background: rgba(255,80,80,0.15); }

/* ===== FRIENDS DRAWER ===== */
#friendsDrawerPanel {
  position: relative;
  background: #111525;
  border-radius: 24px 24px 0 0;
  min-height: 65vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
}
#fdrViewList { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
#fdrViewDM { flex: 1; min-height: 0; }
.fdr-search-row {
  display: flex; gap: 8px;
  padding: 0 16px 10px;
  flex-shrink: 0;
}
.fdr-search-inp {
  flex: 1; padding: 10px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; color: #fff;
  font-size: 14px; outline: none;
}
.fdr-search-inp::placeholder { color: rgba(255,255,255,0.3); }
.fdr-search-btn {
  padding: 10px 14px; border-radius: 12px;
  background: rgba(123,92,255,0.2);
  border: 1px solid rgba(123,92,255,0.3);
  color: #b48bff; font-size: 13px; font-weight: 700; cursor: pointer;
}
#fdrSearchResults {
  padding: 0 16px 8px; max-height: 160px; overflow-y: auto;
}
#fdrBody { padding: 0 16px 16px; overflow-y: auto; flex: 1; }
.fdr-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #3a4154;
}
.fdr-dot.idle { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.fdr-dot.inRoom { background: #f39c12; }
.fdr-dot.playing { background: #9b59b6; }
.fdr-dot.off { background: #3a4154; }
.fdr-friend-row { cursor: pointer; border-radius: 12px; padding: 10px; margin: 0 -4px; transition: background .15s; }
.fdr-friend-row:hover { background: rgba(255,255,255,0.05); }
.fdr-chevron { color: #3a4154; font-size: 18px; font-weight: 300; }
.fdr-unread-badge {
  background: #ff4d8d; color: #fff; font-size: 11px; font-weight: 900;
  padding: 1px 7px; border-radius: 20px; min-width: 18px; text-align: center;
}
.fdr-back-btn {
  background: rgba(255,255,255,0.08); border: none; color: #c0cce0;
  width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fdr-dm-status { font-size: 11px; color: #2ecc71; flex: 1; padding-left: 4px; }
#fdrDMMessages {
  flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px;
}
.fdr-day-sep {
  text-align: center; font-size: 11px; color: #3a4154; padding: 8px 0 4px; font-weight: 600;
}
.fdr-msg { display: flex; flex-direction: column; margin-bottom: 2px; }
.fdr-msg.mine { align-items: flex-end; }
.fdr-msg.theirs { align-items: flex-start; }
.fdr-msg-bubble {
  max-width: 78%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.4;
  word-break: break-word;
}
.fdr-msg.mine .fdr-msg-bubble { background: linear-gradient(135deg,#7b5cff,#9f4fff); color: #fff; border-radius: 18px 18px 4px 18px; }
.fdr-msg.theirs .fdr-msg-bubble { background: rgba(255,255,255,0.09); color: #e0ecff; border-radius: 18px 18px 18px 4px; }
.fdr-msg-time { font-size: 10px; color: #3a4154; padding: 2px 4px; }
.fdr-dm-input-row {
  display: flex; gap: 8px; padding: 10px 16px 16px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fdr-btn-red { background: rgba(255,80,80,0.12) !important; border-color: rgba(255,80,80,0.25) !important; color: #ff6b6b !important; }

/* Dot on friends button when there are DMs */
#hdrFriendsDot { font-size: 10px; font-weight: 900; color: #ff4d8d; }
#hdrFriendsDot.active::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d8d; vertical-align: top; margin: 1px 0 0 1px; }

/* ===== RANKINGS REDESIGN ===== */
.rk-header { margin-bottom: 4px; }
.rk-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.rk-tab {
  flex: 1; padding: 9px 6px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; color: #6b7a92; cursor: pointer; transition: all .18s;
}
.rk-tab:hover { background: rgba(255,255,255,0.09); color: #a0b4cc; }
.rk-tab.active { background: linear-gradient(135deg,#7b5cff,#ff4d8d); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(123,92,255,0.35); }

/* ── Podium ── */
.rk-podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 6px; margin: 0 0 18px;
}
.rk-pod-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; flex: 1; max-width: 110px;
}
.rk-pod-crown { font-size: 16px; line-height: 1; margin-bottom: 1px; animation: rk-bob 2.2s ease-in-out infinite; }
@keyframes rk-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.rk-pod-av { font-size: 28px; line-height: 1; }
.rk-rank-1 .rk-pod-av { font-size: 34px; }
.rk-pod-name {
  font-size: 12px; font-weight: 800; color: #c8d8f0;
  text-align: center; word-break: break-all; max-width: 90px;
  line-height: 1.2; margin-top: 4px;
}
.rk-rank-1 .rk-pod-name { font-size: 13px; color: #fff; }
.rk-pod-item.rk-me .rk-pod-name { color: #7fffbf; }
.rk-pod-lv { font-size: 10px; color: #4e6080; margin-top: 1px; }
.rk-pod-val { font-size: 12px; font-weight: 900; color: #ffd447; margin: 2px 0 6px; }
.rk-rank-1 .rk-pod-val { font-size: 14px; }
.rk-pod-base {
  width: 100%; border-radius: 10px 10px 0 0;
  display: flex; align-items: center; justify-content: center;
}
.rk-pod-rank-n { font-size: 22px; font-weight: 900; opacity: 0.55; }
.rk-rank-1 .rk-pod-base { min-height: 82px; background: linear-gradient(180deg,rgba(255,212,71,0.45),rgba(255,170,0,0.18)); border: 1px solid rgba(255,212,71,0.45); border-bottom: none; }
.rk-rank-1 .rk-pod-rank-n { color: #ffd447; opacity: 0.8; font-size: 28px; }
.rk-rank-2 .rk-pod-base { min-height: 56px; background: linear-gradient(180deg,rgba(180,190,210,0.38),rgba(140,150,175,0.12)); border: 1px solid rgba(180,190,210,0.3); border-bottom: none; }
.rk-rank-2 .rk-pod-rank-n { color: #b0c0d8; }
.rk-rank-3 .rk-pod-base { min-height: 38px; background: linear-gradient(180deg,rgba(195,130,80,0.38),rgba(160,100,60,0.12)); border: 1px solid rgba(200,140,90,0.3); border-bottom: none; }
.rk-rank-3 .rk-pod-rank-n { color: #c89060; }

/* ── List (rank 4+) ── */
.rk-list { display: flex; flex-direction: column; gap: 4px; }
.rk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04); transition: background .15s;
}
.rk-row:hover { background: rgba(255,255,255,0.07); }
.rk-row.rk-me { background: rgba(127,255,191,0.07); border: 1px solid rgba(127,255,191,0.2); }
.rk-pos { font-size: 13px; font-weight: 700; color: #4e6080; width: 26px; text-align: center; }
.rk-name { flex: 1; font-size: 13px; font-weight: 700; color: #c8d8f0; }
.rk-name small { color: #4e6080; font-weight: 400; margin-left: 4px; }
.rk-val { font-size: 13px; font-weight: 800; color: #ffd447; }
.rk-mypos { margin-top: 12px; text-align: center; font-size: 12px; color: #6b7a92; padding: 9px 12px; background: rgba(255,255,255,0.04); border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); }

/* === PRUEBA: Match-3 a PANTALLA COMPLETA en la APP (Capacitor) =============
   Solo aplica dentro de la app (html.in-app) y cuando el body lleva m3-app-fs
   (lo pone match3.js solo en modo individual). Oculta el header y la barra de
   navegación del sitio, y hace que el juego ocupe TODO el viewport adaptándose
   a la resolución/tamaño de cada teléfono (100dvh + safe-area). El tamaño del
   tablero lo calcula el JS según el alto real disponible. */
html.in-app body.m3-app-fs #topHeader,
html.in-app body.m3-app-fs #mobileNav,
html.in-app body.m3-app-fs #bg { display: none !important; }
html.in-app body.m3-app-fs { overflow: hidden; height: 100dvh; }
html.in-app body.m3-app-fs #game.m3-stage-solo {
  position: fixed; inset: 0; z-index: 40;
  /* !important: el JS pone display:block inline en #game al iniciar la partida */
  display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px; min-height: 100dvh; max-height: 100dvh; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
  background:
    radial-gradient(600px 480px at 50% 22%, rgba(123,60,200,0.18), transparent 65%),
    #0a0d1c;
}
/* El HUD (top, objetivo, boosters) NO se encoge: mantiene su tamaño completo. */
html.in-app body.m3-app-fs #game.m3-stage-solo #m3MobTop,
html.in-app body.m3-app-fs #game.m3-stage-solo #m3MobObj,
html.in-app body.m3-app-fs #game.m3-stage-solo #m3MobBoost { margin-top: 0; margin-bottom: 0; flex-shrink: 0; }
/* El tablero ocupa el ALTO sobrante real y se centra. */
html.in-app body.m3-app-fs #game.m3-stage-solo .boards {
  margin: 0; flex: 1 1 0; min-height: 0; width: 100%;
  display: flex; align-items: stretch; justify-content: center; }
html.in-app body.m3-app-fs #game.m3-stage-solo .board-col {
  min-height: 0; display: flex; align-items: center; justify-content: center; }
/* El canvas se AJUSTA al hueco real (cuadrado), ignorando el tamaño que fijó el
   JS: así nunca se desborda tapando la barra OBJETIVO (pasaba en el Fold abierto,
   donde el safe-area de la barra de estado roba alto que el estimado no contaba). */
html.in-app body.m3-app-fs #game.m3-stage-solo #selfCanvas {
  width: auto !important; height: 100% !important;
  /* TOPE 560px: sin él, en el Fold abierto / tablets el canvas llenaba todo el
     alto disponible (enorme) y se salía por abajo. Ahora queda centrado, cuadrado
     y de tamaño normal en pantallas grandes; en móviles sigue mandando el ancho. */
  max-width: min(100%, 560px) !important; max-height: 560px !important;
  aspect-ratio: 1 / 1; }

/* ===== LAYOUT ANCHO de la app (Fold abierto / tablet) ========================
   En pantallas anchas la pila vertical desperdiciaba los laterales y se desbordaba
   (tablero cortado, boosters solapados). Aquí se reparte en GRID: arriba el HUD,
   a la IZQUIERDA objetivo + boosters, en el CENTRO el tablero, a la DERECHA el
   evento. Vale en modo normal y en pantalla completa. Gateado también por alto
   para que un móvil en horizontal (ancho pero bajo) NO lo coja. */
@media (min-width: 720px) and (min-height: 600px) {
  html.in-app #game.m3-stage-solo,
  html.in-app body.m3-app-fs #game.m3-stage-solo {
    display: grid !important;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    /* 4ª fila (1fr) vacía a la izquierda: absorbe el alto del tablero para que
       OBJETIVO y BOOSTERS queden PEGADOS arriba a la izquierda, no repartidos. */
    grid-template-rows: auto auto auto 1fr;
    /* OBJETIVO y BOOSTERS apilados a la IZQUIERDA; el tablero ocupa el resto a la
       derecha (centrado). Nada a la derecha del tablero (antes los boosters caían
       ahí y se salían/cortaban). */
    grid-template-areas:
      "top    top"
      "obj    board"
      "boost  board"
      ".      board";
    /* align-content:start empaqueta las filas ARRIBA; si no, en pantalla completa
       (contenedor 100dvh) las filas se estiran y el panel de boosters cae al fondo. */
    align-items: start; align-content: start; justify-items: center; column-gap: 16px; row-gap: 10px;
  }
  html.in-app #game.m3-stage-solo #m3MobTop   { grid-area: top;   width: min(100%, 620px); max-width: 620px; margin: 0 auto; }
  html.in-app #game.m3-stage-solo #m3MobObj   { grid-area: obj;   width: 100%; max-width: 100%; margin: 0; grid-template-columns: 1fr; }
  html.in-app #game.m3-stage-solo #m3MobBoost { grid-area: boost; width: 100%; max-width: 100%; margin: 0; grid-template-columns: 1fr; align-self: start; }
  html.in-app #game.m3-stage-solo #m3MobBoost .mb-row { flex-wrap: wrap; }
  html.in-app #game.m3-stage-solo .boards     { grid-area: board; width: auto; margin: 0; align-self: start; }
  /* tablero GRANDE: aprovecha el espacio del Fold/tablet. Cuadrado, limitado por
     el ancho real disponible (descontando la columna de paneles ~290px) y por el
     alto (descontando el HUD ~140px). Tope alto para no pasarse en monitores. */
  html.in-app #game.m3-stage-solo #selfCanvas,
  html.in-app body.m3-app-fs #game.m3-stage-solo #selfCanvas {
    width: min(calc(100vw - 290px), calc(100dvh - 140px), 820px) !important; height: auto !important;
    max-width: 820px !important; max-height: none !important; aspect-ratio: 1 / 1; }
}