:root {

    --page-bg: #20251f;

    --device-light: #aaa99d;
    --device-mid: #85867d;
    --device-dark: #555850;

    --device-print: #4b4e48;

    --lcd: #b6c58a;
    --lcd-dark: #1f281b;
    
    --button-light: #555a54;
    --button-dark: #292d29;

}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {

    width: 100%;
    height: 100vh;
    height: 100dvh;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 10px;

    overflow: hidden;


    background:
        radial-gradient(
            circle at center,
            #3b4138 0%,
            var(--page-bg) 70%
        );


    font-family:
        "Courier New",
        Courier,
        monospace;

}


body {
    padding: 24px;
}


/* =========================================================
   GAME SHELL
   ========================================================= */

.game-shell {

    width: 340px;
    min-width: 340px;
    max-width: 340px;

    flex:
        0
        0
        340px;
}


/* =========================================================
   DEVICE
   ========================================================= */

.game-device {

    width: 340px;

    padding:
        13px
        10px
        18px;

    border:
        3px solid
        var(--device-dark);

    border-radius: 24px;


    background:
        linear-gradient(
            145deg,
            var(--device-light),
            var(--device-mid)
        );


    box-shadow:

        0 18px 40px
        rgba(
            0,
            0,
            0,
            0.45
        ),

        inset 2px 2px 3px
        rgba(
            255,
            255,
            255,
            0.3
        ),

        inset -3px -3px 4px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


/* =========================================================
   DEVICE BRANDING
   ========================================================= */

.device-branding {

    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 7px;

    margin:
        0
        6px
        7px;

    color:
        var(--device-print);


    text-shadow:
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.22
        );

}


.manufacturer {

    color: inherit;

    font-size: 0.48rem;

    font-weight: bold;

    letter-spacing: 0.05em;

    text-decoration: none;

    white-space: nowrap;

}


.manufacturer:hover {

    text-decoration: underline;

}


.game-mark {

    display: flex;

    align-items: baseline;

    gap: 6px;

    padding: 0;

    border: 0;

    background: none;

    color: inherit;

    font-family: inherit;

    cursor: pointer;

    white-space: nowrap;

}


.game-mark:hover .game-name {

    text-decoration: underline;

}


.game-name {

    font-size: 0.54rem;

    font-weight: bold;

    letter-spacing: 0.04em;

}


.version {

    font-size: 0.4rem;

    opacity: 0.75;

}


/* =========================================================
   LCD
   ========================================================= */

.lcd {

    position: relative;

    width: 100%;

    padding: 8px;

    border:
        5px solid
        #42483e;

    border-radius: 8px;

    background:
        var(--lcd);


    box-shadow:
        inset 0 0 16px
        rgba(
            35,
            45,
            30,
            0.3
        );

}


/* =========================================================
   LCD INFORMATION
   ========================================================= */

.lcd-info {

    min-height: 25px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 12px;

    margin-bottom: 5px;

    color:
        var(--lcd-dark);

    font-size: 0.61rem;

    font-weight: bold;

    letter-spacing: 0.03em;

}


.score-box {

    justify-self: start;

    white-space: nowrap;

}


.speed-box {

    justify-self: center;

    white-space: nowrap;

}


.mode-display {

    justify-self: end;

    white-space: nowrap;

}


.score-box strong,
.speed-box strong {

    margin-left: 4px;

}


/* =========================================================
   EXTREME SPEED INDICATOR
   ========================================================= */

.speed-box strong.speed-level-8,
.speed-box strong.speed-level-9,
.speed-box strong.speed-level-10 {

    color: #e01f1f;

}


.speed-box strong.speed-level-10 {

    font-weight: bold;

    text-shadow:
        0.25px 0 currentColor,
        -0.25px 0 currentColor;

}


/* =========================================================
   SCREEN AREA
   ========================================================= */

.screen-area {

    position: relative;

}


/* =========================================================
   CANVAS
   ========================================================= */

#gameCanvas {

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 7 / 4;

    border:
        2px solid
        var(--lcd-dark);

    background:
        var(--lcd);


    image-rendering: pixelated;
    image-rendering: crisp-edges;

}


/* =========================================================
   HELP OVERLAY
   ========================================================= */

