.juego {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #050607; outline: none;
  container-type: inline-size; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.juego.compacto { aspect-ratio: 5 / 4; }
.juego:focus-visible { outline: 1px solid #8d9198; outline-offset: 2px; }
.juego.en-marcha, .juego.en-marcha .juego-lienzo { touch-action: none; }
.juego-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.juego-capa {
  position: absolute; inset: 0; box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; gap: clamp(10px, 1.6cqw, 22px); text-align: center; pointer-events: none;
}
.juego-capa[hidden] { display: none; }
.juego-capa > * { pointer-events: auto; }
.juego-boton {
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-size: 34px; font-size: clamp(26px, 3.4cqw, 44px); line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  color: #f4f5f7; background: #050607; border: 2px solid #f4f5f7; border-radius: 999px; min-height: 48px; padding: .36em 1.1em .34em; cursor: pointer; touch-action: manipulation;
  transition: background .2s, color .2s, border-color .2s;
}
.juego-boton:hover { background: #e5007d; border-color: #e5007d; color: #050607; }
.juego-boton:focus-visible { outline: 2px solid #f4f5f7; outline-offset: 3px; }
.juego-boton:active { background: #e5007d; border-color: #e5007d; color: #050607; }
.juego-indica { margin: 0; font: 400 13px / 1.3 "IBM Plex Mono", ui-monospace, monospace; font-size: clamp(12px, 1.25cqw, 15px); letter-spacing: .04em; color: #c6c8cc; pointer-events: none; }
.juego-marcador { display: grid; gap: 2px; color: #f4f5f7; pointer-events: none; }
.juego-marcador[hidden] { display: none; }
.juego-puntos { font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-size: 88px; font-size: clamp(56px, 9cqw, 124px); line-height: .9; font-variant-numeric: tabular-nums; }
.juego-record { font: 400 13px / 1.3 "IBM Plex Mono", ui-monospace, monospace; font-size: clamp(12px, 1.25cqw, 15px); letter-spacing: .08em; text-transform: uppercase; color: #8d9198; }
.juego-record.nuevo { color: #ffd000; }
.juego-enlace { font: 400 13px / 1.3 "IBM Plex Mono", ui-monospace, monospace; font-size: clamp(12px, 1.25cqw, 15px); color: #c6c8cc; background: #050607; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; padding: 6px 4px; }
.juego-enlace:hover { color: #f4f5f7; }
.juego-enlace:focus-visible { outline: 2px solid #f4f5f7; outline-offset: 2px; }
.juego.compacto .juego-capa { padding: 10px 12px 10px 33%; gap: 8px; }
.juego.compacto .juego-puntos { font-size: 54px; }
.juego.juego[data-modo="franja"] { grid-column: 1 / -1; width: 100%; height: 120px; aspect-ratio: auto; container-type: normal; background: transparent; cursor: pointer; }
@media (max-width: 720px) { .juego.juego[data-modo="franja"] { height: 104px; } }
.juego.juego[data-modo="franja"]:focus-visible { outline: none; }
.juego.juego[data-modo="franja"]:focus-visible .juego-nota-txt:not(.nuevo) { color: #f4f5f7; text-decoration: underline; }
.juego-nota { position: absolute; top: 0; right: 12px; margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; pointer-events: none; }
.juego-nota-num { font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; color: #f4f5f7; }
.juego-nota-txt { font: 400 11px / 1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; color: #8d9198; }
.juego-nota-txt.nuevo { color: #ffd000; }