.sktv * , .sktv *::before, .sktv *::after { box-sizing: border-box; }

.sktv-status {
    font-size: 0.85rem;
    color: #aaa;
    min-height: 1.2em;
    margin-bottom: 0.75rem;
}

.sktv-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 4 / 3;
    background: #000;
    border: 1px solid #333;
}

/* SDL's emscripten backend briefly shrinks the canvas to 1x1 to probe
   whether CSS is sizing it externally, then reads the CSS size back to
   decide the real resolution. If height here were "auto" (derived from
   the canvas's own width/height attributes), that probe would catch it
   mid-1x1 and report back a square size, which SDL then adopts —
   ignoring -resolution entirely. Deriving height from the wrap's own
   aspect-ratio instead keeps it stable regardless of the canvas's
   current attributes. */
.sktv-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Chromium's UA stylesheet gives :fullscreen elements width/height:100%
   as `!important`, which by spec outranks even an `!important` author
   rule, so this wrap can never be sized to a screen-fitting 4:3 box
   directly — it's always stretched to the full (differently-shaped)
   screen no matter what width/height we give it here. Letterbox one
   level down instead: let the wrap fill the screen as the UA insists,
   and use object-fit on the canvas below — untouched by that UA rule,
   which only targets the :fullscreen element itself — to scale the
   canvas up to fill the screen while preserving its real aspect ratio,
   centered. (width:auto + max-width:100%, tried first, doesn't work
   either: those only ever shrink a replaced element, never grow one past
   its intrinsic size, so the 320x240 canvas stayed pinned at 320x240
   instead of scaling up.) */
.sktv-canvas-wrap:fullscreen,
.sktv-canvas-wrap:-webkit-full-screen {
    max-width: none;
}

.sktv-canvas-wrap:fullscreen .sktv-canvas,
.sktv-canvas-wrap:-webkit-full-screen .sktv-canvas {
    object-fit: contain;
}

.sktv-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.9);
    text-align: center;
    padding: 0 1rem;
}

.sktv-overlay p {
    font-size: 0.85rem;
    color: #ccc;
}

.sktv-btn {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    background: black;
    color: white;
    border: 1px solid white;
    cursor: pointer;
    transition: all 0.15s;
}

.sktv-btn:hover:not(:disabled) {
    background: var(--color-skannerz-green);
    border-color: var(--color-skannerz-green);
    color: black;
}

.sktv-btn:disabled {
    color: #666;
    border-color: #444;
    cursor: default;
}

.sktv-btn-primary {
    border-color: var(--color-skannerz-green);
    color: var(--color-skannerz-green);
}

.sktv-btn-primary:hover:not(:disabled) {
    background: var(--color-skannerz-green);
    color: black;
}

.sktv-progress-wrap {
    width: 200px;
    height: 6px;
    background: #333;
    overflow: hidden;
    display: none;
}

.sktv-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-skannerz-green);
    transition: width 0.2s;
}

.sktv-log {
    max-width: 800px;
    width: 100%;
    margin-top: 0.75rem;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #e05050;
    font-family: monospace;
    font-size: 0.72rem;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.4rem 0.5rem;
    white-space: pre-wrap;
    word-break: break-all;
    display: none;
}

.sktv-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.sktv-keymap {
    max-width: 800px;
    width: 100%;
    margin-top: 1rem;
    font-size: 0.78rem;
    color: #888;
    border-collapse: collapse;
}

.sktv-keymap td {
    padding: 0.25rem 0.6rem;
    border-bottom: 1px solid #222;
}

.sktv-keymap td:first-child {
    font-weight: 600;
    color: #bbb;
}

.sktv-km-section {
    color: var(--color-skannerz-green) !important;
    padding-top: 0.75rem !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}