/* CLANKER COCK inline player — modern, contained, no overhang.
   Frame: the card supplies the border; the player fills it edge to edge. */

.cc-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  --cc-accent: #ffbf3a;
  --cc-fg: #f4f4f6;
}
.cc-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.cc-player:focus-visible { box-shadow: inset 0 0 0 2px var(--cc-accent); }

/* gradient shade under the controls */
.cc-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 26%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 30%);
  opacity: 1;
  transition: opacity .25s ease;
}

/* big centered play / replay */
.cc-big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  padding: 0;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 10, 12, .62);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .18s ease, background .18s ease, opacity .18s ease, border-color .18s ease;
}
.cc-big svg { width: 30px; height: 30px; fill: currentColor; }
.cc-big svg:last-child { display: none; }
.cc-big:hover { background: var(--cc-accent); color: #1a1200; border-color: var(--cc-accent); transform: translate(-50%, -50%) scale(1.06); }
.cc-player[data-state="playing"] .cc-big,
.cc-player[data-state="loading"] .cc-big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }
.cc-player[data-state="ended"] .cc-big svg:first-child { display: none; }
.cc-player[data-state="ended"] .cc-big svg:last-child { display: block; }

/* buffering spinner */
.cc-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: var(--cc-accent);
  opacity: 0;
  pointer-events: none;
  animation: cc-spin .8s linear infinite;
  transition: opacity .2s ease;
}
.cc-player[data-state="loading"] .cc-spinner { opacity: 1; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* control bar */
.cc-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 10px 8px;
  color: var(--cc-fg);
  transition: opacity .25s ease, transform .25s ease;
}
.cc-player[data-state="playing"]:not(.cc-active) .cc-bar { opacity: 0; transform: translateY(6px); pointer-events: none; }
.cc-player[data-state="playing"]:not(.cc-active) .cc-shade { opacity: 0; }
.cc-player[data-state="playing"]:not(.cc-active) { cursor: none; }

.cc-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.cc-grow { flex: 1; }
.cc-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cc-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cc-btn:hover { background: rgba(255, 255, 255, .12); }
.cc-btn:focus-visible { box-shadow: 0 0 0 2px var(--cc-accent); }
.cc-btn svg { width: 20px; height: 20px; fill: currentColor; }
.cc-btn svg + svg { display: none; }
.cc-player[data-state="playing"] .cc-play svg:first-child,
.cc-player[data-state="loading"] .cc-play svg:first-child { display: none; }
.cc-player[data-state="playing"] .cc-play svg + svg,
.cc-player[data-state="loading"] .cc-play svg + svg { display: block; }
.cc-mute.is-muted svg:first-child { display: none; }
.cc-mute.is-muted svg + svg { display: block; }
.cc-player.is-fs .cc-fs svg:first-child { display: none; }
.cc-player.is-fs .cc-fs svg + svg { display: block; }

.cc-time {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .01em;
  white-space: nowrap;
}
.cc-sep { margin: 0 5px; opacity: .5; }

/* seek bar */
.cc-seek {
  position: relative;
  height: 18px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.cc-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
  transition: height .15s ease;
}
.cc-seek:hover .cc-track, .cc-scrubbing .cc-track { height: 6px; }
.cc-buffered, .cc-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
}
.cc-buffered { background: rgba(255, 255, 255, .28); }
.cc-progress { background: linear-gradient(90deg, #ffd36e, var(--cc-accent)); }
.cc-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--cc-accent);
  box-shadow: 0 0 0 3px rgba(255, 191, 58, .25), 0 2px 8px rgba(0, 0, 0, .5);
  transform: scale(0);
  transition: transform .15s ease;
  pointer-events: none;
}
.cc-seek:hover .cc-knob, .cc-scrubbing .cc-knob { transform: scale(1); }
.cc-tip {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translate(-50%, -4px);
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(10, 10, 12, .9);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.cc-seek:hover .cc-tip, .cc-scrubbing .cc-tip { opacity: 1; }

/* browsers without aspect-ratio: let the video's own size drive the frame */
@supports not (aspect-ratio: 1 / 1) {
  .cc-player { aspect-ratio: auto; }
  .cc-player video { height: auto; }
}

/* fullscreen */
.cc-player.is-fs { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.cc-player.is-fs .cc-bar { padding: 0 24px 18px; }

/* error */
.cc-player[data-state="error"]::after {
  content: "This clip could not be loaded.";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  background: rgba(0, 0, 0, .6);
}
.cc-player[data-state="error"] .cc-big { display: none; }

/* touch: keep controls visible a bit larger */
@media (hover: none) {
  .cc-btn { width: 40px; height: 40px; }
  .cc-seek { height: 22px; }
  .cc-knob { transform: scale(1); }
  .cc-player[data-state="playing"]:not(.cc-active) { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-big, .cc-bar, .cc-shade, .cc-knob, .cc-track { transition: none; }
}