.help-overlay {

    position: absolute;

    inset: 3px;

    z-index: 20;

}


.help-overlay[hidden] {

    display: none;

}


.help-window {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    padding:
        6px
        8px;

    border:
        2px solid
        var(--lcd-dark);

    background:
        rgba(
            182,
            197,
            138,
            0.97
        );

    color:
        #050705;


    box-shadow:
        3px 3px 0
        rgba(
            31,
            40,
            27,
            0.25
        );

}


/* =========================================================
   HELP HEADER
   ========================================================= */

.help-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 5px;

    font-size: 0.76rem;

}


/* =========================================================
   HELP LANGUAGE SWITCH
   ========================================================= */

.help-language {

    display: flex;

    align-items: center;

    gap: 4px;

}


.help-language-button {

    padding: 0;

    border: 0;

    background: none;

    color:
        #050705;

    font-family: inherit;

    font-size: 0.66rem;

    cursor: pointer;

    opacity: 0.68;

}


.help-language-button.active {

    font-size: 0.72rem;

    font-weight: bold;

    opacity: 1;

}


/* =========================================================
   HELP CONTENT
   ========================================================= */

.help-content {

    flex: 1;

    overflow: hidden;

    font-size: 0.50rem;

    line-height: 1.16;

    color:
        #050705;

}


.help-content p {

    margin:
        0
        0
        5px;

}


.help-content strong {

    font-weight: bold;

}


.help-subsection {

    margin:
        -1px
        0
        5px
        12px;

}


.help-subtitle {

    margin-bottom: 2px;

    font-weight: bold;

}


.help-rule {

    display: block;

    padding-left: 9px;

    margin-bottom: 1px;

}


.help-rule::before {

    content: "– ";

}


/* =========================================================
   HELP CLOSE
   ========================================================= */

.help-close-button {

    align-self: center;

    min-width: 72px;

    padding:
        4px
        8px;

    border:
        1px solid
        var(--lcd-dark);

    border-radius: 3px;

    background:
        transparent;

    color:
        #050705;

    font-family: inherit;

    font-size: 0.58rem;

    font-weight: bold;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

}


.help-close-button:active {

    background:
        var(--lcd-dark);

    color:
        var(--lcd);

}



/* =========================================================
   CONTROL PANEL

   Portrait / desktop:

   HELP              MODE
   PAUSE             START


              [large empty space]


                 ▲
               ◀   ▶
                 ▼
   ========================================================= */

.control-panel {

    min-height: 218px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    grid-template-rows:
        auto
        1fr
        auto;

    column-gap: 8px;

    margin-top: 15px;

}


/* =========================================================
   SIDE STACKS
   ========================================================= */

.side-stack {

    display: grid;

    grid-template-rows:
        32px
        32px;

    align-items: center;
    justify-items: center;

    row-gap: 13px;

}


.left-stack {

    grid-column: 1;
    grid-row: 1;

    justify-self: end;

}


.right-stack {

    grid-column: 3;
    grid-row: 1;

    justify-self: start;

    transform:
        translateX(
            -8px
        );

}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.action-button {

    height: 32px;

    min-width: 66px;

    padding:
        0
        7px;

    border:
        2px solid
        #3f443e;

    border-radius: 17px;


    background:
        linear-gradient(
            145deg,
            #666b64,
            #343934
        );


    color: white;

    font-family: inherit;

    font-size: 0.59rem;

    font-weight: bold;

    cursor: pointer;


    box-shadow:
        2px 3px 5px
        rgba(
            0,
            0,
            0,
            0.4
        );


    touch-action: manipulation;

    -webkit-tap-highlight-color:
        transparent;

}


.action-button:active:not(:disabled) {

    transform:
        translateY(
            2px
        );

}


.action-button:disabled {

    opacity: 0.48;

    cursor: default;

}


/* =========================================================
   DIRECTION PAD
   ========================================================= */

.direction-pad {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            44px
        );

    grid-template-rows:
        repeat(
            3,
            38px
        );

    justify-content: center;

    user-select: none;

}


.primary-pad {

    grid-column: 2;
    grid-row: 3;

    justify-self: center;

    transform:
        translateY(
            -8px
        );

}


.secondary-pad {

    display: none;

}


