:root {
    --screen-scale: 3;
}

.player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 2rem;
    align-items: start;
}

.frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0.75rem;
    background: var(--color-bg-highlight);
    border: 1px solid var(--color-fg-muted);
    border-radius: 0.5rem;
}
canvas {
    display: block;
    width: calc(256px * var(--screen-scale));
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
    background: #000;
}
/* Laid over the canvas, inside the frame's padding, until the first gesture. */
.prompt {
    position: absolute;
    inset: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--color-fg);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}
.prompt[hidden] {
    display: none;
}
.status {
    color: var(--color-fg-subtle);
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
}

.box img {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-fg-muted);
    border-radius: 0.5rem;
}

@media (max-width: 64rem) {
    .player {
        grid-template-columns: minmax(0, 1fr);
    }
    .box {
        max-width: 20rem;
    }
}

.pad {
    display: none;
}
.pad button {
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-fg);
    background: var(--color-bg-highlight);
    border: 1px solid var(--color-fg-muted);
    -webkit-tap-highlight-color: transparent;
}
.pad button.is-down {
    color: var(--color-bg);
    background: var(--color-primary);
}
.pad-dpad {
    display: grid;
    grid-template-columns: repeat(3, 3rem);
    grid-template-rows: repeat(3, 3rem);
}
.pad-dpad button {
    font-size: 1rem;
}
.pad-dpad [data-button="UP"] {
    grid-area: 1 / 2;
    border-radius: 0.5rem 0.5rem 0 0;
}
.pad-dpad [data-button="LEFT"] {
    grid-area: 2 / 1;
    border-radius: 0.5rem 0 0 0.5rem;
}
.pad-dpad [data-button="RIGHT"] {
    grid-area: 2 / 3;
    border-radius: 0 0.5rem 0.5rem 0;
}
.pad-dpad [data-button="DOWN"] {
    grid-area: 3 / 2;
    border-radius: 0 0 0.5rem 0.5rem;
}
.pad-hub {
    grid-area: 2 / 2;
    background: var(--color-bg-highlight);
    border-block: 1px solid var(--color-fg-muted);
}
.pad-buttons,
.pad-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pad-system {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pad-system button {
    width: 3.5rem;
    height: 3rem;
    border-radius: 999px;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
}
.pad-action button {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    font-size: 1.125rem;
    color: var(--color-bg);
    background: var(--color-primary);
}
.pad-action button.is-down {
    background: var(--color-accent);
}

/* A touch screen: the canvas takes the full content width and the pad sits
   under it. Fingers never scroll, zoom, select, or call a menu on the pad. */
@media (pointer: coarse) {
    .frame {
        display: block;
        padding: 0.75rem 0;
    }
    .prompt {
        inset: 0.75rem 0;
    }
    .pad {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    .pad-dpad,
    .pad-buttons {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
}

/* A touch screen on its side: the D-pad left of the screen, the other buttons
   right of it, all in one viewport height. The pad's own box drops out so its
   two halves take the grid's side columns. */
@media (pointer: coarse) and (orientation: landscape) {
    .screen {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-areas:
            "dpad frame buttons"
            ". status .";
        align-items: center;
        justify-content: center;
        column-gap: 1.5rem;
    }
    .frame {
        grid-area: frame;
    }
    .status {
        grid-area: status;
    }
    .pad {
        display: contents;
    }
    .pad-dpad {
        grid-area: dpad;
    }
    .pad-buttons {
        grid-area: buttons;
        flex-direction: column;
        gap: 1.5rem;
    }
    .pad-system {
        flex-direction: row;
    }
    /* The frame's padding and border and the status line below it take the
       rest of the height; the canvas keeps its 8:7 shape from its size
       attributes. */
    canvas {
        width: auto;
        max-width: none;
        height: calc(100vh - 4rem);
        height: calc(100dvh - 4rem);
    }
}