@font-face { font-family: ControllerTojo; src: url("../../fonts/TheTojoCaptioner-Regular.ttf") format("truetype"); font-display: swap; }
[data-controller-focus] { outline: 3px solid #c9a227 !important; outline-offset: 4px; }
.controller-hint {
    position: fixed; left: 18px; bottom: 18px; z-index: 10002;
    max-width: min(580px, calc(100vw - 36px)); padding: 9px 12px;
    border: 1px solid #555; border-left: 3px solid #c9a227;
    background: #111; color: #ccc; font: normal 14px/1.4 ControllerTojo, sans-serif;
    pointer-events: none;
}
.controller-hint[hidden] { display: none; }
.controller-pause {
    position: fixed; inset: 0; z-index: 9999; background: #000c;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font: normal 24px ControllerTojo, sans-serif;
}
.controller-pause > div { width: min(430px, 90vw); padding: 30px; border: 2px solid #777; background: #111; text-align: center; }
.controller-pause h2 { margin: 0 0 24px; font: normal 38px ControllerTojo, sans-serif; letter-spacing: 3px; }
.controller-pause button { display: block; width: 100%; margin-top: 14px; padding: 13px; color: #fff; background: #181818; border: 2px solid #555; border-radius: 0; font: inherit; cursor: pointer; }
.controller-pause button:hover, .controller-pause button:focus { color: #111; background: #fff; border-color: #fff; }
@media (max-width: 1050px) { .controller-hint { bottom: 242px; max-width: 350px; } }

/* One hard image cut and a fade, without repeated strobing. */
.controller-entrance {
    position: fixed; inset: 0; z-index: 2147483647;
    background: #fff; pointer-events: none;
    animation: controller-thunder 1.1s linear both;
}
.controller-entrance img { display: block; width: 100%; height: 100%; object-fit: fill; }
@keyframes controller-thunder {
    0%, 55% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .controller-entrance { animation: none; }
}