@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;900&family=Special+Elite&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: "Special Elite", "Courier New", monospace;
    touch-action: none; /* stop the page itself from scrolling/zooming on touch */
}

body {
    height: 100vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "Titelzeile"
        "Buttonbereich";

    /* aged brass on deep billiard-felt green, with a soft vignette */
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,0.08), transparent 55%),
        radial-gradient(140% 100% at 50% 100%, rgba(0,0,0,0.45), transparent 60%),
        linear-gradient(180deg, #0f2a1a, #163a22 45%, #0d2415);
    color: #e9dcb5;

    /* respect notches / home indicator on Android/iOS */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

header {
    grid-area: Titelzeile;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

h1 {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 900;
    font-size: 4rem;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #d9b44a;

    /* engraved-brass plaque effect, no glow */
    text-shadow:
        0 1px 0 #f4d878,
        0 -1px 1px #4a3a0d,
        0 3px 6px rgba(0,0,0,0.55);
}

h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    margin: 0.6rem auto 0;
    background: linear-gradient(90deg, transparent, #d9b44a, transparent);
}

.highscore {
    font-family: "Special Elite", "Courier New", monospace;
    font-size: 1rem;
    letter-spacing: 3px;
    color: #b8935a;
}

footer {
    grid-area: Buttonbereich;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}

button {
    width: 75%;
    max-width: 350px;
    height: 70px;

    border: 2px solid #d9b44a;
    border-radius: 6px;

    background: linear-gradient(180deg, #2a4530, #1a3020);
    color: #e9dcb5;

    font-size: 1.6rem;
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;

    box-shadow:
        0 3px 0 #7a5c1e,
        0 6px 10px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.12);

    transition: 0.15s ease;
}

button:active {
    transform: translateY(2px);
    background: linear-gradient(180deg, #1a3020, #142819);
    box-shadow:
        0 1px 0 #7a5c1e,
        0 2px 4px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

@media (max-width: 500px) {

    h1 {
        font-size: 3rem;
        letter-spacing: 5px;
    }

    button {
        height: 65px;
        font-size: 1.3rem;
    }
}

/* ================= GAME SCREEN ================= */

main {
    grid-area: Titelzeile;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0.5rem;
}

#game_container {
    aspect-ratio: 10 / 14;
    height: 100%;
    max-width: 100%;
    width: auto;
    border: 4px solid #d9b44a;
    border-radius: 4px;
    box-shadow:
        0 0 0 3px #1a3020,
        0 8px 24px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(0,0,0,0.5);
    background: #0d2415;
    image-rendering: pixelated;
    touch-action: none;
}

/* on-screen D-pad, styled like small brass-trimmed cabinet buttons */
.dpad {
    display: grid;
    grid-template-columns: repeat(3, 56px);
    grid-template-rows: repeat(3, 56px);
    gap: 6px;
    justify-content: center;
    align-content: center;
}

.dpad button {
    width: 56px;
    height: 56px;
    min-width: 0;
    max-width: none;
    border-radius: 6px;
    border-width: 2px;
    font-size: 1.2rem;
    letter-spacing: 0;
    padding: 0;
    box-shadow:
        0 2px 0 #7a5c1e,
        0 4px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.dpad button:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 0 #7a5c1e,
        0 2px 3px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

#btn-up    { grid-column: 2; grid-row: 1; }
#btn-left  { grid-column: 1; grid-row: 2; }
#btn-right { grid-column: 3; grid-row: 2; }
#btn-down  { grid-column: 2; grid-row: 3; }

@media (max-width: 400px) {
    .dpad {
        grid-template-columns: repeat(3, 48px);
        grid-template-rows: repeat(3, 48px);
    }
    .dpad button {
        width: 48px;
        height: 48px;
        font-size: 1.05rem;
    }
}