/* Fútbol Chapas — the big screen (.ch) and the phone's table (.chp).
   A games table under a warm lamp: grass green, tin and wood over the stage's
   navy, with the party gold for what matters. */

.ch, .chp {
  --p-color-chapas-grass: #2f9a4f;
  --p-color-chapas-gold: #ffd23f;
  --p-color-chapas-good: #7dffa9;
  --p-color-chapas-bad: #ff8f8f;
  --p-color-chapas-panel: rgba(16, 12, 34, 0.86);
}

/* ================================================================ big screen */

/* --uw / --uh: 1% of the width / height of the largest 16:9 picture that fits
   the viewport (see bowling.css). */
.ch {
  --uw: min(1vw, 1.778vh); --uh: min(1vh, 0.5625vw);
  flex: 1; position: relative; min-height: 0; overflow: hidden;
}
.ch__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ch__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 24, 0.62) 0%, rgba(8, 8, 24, 0) 22%);
}
.ch[data-phase="presentation"] .ch__shade, .ch[data-phase="intro"] .ch__shade, .ch[data-phase="results"] .ch__shade { background: rgba(8, 8, 24, 0.6); }

.ch__turn {
  position: absolute; top: calc(2.4 * var(--uh)); left: calc(2.2 * var(--uw));
  display: flex; flex-direction: column; gap: calc(1 * var(--uh)); max-width: calc(46 * var(--uw));
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.ch__title { font-size: calc(3.4 * var(--uw)); letter-spacing: 0.02em; }
.ch__who { display: flex; align-items: center; gap: calc(1 * var(--uw)); font-size: calc(1.9 * var(--uw)); }
.ch__who .team-chip { font-size: calc(1.9 * var(--uw)); box-shadow: 0 0.4vh 1.4vh rgba(0, 0, 0, 0.5); }
.ch__label { color: var(--p-color-text-secondary); font-weight: var(--p-font-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; font-size: calc(1.2 * var(--uw)); }
.ch__count { font-family: var(--p-font-family-display); color: var(--p-color-chapas-gold); font-size: calc(1.9 * var(--uw)); white-space: nowrap; }
.ch__count small { font-family: var(--p-font-family-body); font-size: 0.6em; color: var(--p-color-text-secondary); }
.ch__timebar { width: calc(30 * var(--uw)); height: calc(1.1 * var(--uh)); }
.ch__timebar .mg__timebar-fill { background: linear-gradient(90deg, var(--p-color-chapas-good), var(--p-color-chapas-gold)); }
.ch__hint { font-size: calc(1.45 * var(--uw)); }

/* whose goal is whose: a tag behind every net */
.ch__tags { position: absolute; inset: 0; pointer-events: none; }
.ch__tags[hidden] { display: none; }
.ch-tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: calc(0.5 * var(--uw));
  padding: calc(0.4 * var(--uh)) calc(1 * var(--uw)) calc(0.4 * var(--uh)) calc(0.5 * var(--uw));
  font-size: calc(1.35 * var(--uw)); font-weight: var(--p-font-weight-bold); white-space: nowrap;
  background: var(--p-color-chapas-panel); border-radius: var(--p-border-radius-full);
  border: calc(0.22 * var(--uw)) solid var(--team-color);
  box-shadow: 0 0.4vh 1.4vh rgba(0, 0, 0, 0.5);
  will-change: transform;
}
.ch-tag__name { max-width: calc(16 * var(--uw)); overflow: hidden; text-overflow: ellipsis; }

/* the score */
.ch__board {
  position: absolute; top: calc(2.4 * var(--uh)); right: calc(2.2 * var(--uw));
  display: flex; flex-direction: column; gap: calc(0.5 * var(--uh));
  padding: calc(1.2 * var(--uh)) calc(1 * var(--uw));
  background: var(--p-color-chapas-panel); border-radius: var(--p-border-radius-300);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: calc(1.45 * var(--uw));
}
.ch__board[hidden] { display: none; }
.ch-row {
  display: grid; grid-template-columns: minmax(0, calc(16 * var(--uw))) repeat(2, calc(3.4 * var(--uw)));
  align-items: center; gap: calc(0.5 * var(--uw));
  padding: calc(0.4 * var(--uh)) calc(0.6 * var(--uw)); border-radius: var(--p-border-radius-200);
  border-left: calc(0.5 * var(--uw)) solid var(--team-color);
}
.ch-row--head { border-left-color: transparent; padding-top: 0; padding-bottom: 0; text-align: center; font-size: 0.9em; }
.ch-row.is-on { background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px var(--p-color-chapas-gold); }
.ch-row__team { display: flex; align-items: center; gap: calc(0.6 * var(--uw)); min-width: 0; font-weight: var(--p-font-weight-bold); }
.ch-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-row__n { text-align: center; font-family: var(--p-font-family-display); font-size: calc(1.7 * var(--uw)); }
.ch-row__n.is-for { color: var(--p-color-chapas-good); }
.ch-row__n.is-against { color: var(--p-color-chapas-bad); }

/* ¡GOOOL! */
.ch__flash {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; width: max-content; max-width: 96%;
  animation: ch-flash 3s var(--p-motion-ease) forwards;
}
.ch__flash[hidden] { display: none; }
.ch.is-paused .ch__flash, .ch.is-paused .ch-card, .ch.is-paused .ch-results__row { animation-play-state: paused; }
.ch__flash-big {
  font-size: calc(12 * var(--uw)); line-height: 1; white-space: nowrap; color: var(--p-color-chapas-gold);
  -webkit-text-stroke: calc(0.28 * var(--uw)) #12141f; paint-order: stroke fill;
  text-shadow: 0 calc(0.55 * var(--uw)) 0 #12141f, 0 0 calc(5 * var(--uw)) rgba(255, 210, 63, 0.7);
}
.ch__flash[data-kind="own"] .ch__flash-big { color: var(--p-color-chapas-bad); font-size: calc(9 * var(--uw)); text-shadow: 0 calc(0.55 * var(--uw)) 0 #12141f; }
.ch__flash-sub {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: calc(0.7 * var(--uw));
  margin-top: calc(1.6 * var(--uh)); padding: calc(0.8 * var(--uh)) calc(1.8 * var(--uw));
  font-size: calc(2 * var(--uw)); font-weight: var(--p-font-weight-bold);
  background: var(--p-color-chapas-panel); border-radius: var(--p-border-radius-full);
}
.ch__flash-sub .team-chip { font-size: calc(1.8 * var(--uw)); }
@keyframes ch-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
  8% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(3deg); }
  14% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}

