/* Styles for the mini games behind the AppBar gamepad button. Loaded globally from
   Components/App.razor; the games themselves bring no stylesheet of their own. */

/* ---------------------------------------------------------------------------------------------
   Games (the mini games behind the AppBar gamepad button). The wrapper fixes the aspect ratio
   of the playing field and the canvas fills it; the game letterboxes its logical field inside the
   canvas, so hit-testing stays exact at any size and DPR. touch-action: none hands every touch
   gesture to the game instead of scrolling the dialog; the canvas is focusable (tabindex) so the
   keyboard reaches the game only while it has focus. */
.nlgame-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: calc(100vh - 240px);
    max-height: calc(100dvh - 240px);
    min-height: 240px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.nlgame-wrapper.nlgame-aspect-4-3 { aspect-ratio: 4 / 3; }
.nlgame-wrapper.nlgame-aspect-20-17 { aspect-ratio: 20 / 17; }

.nlgame-wrapper canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    outline: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.nlgame-wrapper canvas:focus-visible {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

/* Best-score list in the dialog side cards. */
.nlgame-scores {
    list-style: none;
    margin: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.nlgame-scores li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

.nlgame-scores li span:last-child {
    font-weight: 600;
}

/* Keyboard reference table in the "How to play" card. */
.nlgame-keys {
    border-collapse: collapse;
    width: 100%;
}

.nlgame-keys td {
    padding: 2px 4px;
    vertical-align: top;
}

.nlgame-keys kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.8em;
    text-align: center;
    line-height: 1.5;
}

/* Phones held upright: the field gets small, so a rotate hint appears under the canvas. */
.nlgame-portrait-hint {
    display: none;
}

@media (max-width: 599.98px) and (orientation: portrait) {
    .nlgame-portrait-hint {
        display: block;
    }
}

/* Desktop: the information cards sit left of the field; on phones and tablets the field comes
   first and the cards stack below it. */
@media (min-width: 960px) {
    .nlgame-side {
        order: -1;
    }
}

/* Phones: the full-screen dialog gives the field the whole width; the height cap above would
   otherwise fight the aspect ratio on short viewports. */
@media (max-width: 599.98px) {
    .nlgame-wrapper {
        max-height: 70vh;
        max-height: 70dvh;
    }
}