/* Monopoly Arena — spicy4tuna/clip.css
   The clip of the video (clip.js): without JavaScript a plain link to YouTube at that second; with it a
   facade in the site's manner (a flat tone block, the title, the time range and a red play square) that
   turns into the 16:9 player on a click. Colours and faces come from theme.css (fallbacks keep it whole). */

.clip { margin: 0; min-width: 0; }
.clip figcaption { margin: 6px 0 0; font: 400 14px/1.45 var(--text, system-ui, sans-serif); color: var(--ink-2, #4a4d52); }

/* no JavaScript yet: the link reads as a link */
.clip__open {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 15px/1.3 var(--text, system-ui, sans-serif); color: var(--ink, #0e0f10);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.clip__open:hover { color: var(--accent-2, #b81e23); }

/* the facade: one tone step on its ground, square corners like every button of the site */
.clip__frame { position: relative; min-width: 0; }
.clip__play {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0;
  padding: 6px 14px 6px 6px; border: 0; border-radius: var(--radius-btn, 0);
  background: var(--paper-2, #eeeeea); color: var(--ink, #0e0f10); text-align: left; cursor: pointer;
  font: inherit;
}
.clip__play:hover { background: var(--paper-3, #e2e2dc); }
.clip__play:active { transform: translateY(1px); }
.clip__play:focus-visible { outline: 2px solid var(--accent, #e0282e); outline-offset: 2px; }
.clip__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; background: var(--accent, #e0282e); color: var(--accent-ink, #fff);
}
.clip__play:hover .clip__icon { background: var(--accent-2, #b81e23); }
.clip__icon svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.clip__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clip__title { font: 600 15px/1.25 var(--text, system-ui, sans-serif); }
.clip__range { font: 500 14px/1.2 var(--text, system-ui, sans-serif); color: var(--ink-2, #4a4d52); font-variant-numeric: tabular-nums; }

/* the player */
.clip__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--board-edge, #0e0f10); }
.clip__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* the credit line, and «Cerrar el vídeo» once it plays */
.clip__credit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 4px 0 0; font: 400 13px/1.4 var(--text, system-ui, sans-serif); color: var(--ink-2, #4a4d52); }
.clip__yt { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.clip__yt:hover { color: var(--ink, #0e0f10); }
.clip__close {
  display: inline-flex; align-items: center; min-height: 32px; margin-left: auto; padding: 0 10px; border: 0;
  border-radius: var(--radius-btn, 0); background: var(--paper-2, #eeeeea); color: var(--ink, #0e0f10);
  font: 600 13px/1 var(--text, system-ui, sans-serif); cursor: pointer;
}
.clip__close[hidden] { display: none; }
.clip__close:hover { background: var(--paper-3, #e2e2dc); }
@media (pointer: coarse) { .clip__yt, .clip__close { min-height: 44px; } }

@media (prefers-reduced-motion: no-preference) {
  .clip__play, .clip__icon, .clip__close { transition: background-color var(--t-hover, 180ms) var(--ease-out, ease-out), transform var(--t-press, 140ms) var(--ease-out, ease-out); }
}