/* VS duel — split-screen layout + central animation. Two panels fill the
   viewport so two students can play side by side on one shared touchscreen. */

/* ── Container + Arena shell ─────────────────────────────────────────────────
   .vs-arena is always flex-column: scoreboard bar on top, .vs-main below.
   A skin class (vs-skin-classic / vs-skin-school) on .vs-arena overrides
   colours, panel shapes and activity elements — no JS branching needed.     */
.vs-wrap  { height: 100%; min-height: 0; container-type: size; container-name: vs; }
.vs-arena { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── 3-column game area ──────────────────────────────────────────────────── */
.vs-main {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "s1 stage s2";
}
.vs-panel.vs-left  { grid-area: s1; }
.vs-panel.vs-right { grid-area: s2; }

/* ── Centre stage ────────────────────────────────────────────────────────── */
.vs-stage {
  grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: .4rem .6rem; text-align: center;
}
.vs-stage-canvas { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.vs-stage-canvas > * { width: 100%; height: 100%; }
.vs-anim-fallback { margin: auto; max-width: 18rem; padding: 1rem; color: #6c757d; font-size: .95rem; border: 2px dashed #ced4da; border-radius: .6rem; }
.vs-tug-label { font-weight: 800; font-size: clamp(1rem, 2cqw, 1.6rem); margin: 0 0 .1rem; transition: color .2s; }

/* ── Activity panels ─────────────────────────────────────────────────────── */
.vs-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vs-body  { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: auto; padding: .5rem .75rem; }
.vs-q     { font-size: clamp(1.1rem, 2.4cqw, 1.8rem); font-weight: 600; text-align: center; margin-bottom: 1rem; }
.vs-done  { margin: auto; text-align: center; }
.vs-overlay { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Panel-level answer feedback */
.vs-body.vs-flash-ok { animation: vs-flash-ok .7s ease-out; }
.vs-body.vs-flash-no { animation: vs-flash-no .7s ease-out; }
@keyframes vs-flash-ok { from { background: rgba(25,135,84,.28); } to { background: transparent; } }
@keyframes vs-flash-no { from { background: rgba(220,53,69,.28); } to { background: transparent; } }
.rq-opt.rq-picked { outline: 4px solid #ffc107; outline-offset: -2px; }

/* ══════════════════════════════════════════════════════════════════════════
   SCOREBOARD BAR  —  always present, skins override colours below
   ══════════════════════════════════════════════════════════════════════════ */
.vss-bar {
  display: flex; flex-shrink: 0;
  height: 68px; z-index: 10;
}
/* Left + right team halves */
.vss-team {
  flex: 1; display: flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; overflow: hidden;
}
.vss-right { flex-direction: row-reverse; }
.vss-info   { flex: 1; min-width: 0; }
.vss-info-r { text-align: right; }
.vss-label  { font-size: .5rem; font-weight: 700; letter-spacing: .18em; color: rgba(255,255,255,.65); text-transform: uppercase; }
.vss-name   { font-size: clamp(.78rem, 1.5cqw, 1.15rem); font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vss-score  { font-size: clamp(1.5rem, 3cqw, 2.2rem); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; flex-shrink: 0; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
/* Progress bar inside bar */
.vs-prog     { height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); margin-top: .3rem; overflow: hidden; }
.vs-prog-bar { height: 100%; width: 0; background: rgba(255,255,255,.75); transition: width .4s ease; }
/* Centred VS badge — lives in .vss-mid, a fixed-width flex child (not absolute) */
.vss-mid {
  width: 68px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.vss-badge {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .9rem; letter-spacing: .04em;
  border: 3px solid rgba(255,255,255,.9);
}
/* Avatar in bar */
.vs-avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.5); flex-shrink: 0; }
.vs-avatar-init { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.22); font-size: 1rem; font-weight: 800; color: #fff; }
.vss-av { width: 2.6rem; height: 2.6rem; }

/* ══════════════════════════════════════════════════════════════════════════
   SKIN: CLÁSICO
   ══════════════════════════════════════════════════════════════════════════ */
.vs-skin-classic .vss-left  { background: #1565c0; }
.vs-skin-classic .vss-right { background: #c62828; }
.vs-skin-classic .vss-mid   { background: #1565c0; background: linear-gradient(90deg, #1565c0, #c62828); }
.vs-skin-classic .vss-badge { background: #fff; color: #374151; box-shadow: 0 2px 8px rgba(0,0,0,.2); border-color: #dee2e6; }
.vs-skin-classic .vs-stage  { border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; }

/* SKIN: COLEGIOS — rules live in themes/colegios/skin.css, loaded by applySkin() */

/* ══════════════════════════════════════════════════════════════════════════
   KAHOOT GRID INSIDE VS PANELS
   Override live.css projector sizes (padding:2rem, font-size:1.5rem) so
   choice options fit inside the narrow side panels at any orientation.
   ══════════════════════════════════════════════════════════════════════════ */
.vs-body .ww-kahoot-grid { gap: .4rem; }
.vs-body .ww-kahoot-grid .btn {
  font-size: clamp(.7rem, 2.4cqw, 1rem);
  padding: .4em .45em;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTRAIT / NARROW
   ══════════════════════════════════════════════════════════════════════════ */
@container vs (max-aspect-ratio: 5/4) {
  /* Barra compacta — libera espacio vertical para los paneles */
  .vss-bar   { height: 46px; }
  .vss-label { display: none; }
  .vss-badge { width: 36px; height: 36px; font-size: .72rem; }
  .vss-mid   { width: 50px; }
  .vs-avatar.vss-av { width: 1.9rem; height: 1.9rem; }
  .vss-score { font-size: clamp(1rem, 2.2cqw, 1.5rem); }
  .vss-name  { font-size: clamp(.62rem, 1.2cqw, .88rem); }

  /* Grid: franja de animación arriba, dos paneles abajo */
  .vs-main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "stage stage" "s1 s2";
    grid-template-rows: 90px 1fr;
    align-content: stretch;
  }
  .vs-skin-classic .vs-stage { border: none; border-bottom: 1px solid #dee2e6; }
  .vs-body { padding: .3rem .35rem; justify-content: flex-start; }
  .vs-q    { font-size: clamp(.85rem, 2cqw, 1.3rem); margin-bottom: .3rem; }

  /* Actividades dentro del panel — eliminar centrado vertical que oculta cabecera */
  .vs-body .ww-keypad-round   { justify-content: flex-start; gap: .3rem; }
  .vs-body .ww-keypad-q       { font-size: clamp(.85rem, 5vmin, 1.2rem); }
  .vs-body .ww-keypad-display { font-size: clamp(.8rem, 4vmin, .95rem); min-width: 4rem; }
  .vs-body .ww-key            { font-size: clamp(.65rem, 3vmin, .88rem); padding: .26rem 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARRERA TERMINADA — se cierran las calculadoras y la animación llena el centro
   ══════════════════════════════════════════════════════════════════════════ */
.vs-arena.vs-race-finished .vs-panel { display: none; }
.vs-arena.vs-race-finished .vs-main {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "stage" !important;
}
.vs-arena.vs-race-finished .vs-stage { animation: vs-stage-pop .45s ease-out; }
@keyframes vs-stage-pop { from { transform: scale(.85); opacity: .4; } to { transform: scale(1); opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════════
   TUG-OF-WAR SVG ANIMATION
   ══════════════════════════════════════════════════════════════════════════ */
.vs-tug-scene { width: 100%; height: 100%; }
.vs-tug-svg   { width: 100%; height: 100%; display: block; overflow: visible; }

.tug-ground    { stroke: rgba(0,0,0,.18); stroke-width: 3; stroke-linecap: round; }
.tug-pit       { fill: rgba(120,72,28,.28); }
.tug-centerline{ stroke: rgba(0,0,0,.22); stroke-width: 2; stroke-dasharray: 6 7; }
.tug-mark      { fill: none; stroke: rgba(0,0,0,.25); stroke-width: 2; stroke-linejoin: round; }

.tug-fig-left  { color: #0d6efd; }
.tug-fig-right { color: #dc3545; }
.tug-fig       { transform-box: fill-box; transform-origin: 50% 100%; animation: tug-strain 2.2s ease-in-out infinite; }
.tug-fig-right { animation-delay: -1.1s; }
.tug-limb  { stroke: currentColor; stroke-width: 13; stroke-linecap: round; fill: none; }
.tug-torso { stroke: currentColor; stroke-width: 26; stroke-linecap: round; }
.tug-head  { fill: currentColor; }
.tug-eye   { fill: #fff; }
.tug-hand  { fill: currentColor; }
.tug-shadow{ fill: rgba(0,0,0,.13); }

.tug-rope    { fill: none; stroke: #b9863b; stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 2px 1px rgba(0,0,0,.25)); }
.tug-knotball{ fill: #7a4e16; }
.tug-pole    { stroke: #555; stroke-width: 3; stroke-linecap: round; }
.tug-flag    { fill: #ffc107; stroke: #c79100; stroke-width: 1; }

@keyframes tug-strain { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(-7deg); } }

.vs-tug-scene.lead-left  .tug-fig-left,
.vs-tug-scene.lead-right .tug-fig-right { animation: none; transform: rotate(-12deg); }
.vs-tug-scene.lead-left  .tug-fig-right,
.vs-tug-scene.lead-right .tug-fig-left  { animation: none; transform: rotate(9deg); }

@keyframes tug-yank-l { 0%,100% { transform: translateX(0); } 45% { transform: translateX(-30px); } }
@keyframes tug-yank-r { 0%,100% { transform: translateX(0); } 45% { transform: translateX(30px); } }
.vs-tug-scene.pull-left  .tug-dynamic { animation: tug-yank-l .45s ease; }
.vs-tug-scene.pull-right .tug-dynamic { animation: tug-yank-r .45s ease; }

.tug-dust { opacity: 0; transform-box: fill-box; transform-origin: center; }
.tug-dust circle { fill: rgba(140,110,70,.55); }
@keyframes tug-puff { 0% { opacity: .7; transform: translateY(0) scale(.4); } 100% { opacity: 0; transform: translateY(-20px) scale(1.6); } }
.vs-tug-scene.pull-left  .tug-dust-left  { animation: tug-puff .5s ease-out; }
.vs-tug-scene.pull-right .tug-dust-right { animation: tug-puff .5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .tug-fig, .tug-dynamic, .tug-dust { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SETUP SCREEN — avatar upload + effect toggles
   ══════════════════════════════════════════════════════════════════════════ */
.vs-av-upload-wrap { display: flex; align-items: center; gap: .5rem; }
.vs-av-preview {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 2px dashed #ced4da; background: #f8f9fa;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vs-av-thumb { width: 100%; height: 100%; object-fit: cover; }
.vs-av-btn   { flex-shrink: 0; }

.vs-fx-panel { max-width: 420px; text-align: left; border: 1px solid #e9ecef; border-radius: .6rem; background: #f8f9fa; }
.vs-fx-panel > summary { cursor: pointer; padding: .55rem .9rem; font-weight: 600; list-style: none; }
.vs-fx-panel > summary::-webkit-details-marker { display: none; }
.vs-fx-grid  { padding: .2rem .9rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.vs-fx-row   { display: flex; align-items: center; gap: .7rem; cursor: pointer; margin: 0; }
.vs-fx-label { font-weight: 600; line-height: 1.15; }
.vs-fx-label small { font-weight: 400; }

/* ══════════════════════════════════════════════════════════════════════════
   VS ANIMATION PICKER (Presentación panel)
   ══════════════════════════════════════════════════════════════════════════ */
.vsanim-pick      { display: flex; align-items: center; justify-content: center; }
.vsanim-tile-body { padding: .55rem; text-align: center; line-height: 1.1; }
.vsanim-tile-body .bi { font-size: 1.7rem; }
.vsanim-preview   { height: 76px; width: 100%; overflow: hidden; pointer-events: none; }
.vsanim-preview svg { width: 100% !important; height: 100% !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RESULT SCREEN
   ══════════════════════════════════════════════════════════════════════════ */
.vs-result-screen {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 100%; height: 100%; padding: 1rem;
}
.vs-result-screen .vs-result { width: 100%; max-width: 640px; }