/* ═══════════════════════════════════════════════════════
   GAMBETA — transmisión de partido + minijuegos
   ═══════════════════════════════════════════════════════ */

#scr-match{ padding:0; }
.match-shell{ width:min(1080px,100% - 28px); margin-inline:auto; padding:clamp(16px,3vh,32px) 0 60px; }

/* ── Marcador tipo transmisión ── */
.sb{
  position:sticky; top:12px; z-index:20;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
  border:1px solid var(--line-2); border-radius:10px; overflow:hidden;
  background:rgba(10,10,13,.93); backdrop-filter:blur(18px);
  box-shadow:var(--sh-2);
  animation:sbIn .6s var(--ease-back) both;
}
@keyframes sbIn{ from{ opacity:0; transform:translateY(-26px) } to{ opacity:1; transform:none } }
.sb__side{ display:flex; align-items:center; gap:12px; padding:13px 17px; min-width:0; }
.sb__side--a{ justify-content:flex-end; text-align:right; }
.sb__side .crest, .sb__side img{ width:34px; height:34px; object-fit:contain; flex:none; }
.sb__nm{
  font-family:var(--f-cond); font-weight:700; font-size:17px; text-transform:uppercase;
  letter-spacing:.04em; line-height:1.05; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sb__mine{ color:var(--gold-2); }
.sb__core{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 20px; background:rgba(255,255,255,.05);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  min-width:132px;
}
.sb__score{
  font-family:var(--f-display); font-size:34px; line-height:1; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.sb__score.bump{ animation:sbBump .55s var(--ease-back); }
@keyframes sbBump{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.3); color:var(--gold); }
  50%{ transform:scale(.95); }
  70%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}
.sb__min{
  font-family:var(--f-cond); font-weight:700; font-size:11.5px; letter-spacing:.2em;
  color:var(--blood); margin-top:2px; display:flex; align-items:center; gap:5px;
}
.sb__min i{ width:5px; height:5px; border-radius:50%; background:var(--blood); animation:liveBlink 1.1s infinite; }
@keyframes liveBlink{ 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── Barra de contexto ── */
.mctx{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin:14px 0 4px;
}

/* ── Feed de relato ── */
.mfeed{
  margin-top:18px; display:grid; gap:0;
  background:
    repeating-linear-gradient(90deg, rgba(23,201,100,.015) 0 40px, rgba(23,201,100,.008) 40px 80px),
    linear-gradient(180deg, rgba(6,18,11,.6), rgba(3,5,4,.9));
  border-radius:var(--r-md);
}
.mev{
  display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.055);
  animation:mevIn .45s var(--ease-out) both;
}
@keyframes mevIn{ from{ opacity:0; transform:translateX(-16px) } to{ opacity:1; transform:none } }
.mev__m{
  font-family:var(--f-display); font-size:17px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; line-height:1.2; text-align:right;
}
.mev__t{ font-size:14.2px; line-height:1.56; color:var(--ink-2); }
.mev__t b{ color:var(--ink); font-weight:600; }