/* cards: the rules, the results */
.ch__center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(14 * var(--uh)) calc(5 * var(--uw)) calc(6 * var(--uh)); pointer-events: none;
}
.ch-card {
  display: flex; flex-direction: column; gap: calc(2.2 * var(--uh)); max-width: calc(78 * var(--uw));
  padding: calc(3.4 * var(--uh)) calc(3 * var(--uw));
  background: var(--p-color-chapas-panel); border-radius: var(--p-border-radius-400);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.5);
  animation: ch-rise 0.5s var(--p-motion-ease-bounce) backwards;
}
.ch-card__lead { font-size: calc(2.1 * var(--uw)); line-height: 1.4; text-align: center; }
.ch-card__lead .team-chip { font-size: calc(1.6 * var(--uw)); vertical-align: middle; }
.ch-rules { display: grid; grid-template-columns: auto 1fr; gap: calc(1.4 * var(--uh)) calc(1.6 * var(--uw)); align-items: center; font-size: calc(1.9 * var(--uw)); }
.ch-rules__pts { font-family: var(--p-font-family-display); font-size: calc(2.3 * var(--uw)); text-align: right; white-space: nowrap; }
.ch-rules__pts.is-good { color: var(--p-color-chapas-good); }
.ch-rules__pts.is-bad { color: var(--p-color-chapas-bad); }
.ch-results { display: flex; flex-direction: column; gap: calc(1.1 * var(--uh)); width: min(100%, calc(74 * var(--uw))); }
.ch-results__row {
  display: grid; grid-template-columns: calc(5 * var(--uw)) minmax(0, 1fr) calc(13 * var(--uw)) calc(13 * var(--uw)) calc(13 * var(--uw));
  align-items: center; gap: calc(1 * var(--uw));
  padding: calc(1.2 * var(--uh)) calc(1.6 * var(--uw));
  background: var(--p-color-chapas-panel); border-radius: var(--p-border-radius-300);
  border-left: calc(0.8 * var(--uw)) solid var(--team-color);
  font-size: calc(2 * var(--uw));
  animation: ch-rise 0.5s var(--p-motion-ease-bounce) backwards;
}
.ch-results__row--head { background: none; border-left-color: transparent; padding-top: 0; padding-bottom: 0; font-size: calc(1.4 * var(--uw)); color: var(--p-color-text-secondary); animation: none; }
.ch-results__row--head span:nth-child(n+3) { text-align: center; }
.ch-results__row--head span:last-child { text-align: right; }
.ch-results__rank { font-size: calc(2.6 * var(--uw)); color: var(--p-color-chapas-gold); }
.ch-results__team { display: flex; align-items: center; gap: calc(0.8 * var(--uw)); min-width: 0; font-weight: var(--p-font-weight-bold); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-results__n { text-align: center; font-family: var(--p-font-family-display); }
.ch-results__pts { text-align: right; font-size: calc(2.6 * var(--uw)); white-space: nowrap; color: var(--p-color-chapas-good); }
.ch-results__pts.is-bad { color: var(--p-color-chapas-bad); }
@keyframes ch-rise { from { opacity: 0; transform: translateY(4vh) scale(0.94); } }

/* ================================================================ phone */

.chp { flex: 1; display: flex; flex-direction: column; gap: var(--p-space-300); min-height: 0; }
.chp__head { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-300); }
.chp__role { font-family: var(--p-font-family-display); font-size: 1.15rem; line-height: 1.15; }
.chp__count {
  flex-shrink: 0; padding: 2px 12px; border-radius: var(--p-border-radius-full);
  background: var(--p-color-chapas-gold); color: #12141f; font-weight: var(--p-font-weight-bold); white-space: nowrap;
}
/* the table is the panel: it takes all the phone has left under the status line */
.chp__table-wrap { position: relative; flex: 1 1 0; min-height: 130px; display: flex; justify-content: center; }
.chp__table {
  width: 100%; height: 100%; display: block; border-radius: var(--p-border-radius-400);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background: #15132c;
}
.chp__table.is-locked { cursor: default; }
.chp__hint { text-align: center; min-height: 1.3em; color: var(--p-color-text-secondary); }
.chp__hint:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ch__flash { animation-name: ch-flash-plain; }
  .ch-card, .ch-results__row { animation: none; }
  @keyframes ch-flash-plain { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
}