@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&family=Titan+One&display=swap');

  :root{
    --bg: #0B0A14;
    --bg-panel: #15121F;
    --bg-panel-2: #1C1729;
    --pink: #FF2E93;
    --cyan: #00E5C7;
    --gold: #FFB800;
    --purple: #8C6BFF;
    --text: #F5F0FA;
    --muted: #9C8FB0;
    --line: #2C2438;
    --radius: 14px;
    --game-bg-photo: url('../images/hero-bg.webp');
    
  }

  *{ box-sizing: border-box; }
  html{ margin:0; padding:0; }
  body{
    margin:0; padding:0; color: var(--text); font-family:'Space Grotesk', sans-serif;
    background-image:
      radial-gradient(ellipse at 50% 30%, rgba(11,10,20,0.35) 0%, rgba(11,10,20,0.8) 70%, rgba(11,10,20,0.94) 100%),
      linear-gradient(180deg, rgba(8,6,14,0.85) 0%, rgba(8,6,14,0.55) 35%, rgba(8,6,14,0.75) 100%),
      var(--game-bg-photo);
    background-size: cover, cover, cover;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
    background-color: var(--bg);
  }
  button{ font-family: inherit; }

  .wrap{ max-width: 1080px; margin: 0 auto; padding: 28px 16px 80px; }

  .screen{ display:none; position:relative; }
  .screen.active{ display:block; }

  /* ---------- LANDING / HERO ---------- */
  #screen-landing.active{ display:block; }
  .hero{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-image: var(--game-bg-photo);
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
  }

  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(20,10,5,0.15) 0%, rgba(11,10,20,0.55) 60%, rgba(11,10,20,0.92) 100%),
      linear-gradient(180deg, rgba(11,8,6,0.75) 0%, rgba(11,8,6,0.15) 30%, rgba(11,8,6,0.25) 60%, rgba(8,6,10,0.95) 100%);
  }

  .hero-content{
    position: relative;
    z-index: 5;
    text-align:center;
    padding: 0 20px;
    max-width: 640px;
    margin: auto 0; /* absorbe el espacio libre: centra el bloque y empuja el aviso al borde inferior */
  }
  .hero-content-wide{ max-width: 920px; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    font-size: 12px;
    color: var(--cyan);
    text-transform: uppercase;
    margin: 0 0 20px;
  }

  h1.title{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size: clamp(40px, 8vw, 76px);
    line-height: 0.95;
    margin: 0 0 40px;
    background: linear-gradient(100deg, var(--text) 35%, var(--pink) 75%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: titleGlow 3.4s ease-in-out infinite;
  }
  @keyframes titleGlow{
    0%, 100%{
      text-shadow: 0 0 50px rgba(255,46,147,0.3), 0 4px 24px rgba(0,0,0,0.55);
      transform: scale(1);
    }
    50%{
      text-shadow: 0 0 85px rgba(255,46,147,0.55), 0 0 44px rgba(255,184,0,0.3), 0 4px 24px rgba(0,0,0,0.55);
      transform: scale(1.015);
    }
  }

  .hero-sub{ color: var(--text); opacity: 0.85; font-size: 16px; line-height: 1.6; margin: 0 0 30px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }

  .hero-collage{ display:flex; flex-wrap:wrap; justify-content:center; row-gap:16px; margin: 72px 0 64px; }
  .hero-collage-photo{
    width:213px; height:213px; border-radius:50%; overflow:hidden; flex-shrink:0;
    border:3px solid var(--pink); margin-left:-45px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    background-size:cover; background-position:center 20%;
  }
  .hero-collage-photo:first-child{ margin-left:0; }
  .hero-collage-photo:nth-child(4n+2){ border-color: var(--cyan); }
  .hero-collage-photo:nth-child(4n+3){ border-color: var(--gold); }
  .hero-collage-photo:nth-child(4n){ border-color: var(--purple); }
  .hero-collage-photo:nth-child(odd){ transform: translateY(-16px); }
  .hero-collage-photo:nth-child(even){ transform: translateY(16px); }
  .hero-collage-more{
    width:213px; height:213px; border-radius:50%; margin-left:-45px; flex-shrink:0;
    background: var(--bg-panel); border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-size:22px; font-weight:700; color:var(--gold);
  }
  .hero-collage-caption{ color: var(--muted); font-size:14px; margin: 0 0 64px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }

  .hero-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin: 0 0 64px; text-align:left; }
  @media (max-width: 720px){ .hero-steps{ grid-template-columns: 1fr; } }
  .hero-step{
    display:flex; align-items:center; gap:12px;
    background: rgba(21,18,31,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
    padding: 16px;
  }
  .hero-step-icon{ font-size:24px; line-height:1; flex-shrink:0; }
  .hero-step-text{ flex:1; min-width:0; }
  .hero-step-title{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14px; margin-bottom:4px; }
  .hero-step-body{ font-size:12.5px; color:var(--muted); line-height:1.5; }

  .hero-disclaimer{
    position: relative; z-index: 5; text-align:center;
    font-size:11px; line-height:1.5; color: var(--muted); opacity:0.75;
    max-width:560px; margin: 24px auto 0; padding: 0 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }
  .hero-privacy-link{
    position: relative; z-index: 5; display:block; text-align:center;
    font-size:10.5px; color: var(--muted); opacity:0.75;
    margin: 8px auto 22px; text-decoration:underline;
  }
  .hero-privacy-link:hover{ opacity:1; color: var(--cyan); }

  @media (max-height: 820px){
    /* Con poca altura de ventana el titulo quedaba pegado al borde
       superior (el bloque centrado no dejaba aire arriba). */
    .hero-content{ padding-top: 22px; }
    .hero-collage{ margin: 34px 0 32px; }
    .hero-collage-photo, .hero-collage-more{ width:125px; height:125px; }
    .hero-collage-caption{ margin-bottom:32px; }
    .hero-steps{ gap:12px; margin-bottom:36px; }
    .hero-step{ padding:12px; }
    .hero-step-body{ font-size:11.5px; line-height:1.35; }
    .hero-disclaimer{ margin-top:16px; font-size:10.5px; }
    .hero-privacy-link{ margin-bottom:16px; }
  }

  .btn{
    border:none; border-radius:10px; padding:14px 22px; font-weight:600; font-size:15px;
    cursor:pointer; transition: transform .12s ease, filter .12s ease;
  }
  .btn:hover{ filter: brightness(1.08); }
  .btn:active{ transform: scale(0.98); }
  .btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
  .btn-primary{ background: var(--pink); color:#0B0A14; }
  .btn-secondary{ background:transparent; color: var(--cyan); border:1px solid var(--cyan); }
  .btn-gold{ background: var(--gold); color:#0B0A14; }
  .btn-hero{ font-size:17px; padding:17px 30px; box-shadow: 0 0 40px rgba(255,46,147,0.35); }
  .btn-hero-pill{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:16px;
    padding:14px 34px; border-radius:999px; border:none; cursor:pointer;
    color:#0B0A14; background: linear-gradient(100deg, var(--pink) 0%, var(--gold) 100%);
    box-shadow: 0 6px 24px rgba(255,46,147,0.28);
    transition: transform .12s ease, box-shadow .15s ease;
  }
  .btn-hero-pill:hover{ transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,46,147,0.4); }
  .btn-hero-pill:active{ transform: translateY(0) scale(0.98); }

  /* Columna de ancho fijo: garantiza que "Empezar a jugar" y "Ver
     clasificacion" midan exactamente lo mismo pese a tener textos
     distintos, en vez de que cada boton se ajuste a su propio contenido. */
  .hero-cta-group{ max-width:300px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
  .hero-cta-group .btn-hero-pill{ width:100%; text-align:center; }

  /* ---------- LANGUAGE TOGGLE ---------- */
  .lang-toggle{
    font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; letter-spacing:0.06em;
    color: var(--text); background: var(--bg-panel); border:1px solid var(--line);
    padding:6px 12px; border-radius:999px; white-space:nowrap; cursor:pointer;
    transition: color .2s ease, border-color .2s ease;
  }
  .lang-toggle:hover{ color: var(--pink); border-color: var(--pink); }
  /* No es position:fixed a proposito (cambio explicito de Diego): en las
     pantallas sin topbar (inicio, resultado, clasificacion) se posiciona
     dentro de esa .screen (que ahora es el contexto de posicionamiento,
     ver ".screen" mas arriba), asi que se desplaza con el contenido en vez
     de quedar pegado al viewport. En juego y simulacion el boton ya no usa
     esta clase: vive dentro de .topbar-right, como un pill mas. */
  .lang-toggle-floating{
    position: absolute; top:16px; right:16px; z-index:100;
    background: rgba(21,18,31,0.85); backdrop-filter: blur(6px);
  }
  .btn-hero-pill .btn-arrow{ display:inline-block; margin-left:6px; transition: transform .15s ease; }
  .btn-hero-pill:hover .btn-arrow{ transform: translateX(4px); }

  /* ---------- GAME SCREEN ---------- */
  .game-topbar{
    position: sticky; top:0; z-index: 20; flex-shrink: 0;
    background: rgba(11,10,20,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-inner{
    max-width: 1200px; margin:0 auto; padding: 14px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .topbar-brand{ font-family:'Anton', sans-serif; font-size:16px; letter-spacing:0.02em; }
  .topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .topbar-round{
    font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.08em;
    color: var(--gold); background: var(--bg-panel); border:1px solid var(--line);
    padding:6px 12px; border-radius:999px; white-space:nowrap;
  }
  .topbar-budget{
    font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.04em;
    color: var(--cyan); background: var(--bg-panel); border:1px solid var(--line);
    padding:6px 12px; border-radius:999px; white-space:nowrap;
    transition: color .2s ease, border-color .2s ease;
  }
  .topbar-budget.over{ color:#FF5C5C; border-color:#FF5C5C; }
  .topbar-progress{ height:3px; background: var(--line); }
  .topbar-progress-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--pink), var(--gold)); transition: width .3s ease; }

  #screen-game.active{ display:flex; flex-direction:column; min-height:100vh; }
  #screen-simulation.active{ display:flex; flex-direction:column; min-height:100vh; }

  .game-body{
    flex:1; width:100%;
    max-width: 1560px; margin: 0 auto; padding: 26px 20px;
    padding-left: 360px; padding-right: 360px;
    display:flex; align-items:center; justify-content:center;
  }
  @media (max-width: 1100px){ .game-body{ padding-left:20px; padding-right:20px; } }

  .game-main{ width:100%; max-width: 800px; }

  .section-title{
    font-family:'Anton', sans-serif; font-weight:400; font-size:44px;
    letter-spacing:0.01em; margin: 0 0 22px; text-align:center;
  }

  .choice-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
  }
  /* La tablet mantiene las 3 columnas (como escritorio); solo el movil apila. */
  @media (max-width: 767px){ .choice-grid{ grid-template-columns: 1fr; max-width: 420px; margin:0 auto; } }

  .choice-card{
    --choice-photo-h: clamp(140px, 30vh, 260px);
    position: relative;
    background: rgba(21,18,31,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
    cursor:pointer; overflow:hidden;
    display:flex; flex-direction:column;
    transition: border-color .15s ease, transform .12s ease, background .15s ease;
    padding:0; text-align:left; color: var(--text);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  }
  .choice-card:hover{ border-color: var(--cyan); transform: translateY(-4px); background: rgba(28,23,41,0.8); }
  .choice-card:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

  .choice-photo{
    position:relative; width:100%; height: var(--choice-photo-h); overflow:hidden;
    background-size: cover; background-position: center 18%;
  }
  .choice-icon-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .choice-photo .avatar-icon-lg{ width:56%; height:56%; }
  .choice-photo .avatar-icon-lg *{ fill:#0B0A14; }

  /* ---------- SYNC FLICKER (round transition) ---------- */
  .choice-card:disabled{ cursor:default; }
  .choice-card:disabled:hover{ transform:none; border-color: rgba(255,255,255,0.08); background: rgba(21,18,31,0.72); }
  /* Cubre exactamente la caja de la foto (que empieza en el borde superior de la tarjeta). */
  .choice-name-overlay{
    position:absolute; left:0; right:0; top:0; height: var(--choice-photo-h);
    display:flex; align-items:flex-end;
    padding: 46px 16px 12px;
    background: linear-gradient(180deg, transparent, rgba(11,10,20,0.95) 85%);
  }
  .choice-name{ font-family:'Anton', sans-serif; font-size:22px; line-height:1.05; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5); }

  .choice-tags{ display:flex; gap:8px; padding: 12px 16px 0; flex-wrap:wrap; }
  .tag-pill{
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.04em;
    padding: 4px 10px; border-radius:999px; border:1px solid var(--line);
    background: rgba(255,255,255,0.04);
  }
  .tag-genre{ color: var(--cyan); border-color: rgba(0,229,199,0.35); }
  .tag-country{ color: var(--text); display:inline-flex; align-items:center; gap:5px; }
  .flag-icon{ width:16px; height:11px; border-radius:2px; overflow:hidden; display:inline-block; flex-shrink:0; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
  .flag-icon svg{ width:100%; height:100%; display:block; }

  .choice-stats{ padding: 12px 16px 18px; }

  .game-sidebar{
    width: 300px;
    background: rgba(21,18,31,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
    padding: 16px; position: fixed; top: 90px; right: 24px; z-index: 15;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  }
  @media (max-width: 1100px){
    .game-sidebar{ width: calc(100% - 40px); position: static; top:auto; right:auto; margin: 20px auto 0; max-width: 500px; }
  }

  /* ---------- SOCIAL NOTIFICATIONS (left column) ---------- */
  .notif-panel{
    width: 300px;
    position: fixed; top: 90px; left: 24px; z-index: 15;
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none;
  }
  @media (max-width: 1100px){ .notif-panel{ display:none; } }

  /* Escritorio pequeño (1101-1400px): con las dos columnas fijas a 300px el
     hueco central para las tarjetas se quedaba muy estrecho y las tarjetas
     se encogian mucho mientras el lineup y las notificaciones seguian a
     tamaño completo. Se encogen ambas columnas (y el hueco que les reserva
     .game-body) para que la proporcion no se rompa. */
  @media (min-width: 1101px) and (max-width: 1400px){
    .game-sidebar{ width:230px; right:16px; }
    .notif-panel{ width:230px; left:16px; }
    .game-body{ padding-left:270px; padding-right:270px; }
  }

  .notif-card{
    background: rgba(21,18,31,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    animation: notifIn .35s ease;
    opacity:1; transition: opacity .4s ease, transform .4s ease;
  }
  .notif-card.positive{ border-color: rgba(0,229,199,0.4); }
  .notif-card.negative{ border-color: rgba(255,46,147,0.4); }
  @keyframes notifIn{ from{ opacity:0; transform: translateY(-10px); } to{ opacity:1; transform: translateY(0); } }

  .notif-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .notif-avatar{
    width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-size:9px; font-weight:700; flex-shrink:0;
  }
  .notif-avatar.positive{ background: rgba(0,229,199,0.15); color: var(--cyan); }
  .notif-avatar.negative{ background: rgba(255,46,147,0.15); color: var(--pink); }
  .notif-handle{ font-family:'JetBrains Mono', monospace; font-size:10px; color: var(--muted); }
  .notif-text{ font-size:12px; line-height:1.4; color: var(--text); margin:0; }

  .sidebar-head{ font-family:'Anton', sans-serif; font-size:15px; margin-bottom:14px; }
  .sidebar-list{ display:flex; flex-direction:column; gap:8px; }
  .sidebar-empty{ color: var(--muted); font-size:12px; font-family:'JetBrains Mono', monospace; }
  .sidebar-item{
    display:flex; align-items:center; gap:10px;
    background: rgba(28,23,41,0.75); border:1px solid rgba(255,255,255,0.06); border-radius:10px;
    padding: 8px 10px;
  }
  .sidebar-name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:13px; }
  .sidebar-meta{ font-family:'JetBrains Mono', monospace; font-size:10px; color: var(--muted); }
  .sidebar-check{ margin-left:auto; color: var(--cyan); font-size:14px; }

  .stat-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .stat-label{ font-family:'JetBrains Mono', monospace; font-size:9px; color:var(--muted); width:46px; text-align:left; letter-spacing:0.05em; }
  .stat-bar-bg{ flex:1; height:6px; border-radius:4px; background:#100D19; border:1px solid var(--line); overflow:hidden; display:inline-block; }
  .stat-bar-fill{ height:100%; display:block; }
  .stat-hype{ background: var(--gold); }
  .stat-perreo{ background: var(--pink); }
  .stat-flow{ background: var(--cyan); }
  .stat-viral{ background: var(--purple); }
  .stat-live{ background: var(--cyan); }
  .stat-val{ font-family:'JetBrains Mono', monospace; font-size:10px; color: var(--muted); width:20px; text-align:right; }

  .stat-row-plain{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .stat-row-plain .stat-label{ width:auto; }
  .stat-row-plain .stat-plain-val{ font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600; }
  .stat-plain-val.money{ color: var(--gold); }
  .stat-plain-val.attendance{ color: var(--text); }
  .stat-plain-val.over-budget{ color: #FF5C5C; }

  .lineup-grid{
    display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;
  }
  @media (max-width: 640px){ .lineup-grid{ grid-template-columns: repeat(3, 1fr); } }

  .lineup-slot{
    border:1px dashed var(--line); border-radius:10px; padding:10px 6px; text-align:center;
    min-height: 92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .lineup-slot.filled{ border-style:solid; border-color: var(--line); background: var(--bg-panel); }
  .lineup-slot .slot-num{ font-family:'JetBrains Mono', monospace; font-size:10px; color: var(--line); }
  .lineup-slot.filled .slot-name{ font-family:'Anton', sans-serif; font-size:12px; margin-top:4px; line-height:1.1; }

  /* ---------- SHARED AVATAR (sidebar + result screen) ---------- */
  .avatar{
    width:64px; height:64px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    overflow: hidden; flex-shrink:0;
  }
  .avatar-sm{ width:40px; height:40px; border-radius:11px; }
  .avatar-icon{ width:78%; height:78%; }
  .avatar-icon *{ fill:#0B0A14; }
  .avatar-photo{ width:100%; height:100%; object-fit:cover; object-position: center 22%; display:block; }

  /* ---------- LOADING OVERLAY ---------- */
  .overlay{
    display:none; position:fixed; inset:0; z-index:50;
    background: rgba(11,10,20,0.88);
    align-items:center; justify-content:center;
  }
  .overlay.active{ display:flex; }
  .loading-box{ text-align:center; }
  .spinner{
    width:54px; height:54px; border-radius:50%;
    border: 4px solid var(--line); border-top-color: var(--pink);
    margin: 0 auto 18px;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  .loading-text{ font-family:'JetBrains Mono', monospace; font-size:13px; color: var(--muted); letter-spacing:0.08em; text-transform:uppercase; }

  /* ---------- RESULT SCREEN ---------- */
  .score-ring-wrap{ position:relative; width:220px; height:220px; margin: 14px auto 0; }
  .score-ring{ width:100%; height:100%; transform: rotate(-90deg); }
  .score-ring-track{ fill:none; stroke:#100D19; stroke-width:16; }
  .score-ring-fill{ fill:none; stroke-width:16; stroke-linecap:round; stroke: var(--gold); transition: stroke-dashoffset 1.1s cubic-bezier(.16,.84,.44,1), stroke .4s ease; }
  .score-ring-fill.is-record{ filter: drop-shadow(0 0 10px rgba(255,184,0,0.85)); }
  .score-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .score-ring-value{ font-family:'Anton', sans-serif; font-size:52px; line-height:1; }
  .score-ring-of100{ font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--muted); margin-top:2px; }
  .result-label{ text-align:center; font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color: var(--muted); margin: 14px 0 10px; }
  .record-line{ text-align:center; font-family:'JetBrains Mono', monospace; font-size:13px; color: var(--muted); margin: 0 0 24px; min-height:1px; }
  .record-line.is-new{ color:#FFD666; font-weight:700; text-shadow: 0 0 12px rgba(255,184,0,0.85); }
  .record-line .record-delta{ display:block; font-size:11px; font-weight:400; color: var(--muted); text-shadow:none; margin-top:5px; letter-spacing:0.04em; }

  .attr-panel{
    background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius);
    padding:20px; margin-bottom:22px;
  }

  /* Standalone, fuera de poster-preview-actions a proposito: asi su posicion
     (justo debajo de las stats) es identica en movil y escritorio, sin que
     el reordenado movil del bloque de publicar la mueva. */
  .lb-entry-btn{ width:100%; margin-bottom:16px; }
  .lb-entry-btn[hidden]{ display:none; }
  .attr-panel .stat-row{ margin-bottom:12px; }
  .attr-panel .stat-label{ width:70px; font-size:11px; }
  .attr-panel .stat-bar-bg{ height:9px; }
  .attr-panel .stat-row-plain{ margin-bottom:12px; }
  .attr-panel .stat-row-plain .stat-label{ width:auto; font-size:11px; }
  .attr-panel .stat-plain-val{ font-size:14px; }

  .lineup-list-title{ font-family:'Anton', sans-serif; font-size:18px; margin: 0 0 12px; }

  .share-box{
    background:#0B0A14; border:1px solid var(--line); border-radius:10px; padding:14px;
    font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--muted);
    white-space:pre-wrap; line-height:1.6; margin: 20px 0 14px;
  }

  .result-actions{ display:flex; gap:10px; }
  @media (max-width:500px){ .result-actions{ flex-direction:column; } }

  .poster-preview{ display:none; margin-top:18px; }


  .poster-preview.show{ display:block; }
  .poster-preview img{
    width:100%; border-radius: var(--radius); border:1px solid var(--line);
    margin-bottom:22px; display:block;
  }
  .poster-preview-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
  @media (max-width:500px){ .poster-preview-actions{ flex-direction:column; } }
  .poster-preview-actions .btn{ text-align:center; text-decoration:none; }

  /* ---------- PUBLISH BOX (result screen) ---------- */
  .publish-box{
    background: linear-gradient(160deg, rgba(0,229,199,0.10), rgba(21,18,31,0.9));
    border:1px solid rgba(0,229,199,0.4); border-radius: var(--radius);
    padding:14px; margin-bottom:16px; text-align:left;
  }
  .publish-box[hidden]{ display:none; }
  .publish-head{ display:flex; align-items:center; gap:8px; margin-bottom:11px; }
  .publish-icon{ font-size:17px; }
  .publish-title{ font-size:14px; font-weight:700; }
  .publish-row{ display:flex; gap:8px; margin-bottom:10px; }
  .publish-input, .publish-select{
    background: var(--bg-panel); border:1px solid var(--line); border-radius:10px;
    padding:11px 12px; color: var(--text);
    font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:600;
  }
  .publish-input{ flex:1; min-width:0; }
  /* El <select> nativo en Windows no pinta banderas emoji dentro de las
     <option>: se ven como recuadros con las letras del pais. Por eso la
     bandera vive fuera, superpuesta en texto normal (que si renderiza en
     cualquier SO), y el <option> solo lleva el nombre del pais. */
  /* Imagen real en vez de emoji de bandera: Windows no trae banderas en su
     fuente de emoji en ningun contexto del DOM (no es solo cosa del
     <select>), asi que el codigo de pais se veia como texto plano. */
  .flag-img{ width:20px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,0.15); vertical-align:middle; }
  .flag-blank{ display:inline-block; width:20px; height:15px; border-radius:3px; background:var(--line); vertical-align:middle; }

  .publish-select-wrap{ position:relative; width:150px; flex-shrink:0; }
  .publish-select-flag{
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    line-height:1; pointer-events:none;
  }
  .publish-select{ width:100%; padding-left:32px; cursor:pointer; }
  .publish-input:focus, .publish-select:focus{
    outline:none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,199,0.14);
  }
  .publish-input::placeholder{ color: var(--muted); font-weight:400; }
  .publish-msg{
    font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--muted);
    margin:9px 0 0; min-height:1px;
  }
  .publish-msg.is-error{ color:#FF7A7A; }
  .publish-privacy-link{
    display:block; text-align:center; margin-top:10px;
    font-size:10px; color: var(--muted); opacity:0.75; text-decoration:underline;
  }
  .publish-privacy-link:hover{ opacity:1; color: var(--cyan); }
  .publish-done{
    font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--cyan);
    text-align:center; margin:0 0 16px;
  }
  .publish-done[hidden]{ display:none; }
  .hero-lb-link{
    display:block; width:100%;
    background: rgba(21,18,31,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255,184,0,0.35); border-radius:999px;
    color: var(--gold); font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14px;
    padding:12px 0; cursor:pointer; transition: border-color .15s ease, background .15s ease;
  }
  .hero-lb-link:hover{ border-color: var(--gold); background: rgba(28,23,41,0.85); }
  .hero-lb-link[hidden]{ display:none; }

  /* ---------- LEADERBOARD SCREEN ---------- */
  .lb-wrap{ max-width: 720px; margin:0 auto; padding: 30px 20px 40px; }
  .lb-title{
    font-family:'Anton', sans-serif; font-weight:400; font-size: clamp(32px, 6vw, 46px);
    text-align:center; margin:0 0 4px;
  }
  .lb-subtitle{
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.16em;
    color: var(--muted); text-align:center; margin:0 0 20px;
  }
  .lb-tabs{
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    background: var(--bg-panel); border:1px solid var(--line);
    border-radius:999px; padding:4px; margin-bottom:14px;
  }
  .lb-tab{
    font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.06em;
    padding:10px 0; border:none; border-radius:999px; cursor:pointer;
    background:none; color: var(--muted); transition: color .15s ease;
  }
  .lb-tab:hover{ color: var(--text); }
  .lb-tab.is-on{ background: linear-gradient(100deg, var(--pink), var(--gold)); color:#0B0A14; }
  .lb-meta{
    font-family:'JetBrains Mono', monospace; font-size:10px; text-align:center;
    border-radius:999px; padding:6px 13px; margin:0 auto 14px; width:fit-content;
  }
  .lb-meta.is-week{ color: var(--gold); background: rgba(255,184,0,0.09); border:1px solid rgba(255,184,0,0.28); }
  .lb-meta.is-global{ color: var(--cyan); background: rgba(0,229,199,0.08); border:1px solid rgba(0,229,199,0.28); }
  .lb-meta:empty{ display:none; }

  .lb-rows{ display:flex; flex-direction:column; gap:7px; }
  .lb-row{
    display:flex; align-items:center; gap:12px;
    background: rgba(21,18,31,0.8); border:1px solid rgba(255,255,255,0.07);
    border-radius:11px; padding:11px 13px;
  }
  .lb-row.is-me{ border-color: var(--cyan); background: rgba(0,229,199,0.07); }
  .lb-rank{
    font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700;
    color: var(--muted); width:32px; flex-shrink:0; text-align:center;
  }
  .lb-medal-1 .lb-rank{ color: var(--gold); font-size:16px; }
  .lb-medal-2 .lb-rank{ color:#D8D3E0; font-size:15px; }
  .lb-medal-3 .lb-rank{ color:#C08552; font-size:15px; }
  .lb-flag{ width:23px; text-align:center; flex-shrink:0; }
  .lb-flag .flag-img, .lb-flag .flag-blank{ width:22px; height:16px; }
  .lb-who{ flex:1; min-width:0; }
  .lb-nick{
    display:block; font-size:15px; font-weight:700; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .lb-you{
    font-family:'JetBrains Mono', monospace; font-size:8px; background: var(--cyan);
    color:#08060E; padding:2px 5px; border-radius:4px; margin-left:7px; vertical-align:middle;
  }
  .lb-rowmeta{
    display:block; font-family:'JetBrains Mono', monospace; font-size:9px;
    color: var(--muted); margin-top:3px; text-transform:uppercase;
  }
  .lb-pts{
    font-family:'JetBrains Mono', monospace; font-size:19px; font-weight:700;
    color: var(--gold); flex-shrink:0; text-align:right;
  }
  .lb-pts small{ display:block; font-size:9px; color: var(--muted); font-weight:400; margin-top:-2px; }
  .lb-gap{
    text-align:center; font-family:'JetBrains Mono', monospace;
    color: var(--line); font-size:16px; letter-spacing:4px; padding:2px 0;
  }
  .lb-empty{
    font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--muted);
    text-align:center; padding:28px 10px; margin:0;
  }
  .lb-percentile{
    font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--muted);
    text-align:center; margin:14px 0 0;
  }
  .lb-percentile b{ color: var(--cyan); }
  .lb-percentile:empty{ display:none; }
  .lb-actions{ display:flex; gap:10px; margin-top:22px; }
  .lb-actions .btn{ flex:1; }

  .copied-msg{ font-size:12px; color: var(--cyan); text-align:center; margin-top:8px; font-family:'JetBrains Mono', monospace; display:none; }
  .copied-msg.show{ display:block; }

  /* ---------- FESTIVAL SIMULATION ---------- */
  .sim-body{
    flex:1; width:100%; max-width:560px; margin:0 auto; padding:26px 20px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:relative;
  }

  .sim-live-badge{
    display:inline-flex; align-items:center; gap:7px;
    background: rgba(255,46,147,0.12); border:1px solid var(--pink); color: var(--pink);
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
    padding:7px 16px; border-radius:999px; margin-bottom:18px;
  }
  .sim-live-badge-dot{
    width:7px; height:7px; border-radius:50%; background: var(--pink);
    animation: simLiveDotPulse 1.4s ease-in-out infinite;
  }
  @keyframes simLiveDotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }

  .sim-timeline{ display:flex; justify-content:center; gap:6px; margin-bottom:22px; flex-wrap:wrap; }
  .sim-dot{
    width:16px; height:16px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-size:9px; color: var(--bg);
  }
  .sim-dot.done{ background: var(--cyan); border-color: var(--cyan); }
  .sim-dot.current{
    width:18px; height:18px; background: var(--gold); border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255,184,0,0.25);
  }

  .sim-card{
    width:100%; max-width:340px; margin:0 auto 16px;
    background: rgba(21,18,31,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
    overflow:hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  }
  .sim-card-photo{
    position:relative; width:100%; height: clamp(150px, 34vh, 330px); overflow:hidden;
    background-size:cover; background-position:center 18%;
  }
  .sim-card-photo .avatar-icon-lg{ width:44%; height:44%; }
  .sim-card-photo .avatar-icon-lg *{ fill:#0B0A14; }
  .sim-card-name-overlay{
    position:absolute; left:0; right:0; bottom:0; padding:40px 16px 12px;
    background: linear-gradient(180deg, transparent, rgba(11,10,20,0.95) 85%);
  }
  .sim-card-name{ font-family:'Anton', sans-serif; font-size:24px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
  .sim-card-tags{ display:flex; gap:8px; padding:10px 16px 14px; flex-wrap:wrap; }

  .sim-hype-panel{
    width:100%; background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius);
    padding:14px 16px; margin-bottom:14px;
  }
  .sim-hype-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .sim-hype-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; color: var(--muted); }
  .sim-hype-delta{ font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; }
  .sim-hype-delta.positive{ color: var(--cyan); }
  .sim-hype-delta.negative{ color: var(--pink); }
  .sim-hype-row{ display:flex; align-items:center; gap:10px; }
  .sim-hype-bar-bg{ flex:1; height:14px; border-radius:7px; background:#100D19; border:1px solid var(--line); overflow:hidden; display:inline-block; }
  .sim-hype-bar-fill{ height:100%; display:block; background: var(--gold); transition: width .6s ease; }
  .sim-hype-value{ font-family:'JetBrains Mono', monospace; font-size:16px; font-weight:700; min-width:30px; text-align:right; }

  .sim-event-card{
    width:100%; min-height:64px; background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius);
    padding:12px 14px; margin-bottom:16px;
  }
  .sim-event-card.positive{ border-color: rgba(0,229,199,0.4); }
  .sim-event-card.negative{ border-color: rgba(255,46,147,0.4); }
  .sim-event-card.decision{
    border-color: rgba(255,184,0,0.6);
    animation: simDecisionPulse 1.1s ease-out 2;
  }
  @keyframes simDecisionPulse{
    0%{ box-shadow: 0 0 0 0 rgba(255,184,0,0.45); }
    70%{ box-shadow: 0 0 0 10px rgba(255,184,0,0); }
    100%{ box-shadow: 0 0 0 0 rgba(255,184,0,0); }
  }
  .sim-event-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .sim-event-icon{ font-size:14px; }
  .sim-event-label{ font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--muted); }
  .sim-event-label.decision{ color: var(--gold); }
  .sim-event-delta{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; }
  .sim-event-delta.positive{ color: var(--cyan); }
  .sim-event-delta.negative{ color: var(--pink); }
  .sim-event-text{ font-size:13px; color: var(--text); margin:0; line-height:1.5; }
  .sim-event-hint{
    font-family:'JetBrains Mono', monospace; font-size:10px; color: var(--gold);
    text-align:center; margin:10px 0 0; letter-spacing:0.03em;
  }
  .sim-event-actions{ display:flex; gap:8px; margin-top:12px; }
  .sim-event-actions .btn{ flex:1; padding:9px; font-size:12px; }
  .sim-event-actions .btn:disabled{ opacity:0.5; cursor:default; }

  .sim-skip{ align-self:flex-end; padding:8px 16px; font-size:12px; }

  /* ---------- SIMULATION FX ---------- */
  @keyframes simShake{
    0%{ transform:translateX(0); }
    20%{ transform:translateX(-6px); }
    40%{ transform:translateX(5px); }
    60%{ transform:translateX(-4px); }
    80%{ transform:translateX(3px); }
    100%{ transform:translateX(0); }
  }
  .sim-shake{ animation: simShake .4s ease; }

  .sim-confetti-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; }
  .sim-confetti-piece{
    position:absolute; top:-16px; width:7px; height:12px; opacity:0.95;
    animation: simConfettiFall 1.2s ease-in forwards;
  }
  @keyframes simConfettiFall{ to{ transform: translateY(420px) rotate(480deg); opacity:0; } }

  .result-confetti-layer{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:80; }
  .result-confetti-piece{
    position:absolute; top:-24px; width:9px; height:15px; opacity:0.95;
    animation: resultConfettiFall 2.2s ease-in forwards;
  }
  @keyframes resultConfettiFall{ to{ transform: translateY(100vh) rotate(560deg); opacity:0; } }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

  /* ---------- SHORT-VIEWPORT ADJUSTMENTS (laptops, non-maximized windows) ---------- */
  @media (max-height: 820px){
    .game-body{ padding-top:16px; padding-bottom:16px; }
    .section-title{ font-size:32px; margin-bottom:14px; }
    .sim-body{ padding:14px 20px; }
    .sim-live-badge{ margin-bottom:10px; }
    .sim-timeline{ margin-bottom:12px; }
    .sim-card{ margin-bottom:10px; }
    .sim-hype-panel{ margin-bottom:10px; padding:10px 16px; }
    .choice-name-overlay{ padding: 30px 16px 10px; }
    .choice-stats{ padding: 8px 16px 14px; }
  }
  @media (max-height: 640px){
    .sim-event-hint{ display:none; }
    .sim-card-name-overlay{ padding: 24px 16px 10px; }
  }

  /* ================================================================
     TABLET (768–1100px)
     Igual que escritorio, pero sin columnas fijas laterales: no caben.
     Las notificaciones, ocultas hasta ahora en este rango, vuelven como
     tira horizontal bajo las tarjetas.
     ================================================================ */
  @media (min-width: 768px) and (max-width: 1100px){
    .notif-panel{
      display:flex; flex-direction:row; position:static;
      width:100%; max-width:840px; margin:18px auto 0; padding:0 20px;
      gap:10px; overflow-x:auto;
    }
    .notif-card{ flex:0 0 250px; }
  }

  /* ================================================================
     MÓVIL (≤767px)
     Rediseño completo: ver mockups aprobados. Sin notificaciones.
     ================================================================ */
  @media (max-width: 767px){

    /* ---- 1. INICIO ---- */
    h1.title{ font-size:40px; margin-bottom:18px; }
    .hero-collage{ margin: 6px 0 12px; }
    .hero-collage-photo, .hero-collage-more{
      width:64px; height:64px; margin-left:-16px; border-width:2.5px;
    }
    /* Solo 4 caras + el contador: 8 fotos ocupan 3 filas en movil */
    .hero-collage-photo:nth-child(n+5){ display:none; }
    .hero-collage-photo:nth-child(odd){ transform: translateY(-7px); }
    .hero-collage-photo:nth-child(even){ transform: translateY(7px); }
    .hero-collage-more{ font-size:13px; border-width:2px; }
    .hero-collage-caption{ font-size:11px; margin-bottom:22px; }
    .hero-steps{ gap:9px; margin-bottom:24px; }
    .hero-step{ padding:11px 13px; gap:11px; }
    .hero-step-icon{ font-size:19px; }
    .hero-step-title{ font-size:12.5px; }
    .hero-step-body{ font-size:10.5px; line-height:1.4; }
    /* El limite de 300px de .hero-cta-group es para pantallas grandes
       (evita que "Ver clasificacion" quede gigante junto a un CTA
       compacto). En movil el CTA siempre fue a ancho completo. */
    .hero-cta-group{ max-width:none; }
    .btn-hero-pill{ width:100%; padding:15px 0; }
    .hero-disclaimer{ font-size:9px; margin-top:14px; }
    .hero-privacy-link{ font-size:9px; margin-bottom:16px; }

    /* ---- 2. ELEGIR ARTISTA ---- */
    .topbar-inner{ padding:9px 14px; }

    .topbar-brand span{ display:none; }   /* deja solo el emoji */
    .topbar-brand{ font-size:17px; }
    .topbar-budget{ font-size:10.5px; padding:4px 8px; }
    .topbar-round{ font-size:10.5px; padding:4px 8px; }
    .topbar-right{ gap:8px; }
    /* El boton de idioma vive dentro de topbar-right, como un pill mas:
       mismo tratamiento que presupuesto y ronda en vez de flotar aparte. */
    .topbar-right .lang-toggle{ padding:4px 8px; font-size:10.5px; }
    /* "Concierto 10 / 10" no cabe junto al presupuesto y el boton de idioma:
       .topbar-inner haria wrap y la barra pasaria a dos filas. En movil se
       queda solo el contador; la palabra la da el contexto y la barra de
       progreso de debajo. */
    .topbar-round span[data-i18n]{ display:none; }

    .game-body{
      padding:14px 14px 104px;            /* hueco para la barra inferior */
      align-items:flex-start;
    }
    .section-title{ font-size:25px; margin-bottom:13px; }
    .choice-grid{ max-width:none; gap:10px; }

    /* Tarjeta en horizontal: foto a la izquierda, datos a la derecha.
       Las 3 caben a la vez, que es lo que permite compararlas. */
    .choice-card{
      --choice-photo-h: 112px;
      flex-direction:row; gap:11px; padding:9px;
      box-shadow:0 6px 18px rgba(0,0,0,0.3);
    }
    .choice-card:hover{ transform:none; }
    .choice-photo{ width:112px; flex-shrink:0; border-radius:10px; }
    .choice-body{
      flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px;
    }
    .choice-name-overlay{
      position:static; height:auto; display:block;
      padding:0; background:none;
    }
    .choice-name{ font-size:15px; text-shadow:none; }
    .choice-tags{ padding:4px 0 6px; gap:5px; }
    .tag-pill{ font-size:8.5px; padding:2.5px 7px; }
    .flag-icon{ width:13px; height:9px; }
    .choice-stats{ padding:0; }
    .choice-stats .stat-row-plain{ margin-bottom:3px; }
    .choice-stats .stat-row{ margin-bottom:0; }
    .choice-stats .stat-label{ font-size:8.5px; }
    .choice-stats .stat-plain-val{ font-size:11px; }

    /* Lineup: de columna lateral a barra inferior fija y plegable.
       Plegada muestra solo las caras fichadas; al tocarla se abre la lista. */
    .game-sidebar{
      position:fixed; left:0; right:0; bottom:0; top:auto;
      width:100%; max-width:none; margin:0; z-index:30;
      border-radius:16px 16px 0 0; border-left:none; border-right:none; border-bottom:none;
      background:rgba(15,12,25,0.97);
      padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .sidebar-head{
      margin-bottom:0; font-size:13px; cursor:pointer;
      display:flex; align-items:center; gap:8px;
    }
    .sidebar-head::after{
      content:'▲'; margin-left:auto; font-size:10px; color:var(--muted);
      transition: transform .25s ease;
    }
    .game-sidebar.open .sidebar-head::after{ transform: rotate(180deg); }

    .sidebar-list{ max-height:none; margin-top:8px; }
    /* Plegada: tira horizontal de caras */
    .game-sidebar:not(.open) .sidebar-list{
      flex-direction:row; gap:6px; overflow-x:auto; padding-bottom:2px;
    }
    .game-sidebar:not(.open) .sidebar-item{
      padding:0; background:none; border:none; flex-shrink:0;
    }
    .game-sidebar:not(.open) .sidebar-text,
    .game-sidebar:not(.open) .sidebar-check{ display:none; }
    .game-sidebar:not(.open) .avatar-sm{ width:34px; height:34px; border-radius:9px; }
    /* Desplegada: lista completa con scroll propio */
    .game-sidebar.open .sidebar-list{ max-height:44vh; overflow-y:auto; }

    /* ---- 3. SIMULACIÓN ---- */
    .sim-body{ padding:13px 14px 14px; justify-content:flex-start; }
    .sim-live-badge{ font-size:9.5px; padding:5px 12px; margin-bottom:11px; }
    .sim-timeline{ gap:4px; margin-bottom:13px; width:100%; flex-wrap:nowrap; }
    /* Los circulos numerados no se leen a este ancho: pasan a segmentos */
    .sim-dot{ flex:1; width:auto; height:5px; border-radius:3px; font-size:0; }
    .sim-dot.current{ width:auto; height:5px; box-shadow:none; }
    .sim-card{ max-width:none; margin-bottom:12px; }
    /* Las fotos son casi cuadradas (261x281): una caja muy apaisada obliga a
       'cover' a recortar mas de la mitad de la altura y se ve con mucho zoom.
       ~260px deja visible ~70%, en linea con el recorte de escritorio; en
       moviles bajos cede altura para que los botones de decision no caigan
       por debajo del pliegue. */
    .sim-card-photo{ height: clamp(190px, 32vh, 268px); }
    .sim-card-name{ font-size:23px; }
    .sim-card-tags{ padding:8px 14px 12px; }
    .sim-hype-panel{ padding:12px 13px; margin-bottom:11px; }
    .sim-event-card{ margin-bottom:11px; }
    .sim-event-actions .btn{ font-size:11.5px; padding:10px 6px; }
    /* Barra fija al fondo por defecto: con contenido alto, margin-top:auto
       ya no bastaba para mantenerlo dentro del viewport y el boton
       desaparecia bajo el pliegue sin ningun indicio de que hubiera que
       hacer scroll. .sim-body reserva el hueco (padding-bottom) para que
       la barra fija no tape la ultima tarjeta. Cuando el evento activo es
       de decision (JS anade .has-decision a .sim-body mientras las
       opciones estan visibles) vuelve al flujo normal con margin-top:auto,
       igual que antes: la tarjeta de decision puede crecer sin que el
       boton fijo se superponga a sus botones de opcion. */
    .sim-body{ padding-bottom:78px; }
    .sim-skip{
      position:fixed; left:14px; right:14px;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      margin-top:0; padding:12px; font-size:13px; z-index:25;
      box-shadow: 0 -6px 18px rgba(0,0,0,0.35);
    }
    .sim-body.has-decision{ padding-bottom:14px; }
    .sim-body.has-decision .sim-skip{
      position:static; align-self:stretch; width:100%;
      margin-top:auto; box-shadow:none; left:auto; right:auto; bottom:auto;
    }

    /* ---- 4. RESULTADO ---- */
    .wrap{ padding:14px 16px 16px; }
    #screen-result h1.title{ margin-bottom:8px; }
    .score-ring-wrap{ width:132px; height:132px; margin-top:6px; }
    .score-ring-track, .score-ring-fill{ stroke-width:11; }
    .score-ring-value{ font-size:40px; }
    .score-ring-of100{ font-size:10px; }
    .result-label{ font-size:11.5px; margin:8px 0 2px; }
    .record-line{ font-size:10.5px; margin-bottom:10px; }

    /* Atributos en rejilla: las dos filas con barra ocupan el ancho completo */
    .attr-panel{
      display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; padding:10px 12px; margin-bottom:10px;
    }
    .attr-panel .stat-row{ grid-column:1 / -1; margin-bottom:0; }
    .attr-panel .stat-row-plain{ margin-bottom:0; flex-direction:column; align-items:flex-start; gap:1px; }
    .attr-panel .stat-row-plain:last-child{ grid-column:1 / -1; }
    .attr-panel .stat-label{ font-size:8.5px; width:auto; }
    .attr-panel .stat-plain-val{ font-size:13px; }

    .poster-preview{ margin-top:0; }
    .poster-preview img{ margin-bottom:9px; }
    /* flex + flex-grow en vez de grid de 2 columnas: posterShareBtn es
       condicional (solo si el navegador soporta Web Share), asi que el
       numero de botones "a media anchura" puede ser par o impar. Con grid
       fijo un numero impar deja un hueco vacio; con flex-grow, un boton que
       se queda solo en su fila estira para ocupar el ancho entero. */
    /* flex-direction:row explicito: hay una regla mas antigua en
       @media(max-width:500px) que pone este contenedor en columna, y en
       columna "flex-basis:130px" pasa a ser una ALTURA objetivo en vez de
       un ancho, lo que dejaba "compartir" y "jugar de nuevo" enormes. */
    .poster-preview-actions{ display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; }
    .poster-preview-actions .btn{ flex:1 1 130px; padding:12px 8px; font-size:13px; white-space:nowrap; }
    #posterDownloadLink, #suggestionLink, #coffeeLink{ flex-basis:100%; }
    /* Misma altura que los botones de arriba, aunque viva fuera de ese grupo. */
    .lb-entry-btn{ padding:12px 8px; font-size:13px; margin-bottom:12px; }

    /* ---- bloque de publicar ---- */
    /* Mismo orden que en escritorio (atributos, publicar, ver clasificacion,
       poster): pedido explicitamente por Diego. Version anterior lo mandaba
       al final con order:1 para que el poster quedara antes; se quito. */
    #screen-result .wrap{ display:flex; flex-direction:column; }
    .publish-box{ margin: 4px 0 0; }
    .publish-done{ margin: 10px 0 0; }
    .publish-box{ padding:12px; }
    .publish-head{ margin-bottom:9px; }
    .publish-title{ font-size:12.5px; }
    .publish-icon{ font-size:15px; }
    .publish-row{ gap:7px; margin-bottom:8px; }
    .publish-input, .publish-select{ padding:10px 11px; font-size:13.5px; }
    .publish-select{ padding-left:29px; }
    .publish-select-wrap{ width:108px; }
    .publish-select-flag{ left:10px; }
    .publish-select-flag .flag-img, .publish-select-flag .flag-blank{ width:17px; height:13px; }
    .publish-box .btn{ padding:11px 8px; font-size:13px; }
    .publish-msg{ font-size:10px; margin-top:7px; }
    .publish-done{ font-size:11px; margin-bottom:12px; }
    .hero-lb-link{ font-size:12.5px; padding:10px 0; }
    .hero-cta-group{ gap:10px; }

    /* ---- clasificación ---- */
    .lb-wrap{ padding:16px 14px 22px; }
    .lb-title{ font-size:27px; }
    .lb-subtitle{ font-size:9.5px; margin-bottom:14px; }
    .lb-tabs{ margin-bottom:12px; }
    .lb-tab{ font-size:10.5px; padding:8px 0; }
    .lb-meta{ font-size:9px; padding:5px 11px; margin-bottom:12px; }
    .lb-rows{ gap:6px; }
    .lb-row{ padding:9px 11px; gap:10px; }
    .lb-rank{ width:26px; font-size:12px; }
    .lb-medal-1 .lb-rank{ font-size:15px; }
    .lb-medal-2 .lb-rank, .lb-medal-3 .lb-rank{ font-size:14px; }
    .lb-flag{ width:20px; }
    .lb-flag .flag-img, .lb-flag .flag-blank{ width:19px; height:14px; }
    .lb-nick{ font-size:13.5px; }
    .lb-rowmeta{ font-size:8.5px; margin-top:2px; }
    .lb-pts{ font-size:16px; }
    .lb-pts small{ font-size:8.5px; }
    .lb-percentile{ font-size:9.5px; margin-top:11px; }
    .lb-actions{ flex-direction:column; gap:8px; margin-top:16px; }
    .lb-actions .btn{ padding:12px 8px; font-size:13px; }
  }

  /* Moviles bajos (iPhone SE, Androids de 640-700px): en un evento de decision
     los botones de opcion caen bajo el pliegue. Se recorta lo prescindible
     para que la eleccion quede siempre visible sin hacer scroll. */
  @media (max-width: 767px) and (max-height: 700px){
    .sim-live-badge{ display:none; }
    .sim-card{ margin-bottom:9px; }
    .sim-card-tags{ padding:6px 12px 8px; }
    .sim-hype-panel{ padding:10px 12px; margin-bottom:9px; }
    .sim-event-card{ margin-bottom:9px; }
  }