:root{
    /* Tema oscuro premium: negro de base y grises elevados para las
       superficies. Las separaciones son blanco a muy baja opacidad en vez de
       una línea de color: sobre negro, un borde sólido se ve como un marco y
       lo que se busca es el filo fino de iOS. */
    --bg: #08090B;
    --panel: #141619;
    --panel-2: #1C1F24;
    --line: rgba(255,255,255,0.08);
    --text: #F5F5F7;
    --muted: #8A8F98;
    --gold: #E8B84B;
    /* rojo de la marca. No es --out (#C1443A, el ladrillo de "tiro fuera"):
       ese es apagado a propósito y aquí hace falta uno saturado. --brand-2 es
       el mismo rojo aclarado, para el texto y los iconos sobre el fondo negro,
       donde el --brand puro se queda corto de contraste. */
    --brand: #D9182B;
    --brand-2: #FF5A68;
    --goal: #33A17F;
    --goal-dim: #1F5C48;
    --save: #4C8FD6;
    --save-dim: #294C74;
    --out: #C1443A;
    --out-dim: #5E2B27;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    /* La tipografía es la del sistema: San Francisco en iPhone, iPad y Mac, y
       la nativa en el resto. Sin fuentes de CDN, que además es lo que conviene
       a una app que tiene que verse igual sin conexión. */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
            'Segoe UI', Roboto, system-ui, sans-serif;
    /* alto de la barra inferior, para que el contenido no acabe debajo */
    --nav-h: 64px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    justify-content:center;
  }
  button, input, select{font-family:inherit;}
  /* los números que cambian solos (marcadores, contadores) no deben bailar */
  .num, .score-box .num, .brand-word, .page-title{font-variant-numeric:tabular-nums;}
  #app{
    width:100%;
    max-width:480px;
    min-height:100vh;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    position:relative;
  }
  /* Sin fuente de titular: el aire de iOS sale del peso y del tracking
     negativo, no de una familia aparte. */
  h1,h2,h3,.head{
    font-weight:700;
    letter-spacing:-0.02em;
    margin:0;
  }
  /* Cabecera de tres huecos: acción · logo · acción. El logo va en el del
     medio y se queda centrado en la pantalla aunque los lados pesen distinto,
     que es lo que no permitía el space-between de antes. */
  header.topbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
    padding:14px 16px 12px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:rgba(8,9,11,0.82);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    z-index:5;
  }
  header.topbar .slot{display:flex;align-items:center;min-width:0;}
  header.topbar .slot.right{justify-content:flex-end;}
  /* Título grande dentro del contenido, al estilo de iOS: el nombre de la
     pantalla ya no cabe en la cabecera porque ahí manda el logo. */
  .page-title{
    font-size:28px;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.15;
    margin:2px 0 18px;
    overflow-wrap:anywhere;
  }
  .page-title small{
    display:block;
    font-size:13px;
    font-weight:400;
    letter-spacing:0;
    color:var(--muted);
    margin-top:5px;
  }
  /* ---- marca ---- */
  /* el logo se dimensiona con em: el mismo HTML sirve para la topbar y para el
     banner de entrada, y solo cambia el font-size del contenedor. */
  .brand{
    display:inline-flex;
    align-items:center;
    gap:0.34em;
    line-height:1;
    white-space:nowrap;
  }
  .brand-mark{
    width:1.12em;
    height:1.12em;
    flex:0 0 auto;
    display:block;
  }
  .brand-mark .tile{fill:var(--brand);}
  .brand-mark .bar{fill:#FFFFFF;}
  .brand-word{
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--text);
  }
  .brand-word i{color:var(--brand-2);font-style:normal;}
  header.topbar .brand{font-size:19px;}
  .brand-banner{
    padding:34px 20px 26px;
    text-align:center;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(217,24,43,0.20) 0%, transparent 70%),
      var(--bg);
  }
  /* en pantallas estrechas el wordmark se achica solo, sin media query */
  .brand-banner .brand{font-size:clamp(27px,8.5vw,36px);}
  .brand-tagline{
    margin:14px auto 0;
    max-width:320px;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
  }
  /* Botón redondo de la cabecera (volver, cuenta): el equivalente de los
     circulitos de la referencia. Conserva la clase .back-btn para no tocar
     los manejadores que ya cuelgan de esos ids. */
  .back-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:var(--radius-pill);
    font-size:14px;
    cursor:pointer;
    flex:0 0 auto;
    transition:background .15s, transform .1s;
  }
  .back-btn svg{width:18px;height:18px;}
  .back-btn:hover{background:var(--panel-2);}
  .back-btn:active{transform:scale(0.94);}
  /* la misma acción cuando lleva texto ("Guardar"): píldora en vez de círculo */
  .back-btn.wide{
    width:auto;
    height:32px;
    padding:0 14px;
    font-size:13.5px;
    font-weight:600;
    background:var(--brand);
    border-color:transparent;
    color:#fff;
  }
  .back-btn.wide:hover{filter:brightness(1.08);background:var(--brand);}
  main{
    flex:1;
    padding:18px 16px;
    padding-bottom:40px;
  }
  /* con barra inferior el contenido termina por encima de ella */
  .has-nav main{
    padding-bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom));
  }
  .field{
    margin-bottom:16px;
  }
  .field label{
    display:block;
    font-size:12.5px;
    color:var(--muted);
    margin-bottom:6px;
    font-weight:500;
  }
  .field input, .field select{
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:var(--radius);
    padding:13px 14px;
    font-size:16px;   /* menos de 16 y iOS hace zoom al enfocar */
  }
  .field input::placeholder{color:#5C6069;}
  .field input:focus, .field select:focus{
    outline:none;
    border-color:var(--brand-2);
    box-shadow:0 0 0 3px rgba(217,24,43,0.22);
  }
  .row{display:flex;gap:10px;}
  .row .field{flex:1;}
  /* Botones de píldora. El rojo de la marca manda en la acción principal y el
     resto de colores siguen siendo los semánticos de siempre. */
  button.primary{
    width:100%;
    background:var(--brand);
    color:#fff;
    border:none;
    border-radius:var(--radius-pill);
    padding:15px;
    font-size:16px;
    font-weight:600;
    letter-spacing:-0.01em;
    cursor:pointer;
    margin-top:4px;
    transition:filter .15s, transform .1s;
  }
  button.primary:hover{filter:brightness(1.1);}
  button.secondary{
    width:100%;
    background:rgba(255,255,255,0.06);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    padding:14px;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:background .15s, transform .1s;
  }
  button.secondary:hover{background:rgba(255,255,255,0.1);}
  button.primary:active, button.secondary:active{transform:scale(0.98);}
  button.link-btn{
    background:none;
    border:none;
    color:var(--gold);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    padding:6px 0;
  }
  button.link-btn:hover{text-decoration:underline;}
  .error-msg{
    color:var(--out);
    font-size:13px;
    margin:-8px 0 14px;
  }
  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:16px;
    margin-bottom:12px;
  }
  .card.clickable{cursor:pointer;}
  .card.clickable:hover{background:var(--panel-2);}
  .card-title{font-size:16px;font-weight:600;letter-spacing:-0.01em;}
  .card-sub{font-size:12.5px;color:var(--muted);margin-top:3px;}

  /* ---- tarjetas con degradado (equipos y partidos) ---- */
  /* El color no se guarda en ninguna parte: el de un equipo se deduce de su
     nombre y el de un partido, del resultado. Así hay color sin pedirle al
     usuario que elija ninguno. */
  .tint-card{
    position:relative;
    display:block;
    width:100%;
    text-align:left;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:15px 16px;
    margin-bottom:10px;
    color:var(--text);
    cursor:pointer;
    overflow:hidden;
    background:
      linear-gradient(100deg, var(--tint) 0%, rgba(20,22,25,0.92) 58%),
      var(--panel);
    transition:transform .1s;
  }
  .tint-card:active{transform:scale(0.99);}
  .team-card{display:flex;align-items:center;gap:13px;}
  .team-card .team-badge{
    width:42px;height:42px;
    border-radius:var(--radius-pill);
    background:var(--tint-solid);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;
    font-weight:700;
    letter-spacing:-0.02em;
    flex-shrink:0;
  }
  /* dentro de un <button> sólo cabe contenido en línea: los spans se hacen
     bloque desde aquí en vez de usar divs */
  .team-card .team-text{min-width:0;}
  .team-card .team-name{
    display:block;
    font-size:16.5px;
    font-weight:600;
    letter-spacing:-0.01em;
    overflow-wrap:anywhere;
  }
  .team-card .team-meta{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}
  .team-card .chev{margin-left:auto;color:var(--muted);display:flex;flex:0 0 auto;}
  .team-card .chev svg{width:17px;height:17px;transform:rotate(180deg);}
  .match-card .side, .match-card .mid span{display:block;}
  /* fila de partido: los dos equipos a los lados y el marcador en el centro */
  .match-card{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
  }
  .match-card .side{
    font-size:13px;
    font-weight:500;
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  .match-card .side.away{text-align:right;color:var(--muted);}
  .match-card .score{
    font-size:21px;
    font-weight:700;
    letter-spacing:-0.02em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .match-card .when{
    font-size:11px;
    color:var(--muted);
    text-align:center;
    margin-top:2px;
    white-space:nowrap;
  }
  .match-card .mid{display:flex;flex-direction:column;align-items:center;}
  /* marcador grande del detalle de partido */
  .score-hero{
    text-align:center;
    padding:22px 16px;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.07) 0%, transparent 70%),
      var(--panel);
  }
  .score-hero-num{
    font-size:44px;
    font-weight:700;
    letter-spacing:-0.03em;
    font-variant-numeric:tabular-nums;
    line-height:1.05;
  }
  .score-hero-lbl{font-size:12.5px;color:var(--muted);margin-top:6px;}
  .match-card .tag{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--tint-solid);
  }
  .empty-state{
    text-align:center;
    padding:40px 16px;
    color:var(--muted);
  }
  .empty-state .big-num{
    font-size:15px;
    color:var(--text);
    margin-bottom:6px;
  }
  .player-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  .player-row:last-child{border-bottom:none;}
  .dorsal-badge{
    width:34px;height:34px;
    border-radius:var(--radius-pill);
    background:var(--panel-2);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    font-weight:600;
    font-size:14px;
    flex-shrink:0;
  }
  .player-info{flex:1;}
  .player-name{font-size:14.5px;font-weight:500;}
  .player-pos{font-size:12px;color:var(--muted);}
  .icon-btn{
    background:none;
    border:none;
    color:var(--muted);
    cursor:pointer;
    font-size:16px;
    padding:4px 6px;
  }
  .icon-btn:hover{color:var(--out);}
  /* El de borrar es una ✕ de texto y el de editar un SVG: hay que darle tamaño
     para que los dos ocupen lo mismo en la fila. */
  .icon-btn svg{width:17px;height:17px;display:block;}
  /* El jugador que se está corrigiendo, señalado mientras el formulario de abajo
     es el suyo. */
  .player-row.editing{background:var(--panel-2);border-radius:10px;padding-left:8px;padding-right:4px;}
  /* Rótulo de sección al estilo iOS: en versalitas y sin la raya de debajo,
     que sobre negro ensuciaba. */
  .section-label{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--muted);
    margin:26px 0 10px;
  }
  .section-label:first-child{margin-top:0;}
  .section-label small{
    font-size:11px;
    text-transform:none;
    letter-spacing:0;
    font-weight:400;
  }

  /* goal grid */
  .goal-block{margin-bottom:26px;}
  .goal-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:10px;
  }
  .goal-header .goal-title{font-size:14px;font-weight:600;}
  .goal-header .goal-tally{font-size:12px;color:var(--muted);}
  .goal-wrap{
    position:relative;
    margin:0 8px 6px;
    padding-top:10px;
  }
  .goal-frame{
    position:relative;
    padding:10px;
    background:transparent;
  }
  .goal-post{
    position:absolute;
    z-index:3;
    border-radius:1px;
    box-shadow:0 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.15);
  }
  .goal-post.top{
    top:0; left:0; right:0; height:10px;
    background-image:repeating-linear-gradient(to right, #CC2F26 0 16px, #F7F6F2 16px 32px);
  }
  .goal-post.left{
    top:0; bottom:0; left:0; width:10px;
    background-image:repeating-linear-gradient(to bottom, #CC2F26 0 16px, #F7F6F2 16px 32px);
  }
  .goal-post.right{
    top:0; bottom:0; right:0; width:10px;
    background-image:repeating-linear-gradient(to bottom, #CC2F26 0 16px, #F7F6F2 16px 32px);
  }
  .goal-ground{
    height:4px;
    margin:0 -2px 0;
    background:rgba(237,239,242,0.35);
    border-radius:2px;
  }
  .goal-net{
    margin:10px 10px 0;
    background-color:rgba(6,14,26,0.72);
    background-image:
      repeating-linear-gradient(55deg, rgba(255,255,255,0.16) 0, rgba(255,255,255,0.16) 1px, transparent 1px, transparent 11px),
      repeating-linear-gradient(-55deg, rgba(255,255,255,0.16) 0, rgba(255,255,255,0.16) 1px, transparent 1px, transparent 11px);
    border-radius:0 0 8px 8px;
    padding:4px;
    box-shadow: inset 0 -16px 20px -10px rgba(0,0,0,0.6);
    position:relative;
    z-index:2;
  }
  .goal-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    gap:2px;
    aspect-ratio:3/2;
  }
  .goal-cell{
    position:relative;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .12s;
  }
  .goal-cell:hover{background:rgba(255,255,255,0.1);}
  .goal-cell .marks{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
  .mark-chip{
    font-size:11px;
    font-weight:600;
    padding:1px 7px;
    border-radius:var(--radius-pill);
    line-height:1.5;
  }
  .mark-chip.goal{background:var(--goal-dim);color:#B7F0DE;}
  .mark-chip.save{background:var(--save-dim);color:#CBE1FA;}
  .flash{
    position:absolute;
    inset:0;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    font-size:22px;
    border-radius:2px;
    animation:flashPop .5s ease-out forwards;
    pointer-events:none;
  }
  .flash.goal{background:var(--goal);color:#052A20;}
  .flash.save{background:var(--save);color:#031A33;}
  @keyframes flashPop{
    0%{opacity:0;transform:scale(0.7);}
    15%{opacity:1;transform:scale(1);}
    75%{opacity:1;}
    100%{opacity:0;}
  }
  .goal-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
  }
  .goal-actions button{
    flex:1;
    font-size:12.5px;
    font-weight:600;
    padding:10px 6px;
    border-radius:var(--radius-pill);
    cursor:pointer;
    transition:transform .1s;
  }
  .goal-actions button:active{transform:scale(0.97);}
  .btn-out{
    background:var(--out-dim);
    border:1px solid var(--out);
    color:#FFD9D4;
  }
  .btn-post{
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold);
  }
  .btn-undo{
    background:transparent;
    border:1px solid var(--line);
    color:var(--muted);
  }

  /* ---- reloj del partido ---- */
  .clock-bar{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:8px 10px;
    margin-bottom:16px;
  }
  .clock-play{
    flex:none;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--panel-2);
    border:1px solid var(--line);
    color:var(--text);
    cursor:pointer;
  }
  .clock-play svg{width:18px;height:18px;}
  .clock-play.on{background:var(--goal-dim);border-color:var(--goal);color:#B7F0DE;}
  .clock-read{flex:1;min-width:0;}
  /* tabular-nums: sin esto los dígitos bailan de ancho y el reloj tiembla */
  .clock-time{
    font-size:22px;
    font-weight:700;
    letter-spacing:-0.02em;
    font-variant-numeric:tabular-nums;
  }
  .clock-period{font-size:11.5px;color:var(--muted);}
  .clock-half{
    flex:none;
    font-size:12px;
    font-weight:600;
    padding:9px 12px;
    border-radius:var(--radius-pill);
    background:var(--panel-2);
    border:1px solid var(--gold);
    color:var(--gold);
    cursor:pointer;
  }
  .clock-half.done{
    border-color:var(--line);
    color:var(--muted);
    cursor:default;
  }

  /* ---- fichas de jugador (portería y pista) ---- */
  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .court-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--muted);
    border-radius:var(--radius-pill);
    padding:6px 11px 6px 6px;
    font-size:12.5px;
    cursor:pointer;
  }
  .court-chip.on{
    background:var(--goal-dim);
    border-color:var(--goal);
    color:#DDF5EC;
  }
  .court-chip .dorsal-mini{flex:none;}

  /* ---- botones de evento ---- */
  /* Flex y no rejilla fija: los botones se reparten la fila entera sean los que
     sean, así que quitar o añadir uno del panel no deja un hueco suelto ni
     obliga a tocar el número de columnas. */
  .event-pad{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .event-btn{
    /* base 0 y todos con el mismo crecimiento: se reparten la fila a partes
       iguales sean los que sean, en vez de que el último se quede solo en una
       fila estirado. El min-width es lo único que los hace bajar de línea, y es
       el ancho con el que "2 minutos" todavía se lee. */
    flex:1 1 0;
    min-width:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:9px 3px;
    border-radius:var(--radius);
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--text);
    cursor:pointer;
    transition:transform .1s;
  }
  .event-btn:active{transform:scale(0.96);}
  .event-btn .ev-short{font-size:14px;font-weight:700;letter-spacing:-0.02em;}
  .event-btn .ev-name{font-size:9.5px;color:var(--muted);line-height:1.15;text-align:center;}
  .event-btn.tone-good .ev-short{color:var(--goal);}
  .event-btn.tone-bad  .ev-short{color:var(--out);}
  .event-btn.tone-warn .ev-short{color:var(--gold);}

  /* ---- partido a medias, en el panel ---- */
  .resume-card{
    background:linear-gradient(180deg, rgba(217,24,43,0.18), var(--panel));
    border:1px solid var(--brand);
    border-radius:var(--radius-lg);
    padding:14px;
    margin-bottom:14px;
  }
  .resume-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .resume-live{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--brand-2);
  }
  .resume-score{font-size:20px;font-weight:700;letter-spacing:-0.02em;}
  .resume-sub{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .resume-actions{display:flex;gap:8px;margin-top:12px;}
  .resume-actions button{flex:1;}
  button.slim{padding:10px 12px;font-size:13px;}
  .hint-text{
    font-size:11.5px;
    color:var(--muted);
    margin-top:8px;
    line-height:1.5;
  }
  .scoreboard{
    display:flex;
    gap:10px;
    margin-bottom:20px;
  }
  .score-box{
    flex:1;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:12px 10px;
    text-align:center;
  }
  .score-box .num{
    font-size:30px;
    font-weight:700;
    letter-spacing:-0.03em;
  }
  .score-box .lbl{
    font-size:10.5px;
    color:var(--muted);
    text-transform:none;
    margin-top:2px;
  }
  .stat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:14px 0 20px;
  }
  .stat-cell{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:12px;
  }
  .stat-cell .num{font-size:24px;font-weight:700;letter-spacing:-0.02em;}
  .stat-cell .lbl{font-size:11.5px;color:var(--muted);margin-top:2px;}
  footer.note{
    text-align:center;
    font-size:11px;
    color:var(--muted);
    padding:14px 20px 24px;
  }
  .toast{
    position:fixed;
    bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    background:rgba(28,31,36,0.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--line);
    color:var(--text);
    padding:11px 20px;
    border-radius:var(--radius-pill);
    font-size:13.5px;
    font-weight:500;
    box-shadow:0 8px 30px rgba(0,0,0,0.55);
    z-index:50;
    animation:toastFade 2.2s forwards;
  }
  @keyframes toastFade{
    0%{opacity:0;transform:translate(-50%,10px);}
    10%{opacity:1;transform:translate(-50%,0);}
    85%{opacity:1;}
    100%{opacity:0;}
  }
  .loading-msg{
    text-align:center;
    color:var(--muted);
    padding:60px 20px;
    font-size:14px;
  }
  .mini-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3px;
    margin-top:8px;
  }
  .mini-cell{
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line);
    border-radius:4px;
    aspect-ratio:1.4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
  }
  .mini-cell .n{font-size:12px;font-weight:600;}
  .stat-list-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .stat-list-row:last-child{border-bottom:none;}
  .stat-list-row .count{font-weight:600;color:var(--gold);}
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:100;
  }
  .modal-box{
    background:var(--panel);
    border:1px solid var(--line);
    border-bottom:none;
    border-radius:22px 22px 0 0;
    width:100%;
    max-width:480px;
    padding:18px 18px calc(24px + env(safe-area-inset-bottom));
    max-height:72vh;
    overflow-y:auto;
    animation:modalUp .18s ease-out;
  }
  @keyframes modalUp{
    0%{transform:translateY(16px);opacity:0;}
    100%{transform:translateY(0);opacity:1;}
  }
  .modal-title{
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.02em;
    margin-bottom:14px;
  }
  .modal-player-btn{
    width:100%;
    text-align:left;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:8px;
    cursor:pointer;
    font-size:14.5px;
  }
  .modal-player-btn:hover{border-color:var(--gold);}
  .modal-player-btn .dorsal-mini{
    width:26px;height:26px;
    border-radius:6px;
    background:var(--panel);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;
    font-weight:600;
    flex-shrink:0;
  }
  .modal-skip-btn{
    width:100%;
    background:transparent;
    border:1px dashed var(--line);
    color:var(--muted);
    border-radius:10px;
    padding:10px;
    margin-top:2px;
    margin-bottom:8px;
    cursor:pointer;
    font-size:13.5px;
  }
  .modal-cancel-btn{
    width:100%;
    background:none;
    border:none;
    color:var(--out);
    font-size:13px;
    padding:6px;
    cursor:pointer;
  }

  /* ---- las dos porterías, una al lado de la otra ---- */
  /* con dos porterías en paralelo cada casilla de la red se queda a la mitad de
     ancho, así que en el partido en vivo se recorta el relleno y, donde hay
     sitio, se ensancha el contenedor para recuperar tamaño de toque. */
  #app.screen-liveMatch{max-width:760px;}
  main.live-main{padding-left:8px;padding-right:8px;}
  .live-main .goals-row{gap:8px;}
  .live-main .scoreboard,
  .live-main .origin-toggle,
  .live-main #cancel-match-btn{max-width:480px;margin-left:auto;margin-right:auto;}
  .live-main #cancel-match-btn{display:block;margin-top:14px;}
  .hint-text.center{text-align:center;margin-top:2px;}
  .goals-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:start;
  }
  .goals-row .goal-block{margin-bottom:8px;}
  .goals-row .goal-header{display:block;margin-bottom:8px;}
  .goals-row .goal-title{font-size:13px;line-height:1.25;}
  .goals-row .goal-sub{font-size:10.5px;color:var(--muted);line-height:1.3;}
  .goals-row .goal-tally{font-size:10.5px;margin-top:2px;}
  /* a media anchura los postes y la red se afinan para que la red mande */
  .goals-row .goal-wrap{margin:0 2px 6px;padding-top:6px;}
  .goals-row .goal-frame{padding:6px;}
  .goals-row .goal-post.top{height:6px;}
  .goals-row .goal-post.left,
  .goals-row .goal-post.right{width:6px;}
  .goals-row .goal-net{margin:6px 6px 0;padding:2px;}
  .goals-row .goal-cell .marks{gap:3px;}
  .goals-row .mark-chip{font-size:9.5px;padding:1px 4px;}
  .goals-row .flash{font-size:15px;}
  /* Con dos porterías en paralelo no caben tres botones en fila: "Fuera" y
     "Palo" se reparten una línea y "Deshacer" se queda con la de abajo. */
  .goals-row .goal-actions{flex-wrap:wrap;gap:6px;margin-top:8px;}
  .goals-row .goal-actions button{padding:9px 4px;font-size:12px;}
  .goals-row .btn-out,
  .goals-row .btn-post{flex:1 1 calc(50% - 3px);}
  .goals-row .btn-undo{flex:1 1 100%;}
  /* en cuanto hay sitio se separan las dos porterías y se recupera el ancho */
  @media (min-width:560px){
    main.live-main{padding-left:20px;padding-right:20px;}
    .live-main .goals-row{gap:28px;}
    .goals-row .goal-title{font-size:14px;}
    .goals-row .goal-sub,
    .goals-row .goal-tally{font-size:11.5px;}
    .goals-row .goal-actions{flex-wrap:nowrap;}
    .goals-row .btn-out,
    .goals-row .btn-post,
    .goals-row .btn-undo{flex:1 1 auto;}
    .goals-row .mark-chip{font-size:11px;padding:1px 6px;}
  }

  /* ---- media pista para elegir la zona de lanzamiento ---- */
  .modal-sub{
    font-size:11.5px;
    color:var(--muted);
    margin:-8px 0 12px;
    line-height:1.4;
  }
  /* la pista se dibuja en SVG a escala; el aspect-ratio tiene que coincidir
     exactamente con el viewBox o el punto tocado no cae donde toca */
  .court-svg{
    display:block;
    width:100%;
    aspect-ratio:20.5 / 16.35;
    margin:0 0 12px;
    overflow:visible;
  }
  .court-svg.interactive{
    cursor:crosshair;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .court-area{fill:rgba(255,255,255,0.16);}
  .court-border{fill:none;stroke:#17222F;stroke-width:0.22;}
  .court-line{fill:none;stroke:#17222F;stroke-width:0.15;}
  .court-line.dashed{stroke-dasharray:0.5 0.4;}
  .court-mark{stroke:#17222F;stroke-width:0.15;}
  .court-goal-frame{fill:none;stroke-width:0.26;}
  .shot-dot{stroke:rgba(255,255,255,0.9);stroke-width:0.09;}
  .shot-dot.goal{fill:#1F9D75;}
  .shot-dot.save{fill:#3D7FC4;}
  .court-legend{
    display:flex;
    justify-content:center;
    gap:18px;
    font-size:11.5px;
    color:var(--muted);
    margin:-4px 0 4px;
  }
  .court-legend i{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    margin-right:5px;
  }
  .court-legend .dot-goal{background:#1F9D75;}
  .court-legend .dot-save{background:#3D7FC4;}
  .court-legend .dot-out{background:var(--out);}

  /* ---- filtros del mapa de tiros ---- */
  /* El botón de Google de la app de móvil. En la web lo dibuja el propio
     Google; aquí hay que pintarlo nosotros, siguiendo sus normas de marca:
     fondo blanco, su logo de cuatro colores y el texto en gris oscuro. */
  .google-native-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    background:#FFFFFF;
    border:1px solid #DADCE0;
    color:#1F1F1F;
    border-radius:var(--radius-pill);
    padding:12px 16px;
    font-family:var(--font);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
  }
  .google-native-btn:active{background:#F1F3F4;}
  .google-native-btn svg{flex:none;}

  .filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
  }
  .filter-chip{
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--muted);
    border-radius:var(--radius-pill);
    padding:6px 13px;
    font-size:12px;
    cursor:pointer;
  }
  .filter-chip.on{
    background:var(--panel-2);
    border-color:var(--gold);
    color:var(--gold);
  }
  .filter-select{
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:var(--radius);
    padding:9px 11px;
    font-size:13px;
    font-family:var(--font);
  }

  /* ---- cruce zona de lanzamiento × portería ---- */
  .cross-wrap{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:12px;
  }
  .cross-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 0;
    border-bottom:1px solid var(--line);
  }
  .cross-row:last-child{border-bottom:none;}
  .cross-name{
    flex:1;
    min-width:0;
    font-size:12.5px;
    line-height:1.2;
  }
  .cross-name small{
    display:block;
    font-size:10.5px;
    color:var(--muted);
  }
  .cross-grid{
    flex:none;
    display:grid;
    grid-template-columns:repeat(3,26px);
    grid-template-rows:repeat(3,20px);
    gap:2px;
  }
  .cross-cell{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:600;
    border-radius:3px;
    color:#DDF5EC;
    background:rgba(51,161,127,var(--fill,0));
    border:1px solid var(--line);
  }
  .cross-cell.empty{color:transparent;}

  /* ---- evolución del marcador ---- */
  .timeline-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:12px;
    margin-bottom:6px;
  }
  .timeline-svg{
    display:block;
    width:100%;
    height:70px;
    overflow:visible;
  }
  /* vector-effect: el viewBox se estira a lo ancho, y sin esto el trazo se
     estira con él y la línea sale gorda en horizontal y fina en vertical */
  .tl-line{
    fill:none;
    stroke-width:1.6;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  .tl-line.up{stroke:var(--goal);}
  .tl-line.down{stroke:var(--out);}
  .tl-zero{stroke:rgba(255,255,255,0.22);stroke-width:1;vector-effect:non-scaling-stroke;}
  .tl-half{stroke:var(--gold);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;}
  .timeline-foot{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    font-size:11px;
    color:var(--muted);
    margin-top:6px;
  }
  .timeline-foot .tl-range{flex:none;white-space:nowrap;}
  .timeline-foot span:last-child{text-align:right;}

  /* ---- ficha de partido: editar y compartir ---- */
  .export-row{display:flex;gap:8px;}
  .export-row button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;}
  .export-row button svg{width:15px;height:15px;}
  .edit-card{margin-top:14px;}
  .edit-card .field{margin-bottom:12px;}
  /* Cuando la tarjeta de edición explica algo antes del formulario, el texto
     necesita aire: si no, la etiqueta del primer campo se le pega. */
  .edit-card .card-sub{margin-bottom:14px;}
  button.danger{
    width:100%;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:var(--out-dim);
    border:1px solid var(--out);
    color:#FFD9D4;
    border-radius:var(--radius-pill);
    font-weight:600;
    cursor:pointer;
  }
  button.danger svg{width:15px;height:15px;}
  .stat-list-row .count.good{color:var(--goal);}
  .stat-list-row .count.bad{color:var(--out);}
  .stat-list-row .count small{font-weight:400;color:var(--muted);font-size:10.5px;}
  .stat-list-row small.who{
    display:block;
    font-size:10.5px;
    color:var(--muted);
    margin-top:2px;
  }

  /* ---- interruptor de "preguntar zona de lanzamiento" ---- */
  .origin-toggle{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--muted);
    border-radius:var(--radius);
    padding:9px 12px;
    margin-bottom:16px;
    font-size:12.5px;
    text-align:left;
    cursor:pointer;
  }
  .origin-toggle .dot{
    width:30px;
    height:17px;
    border-radius:10px;
    background:var(--line);
    position:relative;
    flex-shrink:0;
    transition:background .15s;
  }
  .origin-toggle .dot::after{
    content:'';
    position:absolute;
    top:2px;
    left:2px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--muted);
    transition:transform .15s, background .15s;
  }
  .origin-toggle.on{color:var(--text);border-color:var(--goal);}
  .origin-toggle.on .dot{background:var(--goal-dim);}
  .origin-toggle.on .dot::after{transform:translateX(13px);background:var(--goal);}

  /* ---- entrar con Google ---- */
  /* El botón de "Entrar con Google" lo dibuja Google dentro de este hueco: su
     aspecto lo manda él y no se puede reestilar, así que aquí solo se centra y
     se le reserva el alto para que la pantalla no salte al aparecer. */
  .google-slot{
    display:flex;
    justify-content:center;
    min-height:44px;
  }
  .google-slot .hint-text{ text-align:center; }
  .auth-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0;
    color:var(--muted);
    font-size:11.5px;
  }
  .auth-divider::before,
  .auth-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--line);
  }
  .notice-msg{
    background:var(--goal-dim);
    border:1px solid var(--goal);
    color:#CBF0E4;
    border-radius:var(--radius);
    padding:10px 12px;
    font-size:13px;
    line-height:1.45;
    margin-bottom:12px;
  }

  /* ---- estado de la sincronización ---- */
  /* Solo se pinta cuando hay algo que contar; si todo está al día, no aparece. */
  .sync-banner{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    text-align:left;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--muted);
    border-radius:var(--radius);
    padding:9px 12px;
    margin-bottom:14px;
    font-size:12.5px;
    line-height:1.4;
    cursor:pointer;
  }
  .sync-banner .sync-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--muted);
    flex-shrink:0;
  }
  .sync-banner.st-pending{border-color:var(--gold);color:var(--text);}
  .sync-banner.st-pending .sync-dot{background:var(--gold);}
  .sync-banner.st-syncing .sync-dot{background:var(--save);animation:syncPulse 1s ease-in-out infinite;}
  .sync-banner.st-offline{border-color:var(--line);}
  .sync-banner.st-offline .sync-dot{background:var(--muted);}
  .sync-banner.st-error{border-color:var(--out);color:#F3C9C5;}
  .sync-banner.st-error .sync-dot{background:var(--out);}
  .sync-banner.st-local{border-color:var(--out);color:#F3C9C5;}
  .sync-banner.st-local .sync-dot{background:var(--out);}
  @keyframes syncPulse{
    0%,100%{opacity:1;}
    50%{opacity:0.3;}
  }

  /* ---- barra inferior de navegación ---- */
  /* Flota sobre el contenido con el desenfoque de iOS y respeta el área segura
     del iPhone. La pone render() sólo en las pantallas de navegación: en el
     partido en vivo y en los formularios estorbaría. */
  .bottom-nav{
    position:fixed;
    bottom:calc(14px + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 32px);
    max-width:420px;
    height:var(--nav-h);
    display:grid;
    grid-template-columns:repeat(3,1fr) auto;
    align-items:center;
    gap:4px;
    padding:0 8px 0 6px;
    background:rgba(28,31,36,0.82);
    backdrop-filter:saturate(180%) blur(22px);
    -webkit-backdrop-filter:saturate(180%) blur(22px);
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    box-shadow:0 10px 34px rgba(0,0,0,0.55);
    z-index:40;
  }
  .nav-btn{
    background:none;
    border:none;
    color:var(--muted);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:8px 2px;
    border-radius:var(--radius-pill);
    font-size:10px;
    font-weight:500;
    letter-spacing:0.01em;
    cursor:pointer;
    transition:color .15s, transform .1s;
  }
  .nav-btn svg{width:22px;height:22px;}
  .nav-btn:active{transform:scale(0.94);}
  .nav-btn.on{color:var(--text);}
  .nav-btn.on svg{color:var(--brand-2);}
  /* el botón de acción, redondo y en el rojo de la marca, como en la referencia */
  .nav-add{
    width:46px;
    height:46px;
    border-radius:var(--radius-pill);
    background:var(--brand);
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(217,24,43,0.45);
    transition:filter .15s, transform .1s;
  }
  .nav-add svg{width:22px;height:22px;}
  .nav-add:hover{filter:brightness(1.1);}
  .nav-add:active{transform:scale(0.94);}

  /* ---- pantalla de cuenta ---- */
  .account-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:6px;
  }
  .account-avatar{
    width:52px;height:52px;
    border-radius:var(--radius-pill);
    background:linear-gradient(140deg, var(--brand) 0%, #7A0C18 100%);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
    font-weight:700;
    flex-shrink:0;
  }
  .account-name{
    font-size:17px;
    font-weight:600;
    letter-spacing:-0.01em;
    overflow-wrap:anywhere;
  }
  .account-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}