.orientation-hint {
    position: fixed;
    z-index: 20;
    left: max(16px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding-left: 8px;
    color: var(--signal-ink, #1c1b1a);
    background: var(--signal-ground, #fff);
    font: 500 11px/1.4 "JetBrains Mono", monospace;
    letter-spacing: .01em;
}
.orientation-hint[hidden] { display: none !important; }
.orientation-hint-icon { flex-shrink: 0; overflow: visible; }
.orientation-hint-phone {
    transform-origin: 16px 16px;
    animation: suggest-landscape 1.8s cubic-bezier(.16, 1, .3, 1) 2;
}
.orientation-hint button {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
.orientation-hint button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.orientation-hint button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
body[data-paired-player] .orientation-hint {
    top: max(16px, env(safe-area-inset-top));
    bottom: auto;
    max-width: calc(100% - 88px);
}
body[data-paired-player]:has(#av-retry:not([hidden])) .orientation-hint { top: max(76px, calc(env(safe-area-inset-top) + 60px)); }
@keyframes suggest-landscape {
    0%, 15%, 100% { transform: rotate(0); }
    45%, 75% { transform: rotate(-90deg); }
}
@media not all and (max-width: 600px) and (orientation: portrait) and (pointer: coarse) {
    .orientation-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .orientation-hint-phone { animation: none; }
}