/* Compact video chrome for phones and tablets; 44px effective touch areas. */
@media (max-width:1024px), (hover:none) and (pointer:coarse) {
  .hero .film-controls {bottom:12px;left:12px;right:12px;gap:8px}
  .hero .film-controls button {position:relative;min-width:36px;min-height:36px;padding:8px;gap:6px}
  .hero .film-controls .film-sound {min-height:36px;padding:8px 11px;font-size:11px;line-height:18px}
  .hero .film-controls .video-icon {width:18px;height:18px}
  .hero .film-controls button::after {content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;min-width:44px;min-height:44px}
  .hero .film-caption {bottom:58px}
  .hero .film-replay {min-height:40px;padding:10px 16px;font-size:12px;gap:7px}
  .hero .film-replay svg {width:18px;height:18px}
}
@media (max-width:600px) {
  .hero .film-controls {bottom:10px;left:10px;right:10px;gap:12px}
  .hero .film-controls button {min-width:32px;min-height:32px;padding:7px;gap:5px}
  .hero .film-controls .film-sound {min-height:32px;padding:7px 9px;font-size:10px;line-height:16px}
  .hero .film-controls .video-icon {width:16px;height:16px}
  .hero .film-caption {bottom:54px}
  .hero .film-replay {min-height:36px;padding:8px 13px;font-size:11px}
}