.device {
    position: relative;
    width: 330px;
    flex: none;
    border-radius: 46px;
    background: #14100e;
    padding: 11px;
    box-shadow: var(--shadow-lift);
  }

  .screen {
    position: relative;
    width: 308px;
    height: 600px;
    border-radius: 36px;
    background: var(--bg);
    overflow: hidden;
  }

  /* La interfaz de dentro se dibuja a 390px —el ancho lógico de un iPhone— y se escala al hueco
     real del marco. Así los tamaños de aquí son LOS MISMOS NÚMEROS que mobile/ (hora 20, nombre 17,
     precio 18, radio 18, padding 16, columna de precio 96) en vez de una reinterpretación a ojo que
     se parece pero no cuadra: la primera versión de esto iba a 310px con valores reducidos a mano y
     recortaba el precio de cada fila por el borde derecho.
     760 × 0,7897 = 600, que es el alto del marco. */
  .app {
    position: absolute;
    top: 0; left: 0;
    width: 390px;
    height: 760px;
    transform: scale(0.7897);
    transform-origin: top left;
    padding: 52px 16px 0;
  }

  /* La lista sigue por detrás de la barra flotante, igual que en la app. Sin esto, lo que asoma en
     la franja de debajo de la barra es media palabra cortada por el canto del marco: fiel, pero
     parece un fallo. El degradado la funde con el crema.
     Va en .app y no en .screen para que caiga DENTRO de la capa escalada: si no, la barra (que
     también vive ahí) quedaría por debajo del degradado en el orden de pintado. */
  .app::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(247, 240, 236, 0), var(--bg) 62%);
    z-index: 2;
    pointer-events: none;
  }

  .notch {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 108px; height: 27px;
    background: #14100e;
    border-radius: 999px;
    z-index: 4;
  }

  .app-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
  }
  .app-head img { height: 30px; width: auto; }

  .daystrip {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
  }

  .day {
    flex: none;
    width: 56px;
    padding: 10px 0;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: center;
  }

  .day-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .day-num {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .day.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .day.is-on .day-name { color: rgba(255, 255, 255, 0.85); }

  .games { display: grid; gap: 10px; }

  /* Fila de partido — reproduce mobile/components/game/GameCard.tsx: carril de hora a la izquierda,
     separador de 1px, nombre + zona en el centro, y píldora de plazas + precio JUNTOS y anclados
     arriba a la derecha. Es una COPIA: si aquella fila cambia, esta no se entera sola. */
  .game {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-card);
  }

  .game-time { text-align: center; flex: none; }

  .game-hour {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
  }

  .game-dur {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
  }

  .game-rail {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    flex: none;
  }

  .game-body { flex: 1; min-width: 0; }

  .game-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }

  .game-zone {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .game-aside {
    align-self: flex-start;
    text-align: center;
    flex: none;
  }

  .pill {
    display: inline-block;
    background: var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Rojo solo con ≤2 plazas o completo — REDISENO_UI.md §D4, no siempre. */
  .pill.is-urgent { background: #fee2e2; color: var(--scarcity); }

  .game-price {
    display: block;
    min-width: 96px;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
  }

  /* Un partido completo sigue en la lista, solo atenuado: igual que la app, que no lo filtra. */
  .game.is-full { opacity: 0.6; }

  .tabbar {
    position: absolute;
    z-index: 3;
    left: 16px; right: 16px; bottom: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--peach);
    border-radius: 24px;
    padding: 11px 8px;
    box-shadow: 0 4px 10px rgba(60, 35, 20, 0.1);
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #5c5049;
  }
  .tab.is-on { color: #9a3412; }