/* Shared by the rewritten public pages (home, tournaments). Loaded after the inline base CSS: no html-body prefixes needed. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* trailer: a clean frame, the poster is the trailer's own title card; the iframe replaces it on play */
.trailer { margin: 0; }
.trailer-face { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #050810; cursor: pointer; box-shadow: 0 0 0 1px #3fa9ff26, 0 28px 60px -28px #000; }
.trailer-face img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, filter .4s ease; }
.trailer-face:hover img { transform: scale(1.02); filter: brightness(1.08); }
/* a round play button over the poster, no words (owner, 2026-10-09) */
.trailer-play { position: absolute; left: 20px; bottom: 20px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(8 11 18 / .62); border: 1.5px solid #e9c46f; backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease; }
.trailer-play svg { color: #e9c46f; margin-left: 4px; }
.trailer-face:hover .trailer-play, .trailer-face:focus-visible .trailer-play { transform: scale(1.06); }
.trailer-face:hover .trailer-play svg, .trailer-face:focus-visible .trailer-play svg { color: #10141b; }
.trailer-face:hover .trailer-play, .trailer-face:focus-visible .trailer-play { background: #e9c46f; color: #10141b; }
.trailer-face:focus-visible { outline: 2px solid #e9c46f; outline-offset: 4px; }
.trailer-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: #000; }
.trailer figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font: 13px/1.4 Archivo, sans-serif; color: #9aa4b5; }
.trailer figcaption b { color: #eef1f6; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .trailer-face img, .trailer-play { transition: none; } }

/* phones: the footer carries "Need help?" on every page, so the floating copy no longer covers content */
@media (max-width: 760px) { #help-fab { display: none; } }