.video-control-strip {
  position: absolute;
  z-index: 2;
  inset: auto auto max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 4px 6px;
  border-radius: 8px;
  background: #12070cb8;
}

.video-control-strip[hidden], .video-control-strip [hidden] { display: none; }
.video-utilities { display: flex; gap: 4px; }

.video-control-strip button {
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.video-control-strip button:focus-visible {
  outline: 2px solid #fff0ce;
  outline-offset: 3px;
}

.video-skip {
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid #ffb198;
  border-right-color: #791b14;
  border-bottom-color: #63140e;
  background: linear-gradient(#e6553b, #c83025);
  box-shadow: 0 3px #72190f;
  color: #fff2d8;
  font: 400 clamp(12px, 1.5vw, 17px)/1.1 LegendsMetal, Arial, sans-serif;
}

.video-control-strip .video-utility {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #08101c66;
  color: #fff;
}

.video-utility svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-utility :is(.play-mark, .speaker-mark) { fill: currentColor; stroke: none; }
.video-utility[data-active="false"] :is(.play-mark, .sound-slash),
.video-utility[data-active="true"] :is(.pause-mark, .sound-waves) { display: none; }
.video-utility .sound-slash { stroke-width: 2.4; filter: drop-shadow(0 0 1px #08101c); }
.video-sound-hint { color: #fff5ee; font: 600 clamp(11px, 1.8vw, 14px)/1.15 Arial, sans-serif; }

.video-rotate {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #fff5;
  border-radius: 12px;
  background: #10070dc2;
  color: #fff5ee;
  font: 600 clamp(14px, 4vw, 18px)/1.2 Arial, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

.video-rotate[hidden] { display: none; }
.video-rotate svg { width: 30px; height: 30px; }