.direction-button {

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 7px;


    background:
        linear-gradient(
            145deg,
            var(--button-light),
            var(--button-dark)
        );


    color: white;

    font-family: inherit;

    font-size: 1rem;

    line-height: 1;

    cursor: pointer;


    box-shadow:

        2px 3px 4px
        rgba(
            0,
            0,
            0,
            0.4
        ),

        inset 1px 1px 2px
        rgba(
            255,
            255,
            255,
            0.2
        );


    touch-action: manipulation;

    -webkit-tap-highlight-color:
        transparent;

}


.direction-button:active {

    transform:
        translateY(
            2px
        );


    box-shadow:
        1px 1px 2px
        rgba(
            0,
            0,
            0,
            0.4
        );

}


.direction-button.up {

    grid-column: 2;
    grid-row: 1;

}


.direction-button.left {

    grid-column: 1;
    grid-row: 2;

}


.direction-button.down {

    grid-column: 2;
    grid-row: 3;

}


.direction-button.right {

    grid-column: 3;
    grid-row: 2;

}


/* =========================================================
   MODE SELECTOR
   ========================================================= */

.mode-selector {

    position: relative;

    width: 78px;

    align-self: center;

    user-select: none;

}


.mode-labels {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 1px;

    margin-bottom: 4px;

}


.mode-label {

    position: relative;

    min-width: 0;

    padding: 0;

    border: 0;

    background: none;

    color:
        rgba(
            40,
            43,
            39,
            0.65
        );

    font-family: inherit;

    font-size: 0.36rem;

    font-weight: bold;

    line-height: 1;

    cursor: pointer;

}


.mode-label.active {

    color:
        #272a26;

}


/* =========================================================
   MODE TOOLTIPS
   ========================================================= */

@media
    (hover: hover)
    and
    (pointer: fine) {

    .mode-label::after {

        content:
            attr(
                data-tooltip
            );

        position: absolute;

        left: 50%;
        bottom:
            calc(
                100% + 10px
            );

        z-index: 50;

        width: max-content;

        max-width: 190px;

        padding:
            6px
            8px;

        border:
            1px solid
            #454a42;

        border-radius: 4px;

        background:
            #d0d4c6;

        color:
            #252a23;

        font-size: 0.63rem;

        font-weight: normal;

        line-height: 1.3;

        text-align: center;

        white-space: normal;


        box-shadow:
            0 3px 8px
            rgba(
                0,
                0,
                0,
                0.3
            );


        opacity: 0;

        pointer-events: none;


        transform:
            translate(
                -50%,
                3px
            );


        transition:
            opacity 0.12s ease,
            transform 0.12s ease;

    }


    .mode-label:hover::after,
    .mode-label:focus-visible::after {

        opacity: 1;

        transform:
            translate(
                -50%,
                0
            );

    }

}


/* =========================================================
   MECHANICAL MODE SWITCH
   ========================================================= */

.mode-track {

    position: relative;

    display: block;

    width: 100%;
    height: 15px;

    padding: 0;

    border:
        2px solid
        #51544e;

    border-radius: 8px;


    background:
        linear-gradient(
            180deg,
            #585b54,
            #777a71
        );


    cursor: pointer;


    box-shadow:
        inset 0 2px 3px
        rgba(
            0,
            0,
            0,
            0.35
        );


    touch-action: none;

}


.mode-track::before,
.mode-track::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 2px;
    height: 5px;

    background:
        rgba(
            30,
            32,
            29,
            0.5
        );


    transform:
        translateY(
            -50%
        );

}


.mode-track::before {

    left: 33.33%;

}


.mode-track::after {

    left: 66.66%;

}


.mode-knob {

    position: absolute;

    top: 2px;

    width: 17px;
    height: 7px;

    border:
        1px solid
        #51534d;

    border-radius: 4px;


    background:
        linear-gradient(
            180deg,
            #d1d1c6,
            #8b8d84
        );


    box-shadow:

        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.35
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.45
        );


    pointer-events: none;


    transition:
        left 0.1s ease,
        transform 0.1s ease;

}


.mode-selector[data-mode="chill"]
.mode-knob {

    left: 3%;

    transform:
        translateX(
            0
        );

}