.mev--goal{ border-bottom-color:rgba(23,201,100,.28); border-left:4px solid var(--gold); }
.mev--goal .mev__m{ color:var(--pitch); }
.mev--goal .mev__t{
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(24px,4vw,40px);
  line-height:.9; color:#fff; letter-spacing:.005em;
  animation:goalPunch .7s var(--ease-back) both;
}
.mev--goal .mev__t{ color:var(--gold-2); }
@keyframes goalPunch{
  0%{ opacity:0; transform:scale(.6) translateX(-30px); filter:blur(8px) }
  60%{ transform:scale(1.06) }
  100%{ opacity:1; transform:none; filter:none }
}
.mev--goalRival .mev__m{ color:var(--blood); }
.mev--goalRival .mev__t{ font-family:var(--f-cond); font-weight:700; font-size:19px; text-transform:uppercase; color:#ffb0b0; }
.mev--assist .mev__m{ color:var(--sky); }
.mev--assist .mev__t{ color:#cbe6ff; font-weight:600; }
.mev--card{ border-left:4px solid #e8d44a; }
.mev--card .mev__m{ color:var(--gold); }
.mev--red{ border-left:4px solid var(--blood); }
.mev--red .mev__m, .mev--red .mev__t{ color:#ff8f8f; }
.mev--injury .mev__t{ color:#ffb98f; }
.mev--big .mev__t{ font-family:var(--f-cond); font-weight:700; font-size:17.5px; color:var(--ink); }
.mev--sys .mev__t{
  font-family:var(--f-cond); font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  font-size:12px; color:var(--ink-3);
}
.mev--sys{ border-bottom:1px solid var(--line-2); border-top:1px solid var(--line-2); margin:12px 0; }
.mev--mala .mev__m{ color:var(--gold); }
.mev--mala .mev__t{ color:#e0c48a; font-style:italic; }
.mev--mala .mev__t b{ color:var(--gold-2); font-style:normal; }

.mfeed .live{
  animation:livePulse 1.2s var(--ease-in-out) infinite;
  color:var(--pitch);
  font-weight:700;
}
@keyframes livePulse{ 0%,100%{opacity:.6} 50%{opacity:1} }

/* Control de transmisión */
.mctrl{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:30;
  display:flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:100px;
  background:rgba(12,12,15,.94); border:1px solid var(--line-2);
  box-shadow:var(--sh-2); backdrop-filter:blur(16px);
}
.mspd{
  border:0; background:transparent; cursor:pointer; padding:7px 13px; border-radius:100px;
  font-family:var(--f-cond); font-weight:700; font-size:12.5px; letter-spacing:.14em;
  color:var(--ink-3); transition:.2s;
}
.mspd:hover{ color:var(--ink); }
.mspd.is-on{ background:var(--ink); color:#0a0a0c; }

/* ── Resumen post-partido ── */
.msum{
  margin-top:28px; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(165deg,#15151a,#0b0b0e);
  animation:evIn .55s var(--ease-back) both;
}
.msum.win{ border:2px solid rgba(232,177,58,.4); box-shadow:0 0 30px rgba(232,177,58,.1); }
.msum.loss{ border:2px solid rgba(224,59,59,.3); box-shadow:0 0 20px rgba(224,59,59,.08); }
.msum.draw{ border:2px solid rgba(255,255,255,.1); }
.msum__top{ padding:24px; text-align:center; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.msum__rate{
  font-family:var(--f-display); font-size:clamp(58px,12vw,110px); line-height:.8;
  background:linear-gradient(180deg,#fff,#8f8a80); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.msum__rate.good{ background:linear-gradient(180deg,var(--gold-2),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; }
.msum__rate.bad{ background:linear-gradient(180deg,#ff9c9c,#6b1616); -webkit-background-clip:text; background-clip:text; }
.msum__lbl{ font-family:var(--f-cond); font-weight:700; letter-spacing:.34em; text-transform:uppercase; font-size:12px; color:var(--ink-3); margin-top:4px; }
.msum__verd{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(22px,3.6vw,34px); margin-top:12px; line-height:.95; }
.msum__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px; background:var(--line); }
.msum__c{ background:#0e0e12; padding:16px 10px; text-align:center; }
.msum__c .v{ font-family:var(--f-display); font-size:28px; line-height:1; }
.msum__c .l{ font-family:var(--f-cond); font-weight:600; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
.msum__acts{ padding:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ═══════════ MINIJUEGOS ═══════════ */
#scr-mini{ padding:0; display:none; }
#scr-mini.is-active{ display:block; }
.mini-shell{
  position:relative; width:100%; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 0 14px;
}

.mini-stage{
  position:relative;
  /* En el celular el dedo juega, no navega: sin esto, mantener apretado
     scrollea la pantalla, arrastrar dispara el pull-to-refresh y el tap
     repetido hace zoom. Rompía picar, pase filtrado y trabar. */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:contain;
  width:min(1680px, 100vw - 20px);
  height:min(84vh, calc((100vw - 20px) * 0.6));
  min-height:420px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:#06120b;
  box-shadow:var(--sh-3);
  animation:evIn .6s var(--ease-back) both;
}
.mini-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }

.mini-brief{
  width:min(1680px,100vw - 20px); margin:0 auto 8px; text-align:center;
}
.mini-brief__k{ font-family:var(--f-cond); font-weight:700; letter-spacing:.36em; text-transform:uppercase; font-size:11px; color:var(--gold); }
.mini-brief__t{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px,4.4vw,46px); line-height:.88; margin:4px 0 0; }
.mini-brief__d{ color:var(--ink-2); font-size:13.6px; margin:6px auto 0; max-width:60ch; }

.mini-hud{
  position:absolute; inset:auto 0 0 0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px;
  background:linear-gradient(0deg, rgba(4,8,6,.92), transparent);
  pointer-events:none;
}
.mini-hud__l, .mini-hud__r{ display:flex; align-items:center; gap:16px; }
.hudk{ font-family:var(--f-cond); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.hudv{ font-family:var(--f-display); font-size:34px; line-height:1; }
.hudhint{
  position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:6;
  font-family:var(--f-cond); font-weight:700; font-size:19px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.9);
  padding:10px 24px; border-radius:100px; background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px);
  pointer-events:none; white-space:nowrap;
  animation:hintPulse 2.2s var(--ease-in-out) infinite;
}
@media (max-width:640px){
  .hudhint{ font-size:14px; letter-spacing:.12em; padding:8px 14px; white-space:normal; max-width:88%; text-align:center; }
  .hudv{ font-size:26px; }
}
@keyframes hintPulse{ 0%,100%{opacity:.72} 50%{opacity:1} }

.mini-verdict{
  position:absolute; inset:0; z-index:40; display:grid; place-items:center;
  background:rgba(3,5,4,.82); backdrop-filter:blur(10px);
  animation:fadeIn .3s both;
  overflow-y:auto; padding:16px;
}
.mini-verdict__in{ text-align:center; animation:evIn .5s var(--ease-back) both; padding:12px; max-width:min(620px,100%); }
.mini-verdict .btn{ pointer-events:auto; }
.mini-scores{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px;
}
.mini-score{ min-width:104px; }
.mini-score__l{
  font-family:var(--f-cond); font-weight:600; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.mini-score__t{ height:4px; border-radius:3px; background:rgba(255,255,255,.1); margin-top:5px; overflow:hidden; }
.mini-score__f{ height:100%; border-radius:3px; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); width:0;
  animation:scoreFill .9s var(--ease-out) forwards; }
@keyframes scoreFill{ from{ width:0 } }
.mini-score__v{ font-family:var(--f-display); font-size:18px; line-height:1; margin-top:5px; }
.mini-verdict__t{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(46px,11vw,124px); line-height:.82;
  background:linear-gradient(180deg,#fff,#8f8a80); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mini-verdict__t.good{ background:linear-gradient(180deg,#b6ffd8,#0f8347); -webkit-background-clip:text; background-clip:text; }
.mini-verdict__t.bad{ background:linear-gradient(180deg,#ffb3b3,#6b1616); -webkit-background-clip:text; background-clip:text; }
.mini-verdict__d{ color:var(--ink-2); margin-top:12px; font-size:15px; max-width:46ch; }
.mini-verdict .btn{ margin-top:24px; }

.mini-start{
  position:absolute; inset:0; z-index:9; display:grid; place-items:center;
  background:rgba(3,5,4,.66); backdrop-filter:blur(6px); cursor:pointer;
  padding:20px;
}
.mini-start__in{ text-align:center; max-width:min(560px, 92vw); }
.mini-start--brief .mini-start__in{ max-width:min(400px, 92vw); }
.mini-start__t{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(28px,5vw,54px); line-height:.9; }
.mini-start__d{
  color:var(--ink-2); margin:14px auto 0; font-size:14px; line-height:1.6;
  max-width:54ch;
}
.mini-start__chk{
  display:flex; justify-content:center; align-items:center; gap:9px; margin:18px auto 0;
  width:fit-content;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  font-family:var(--f-cond); font-weight:600; letter-spacing:.06em;
  font-size:13px; color:var(--ink-2); user-select:none;
}
.mini-start__chk input{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none;
  border:1.5px solid rgba(255,255,255,.35); border-radius:5px;
  background:rgba(255,255,255,.04); position:relative; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.mini-start__chk input:hover{ border-color:rgba(255,255,255,.6); }
.mini-start__chk input:checked{ background:var(--gold); border-color:var(--gold); }
.mini-start__chk input:checked::after{
  content:''; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border:solid #1a1206; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.mini-start__chk span:hover{ color:var(--ink); }
.mini-start__k{
  display:flex; justify-content:center; align-items:center; gap:8px; margin:20px auto 0;
  width:fit-content;
  font-family:var(--f-cond); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  font-size:12px; color:var(--gold);
  animation:hintPulse 1.6s infinite;
}
kbd{
  display:inline-block; padding:3px 8px; border-radius:4px; min-width:26px; text-align:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24);
  border-bottom-width:2px; font-family:var(--f-cond); font-weight:700; font-size:12px;
  letter-spacing:.06em; color:var(--ink);
}

/* ══════════ EL DIARIO DEL LUNES ══════════ */
.diario{
  margin-top:16px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); background:#0b0b0d;
  animation:evIn .5s var(--ease-back) both;
}
.diario__masthead{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 20px; border-bottom:3px solid var(--ink);
}
.diario__name{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(20px,2.6vw,28px); line-height:1;
}
.diario__meta{
  font-family:var(--f-cond); font-weight:700; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); text-align:right;
}
.diario__body{ position:relative; min-height:200px; display:flex; }

/* Portada grande: foto a toda superficie, título enorme encima */
.diario--HERO .diario__body{
  background-size:cover; background-position:center; min-height:280px;
}
.diario--HERO .diario__scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,6,8,.96) 10%, rgba(6,6,8,.55) 55%, rgba(6,6,8,.2) 100%);
}
.diario--HERO .diario__txt{ position:relative; z-index:2; padding:22px 24px; align-self:flex-end; width:100%; }
.diario--HERO .diario__kicker{ color:var(--gold-2); }
.diario--HERO .diario__headline{
  font-family:var(--f-display); text-transform:uppercase; color:#fff;
  font-size:clamp(38px,6.4vw,68px); line-height:.86; margin:6px 0 10px;
  text-shadow:0 6px 26px rgba(0,0,0,.9);
}
.diario--HERO .diario__lead{ color:#f0ede6; font-size:14px; line-height:1.55; max-width:64ch; }

/* Nota chica: recuadro modesto, foto apagada, sin protagonismo */
.diario--chico .diario__body{
  padding:18px 20px; gap:16px; min-height:0; align-items:flex-start;
}
.diario__thumb{
  flex:none; width:84px; height:84px; border-radius:10px; background-size:cover;
  background-position:center; filter:grayscale(.55) brightness(.75) contrast(1.05);
  border:1px solid var(--line-2);
}
.diario__txt{ min-width:0; }
.diario__kicker{
  font-family:var(--f-cond); font-weight:700; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.diario__headline{
  font-family:var(--f-display); text-transform:uppercase; margin:4px 0 6px; line-height:.92;
  font-size:22px; color:var(--ink);
}
.diario__lead{ color:var(--ink-2); font-size:12.8px; line-height:1.5; max-width:60ch; }
/* El tono tiñe el titular y la foto */
.diario--tsangre .diario__headline{ color:#c9928f; }
.diario--toscuro .diario__headline{ color:#b79ec9; }
.diario--toscuro .diario__thumb{ filter:grayscale(.7) brightness(.6) sepia(.3) hue-rotate(-30deg); }
.diario--tgloria.diario--chico .diario__headline{ color:var(--gold-2); }
.diario--tgloria.diario--chico .diario__thumb{ filter:grayscale(.15) brightness(.95); }

@media (max-width:520px){
  .diario--chico .diario__body{ flex-direction:column; }
  .diario__thumb{ width:100%; height:110px; }
}

/* Escudo procedural (SVG inline) */
.crest{ display:block; }
.crest svg{ width:100%; height:100%; display:block; }

@media(max-width:640px){
  .sb__nm{ font-size:14px; }
  .sb__core{ min-width:104px; padding:8px 12px; }
  .sb__score{ font-size:27px; }
  .mev{ grid-template-columns:38px 1fr; gap:10px; }

  /* ── El minijuego se come la pantalla ──
     Seis de cada diez personas juegan del celular. Antes el área de juego
     ocupaba el 58% del alto: el arco quedaba chico, apuntar con el dedo era
     una lotería y sobraban 340px de negro. Ahora el stage toma todo el alto
     que queda libre (descontando el encabezado compacto) y va de borde a
     borde: el arco crece y el dedo tiene dónde apuntar. */
  .mini-shell{
    min-height:100svh; justify-content:flex-start;
    padding:6px 0 max(6px, env(safe-area-inset-bottom));
  }
  /* El contenedor interno tiene que estirarse para que el área de juego
     pueda quedarse con todo el alto sobrante */
  .mini-shell > .mini-wrap{
    flex:1 1 auto; width:100%; min-height:0;
    display:flex; flex-direction:column;
  }
  .mini-stage{
    width:100vw;
    height:auto; aspect-ratio:auto;
    flex:1 1 auto;
    min-height:0; max-height:none;
    border-radius:14px; border-left:0; border-right:0;
  }
  .mini-brief{ width:100%; margin-bottom:6px; padding:0 10px; }
  .mini-brief__k{ font-size:9.5px; letter-spacing:.26em; }
  .mini-brief__t{ font-size:clamp(20px,6.4vw,30px); }

  /* Con el dedo, un cuadradito de 18px no se toca: agrandamos el área
     sin agrandar la casilla dibujada. */
  .mini-start__chk{ padding:12px 16px; margin-top:12px; }
  .mini-start__chk input{ width:22px; height:22px; }
  .mini-start__chk input:checked::after{ left:6px; top:2px; }
  .mini-start__d{ font-size:13.5px; margin-top:12px; }
  .mini-brief__d{ display:none; }   /* el how ya lo explica en la portada */
  /* Los botones de velocidad del relato se tocan mucho: 33px era poco */
  .mspd{ min-height:42px; padding:10px 16px; font-size:13px; }

  /* El HUD y el cartel de ayuda no pueden tapar la zona jugable: en el
     celular el área útil es toda la pantalla, así que se achican y se
     pegan a los bordes. */
  .mini-hud{ padding:10px 14px max(10px, env(safe-area-inset-bottom)); }
  .hudv{ font-size:22px; }
  .hudk{ font-size:10px; letter-spacing:.16em; }
}

/* ── Celular acostado ──
   Ancho de sobra y alto casi nada. El min-height:420px de la regla general
   hacía que el área de juego no entrara en pantalla y hubiera que scrollear
   en medio de un minijuego. */
@media (max-height:560px){
  .mini-shell{ min-height:0; padding:6px 0 8px; justify-content:flex-start; }
  .mini-stage{
    aspect-ratio:auto;
    height:min(76vh, calc((100vw - 20px) * 0.52));
    min-height:0; max-height:none;
  }
  .mini-brief{ margin-bottom:4px; }
  .mini-brief__t{ font-size:clamp(18px,3vw,26px); }
  .mini-brief__d{ display:none; }
  .mini-start__t{ font-size:clamp(22px,4vw,36px); }
  .mini-start__d{ font-size:12.5px; margin-top:8px; max-height:34vh; overflow:auto; }
  .mini-start__k{ margin-top:10px; }
  .mini-start__chk{ margin-top:10px; }
}
@supports (height: 100svh){
  @media (max-height:560px){
    .mini-stage{ height:min(76svh, calc((100vw - 20px) * 0.52)); }
  }
}