.mode-selector[data-mode="free"]
.mode-knob {

    left: 50%;

    transform:
        translateX(
            -50%
        );

}


.mode-selector[data-mode="rush"]
.mode-knob {

    left: 97%;

    transform:
        translateX(
            -100%
        );

}


/* =========================================================
   TOUCH LANDSCAPE

   One fixed physical geometry for coarse-pointer devices
   in landscape orientation.

   JavaScript scales the complete device as one object.
   LCD and controls never resize independently from
   one another.

   Reference geometry:
   device = 610 px
   LCD    = 392 px

   HELP           LCD           MODE
   PAUSE                        START

   Direction pads sit lower, around the horizontal LCD axis.
   ========================================================= */

@media
    (orientation: landscape)
    and
    (pointer: coarse) {

    body {

        padding: 4px;

    }


    .game-shell {

        width: 610px;
        min-width: 610px;
        max-width: 610px;

        flex:
            0
            0
            610px;

    }


    .game-device {

        --side-width: 90px;
        --landscape-gap: 8px;
        --landscape-lcd-width: 392px;

        width: 610px;

        padding:
            6px
            8px
            8px;

        border-radius: 16px;

    }


    /*
        Branding aligns with the left and right LCD edges.
    */

    .device-branding {

        margin:
            0
            calc(
                var(--side-width)
                +
                var(--landscape-gap)
            )
            4px;

        gap: 7px;

    }


    .manufacturer {

        font-size: 0.46rem;

    }


    .game-name {

        font-size: 0.5rem;

    }


    .version {

        font-size: 0.36rem;

    }


    .game-layout {

        display: grid;

        grid-template-columns:
            var(--side-width)
            var(--landscape-lcd-width)
            var(--side-width);

        grid-template-rows:
            1fr
            1fr;

        column-gap:
            var(--landscape-gap);

        justify-content: center;

        align-items: stretch;

    }


    .lcd {

        grid-column: 2;

        grid-row:
            1
            /
            3;

        align-self: center;

        width: 392px;

        padding: 5px;

        border-width: 3px;

    }


    .lcd-info {

        min-height: 18px;

        margin-bottom: 3px;

        font-size: 0.5rem;

    }


    /*
        Children of control-panel become direct items
        of the landscape game-layout grid.
    */

    .control-panel {

        display: contents;

    }


    .left-stack {

        grid-column: 1;
        grid-row: 1;

        justify-self: center;
        align-self: start;

        grid-template-rows:
            27px
            27px;

        row-gap: 13px;

        margin-top: 3px;

    }


    .right-stack {

        grid-column: 3;
        grid-row: 1;

        justify-self: center;
        align-self: start;

        grid-template-rows:
            27px
            27px;

        row-gap: 13px;

        margin-top: 3px;

        transform: none;

    }


    .primary-pad {

        grid-column: 1;
        grid-row: 2;

        justify-self: center;
        align-self: start;

        transform:
            translateY(
                -38%
            );

    }


    .secondary-pad {

        grid-column: 3;
        grid-row: 2;

        display: grid;

        justify-self: center;
        align-self: start;

        transform:
            translateY(
                -38%
            );

    }


    .direction-pad {

        grid-template-columns:
            repeat(
                3,
                32px
            );

        grid-template-rows:
            repeat(
                3,
                25px
            );

    }


    .direction-button {

        border-radius: 5px;

        font-size: 0.76rem;

    }


    .action-button {

        height: 27px;

        min-width: 70px;

        padding:
            0
            7px;

        font-size: 0.55rem;

    }


    .mode-selector {

        width: 86px;

    }


    .mode-label {

        font-size: 0.34rem;

    }


    .mode-track {

        height: 12px;

    }


    .mode-knob {

        top: 1px;

        width: 16px;
        height: 6px;

    }


    .help-overlay {

        inset: 3px;

    }


    .help-window {

        padding:
            5px
            8px;

    }


    .help-header {

        margin-bottom: 3px;

        font-size: 0.62rem;

    }


    .help-content {

        font-size: 0.48rem;

        line-height: 1.14;

        color:
            #050705;

    }


    .help-content p {

        margin-bottom: 3px;

    }


    .help-close-button {

        padding:
            5px
            8px
            3px;

        font-size: 0.48rem;

    }

}