* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body.arcade-body {
    background: #000;
    color: #e8eff8;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.arcade-root {
    width: min(100vw - 1rem, 100%);
    padding: 1rem;
    display: flex;
    justify-content: center;
}

.arcade-machine {
    width: clamp(320px, 33vw, 540px);
    background:
        linear-gradient(90deg, transparent 0 9%, #090911 9% 91%, transparent 91%),
        linear-gradient(180deg, #2b2e44 0%, #171827 46%, #10111b 100%);
    border: 2px solid #4a4d70;
    border-radius: 28px 28px 18px 18px;
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: inset 0 0 30px #000a, 0 20px 40px #000f;
    min-height: min(92vh, 860px);
    position: relative;
}

.arcade-machine::before,
.arcade-machine::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 6%;
    width: 10%;
    background: linear-gradient(180deg, #151623, #090a12);
    border: 1px solid #32344f;
    z-index: -1;
}

.arcade-machine::before {
    left: -7%;
    transform: skewY(-5deg);
}

.arcade-machine::after {
    right: -7%;
    transform: skewY(5deg);
}

.machine-collar {
    height: 14px;
    width: 72%;
    margin: 0 auto;
    border-radius: 999px;
    background: linear-gradient(to right, #111, #4a4a63, #111);
    box-shadow: inset 0 0 12px #000, 0 0 12px #8de8ff66;
}

.machine-brand {
    margin: 0;
    letter-spacing: 0.14em;
    color: #ffe07a;
    font-size: 0.86rem;
    text-align: center;
    font-weight: 700;
    background: linear-gradient(90deg, #401515, #7a2039 35%, #1e5772 65%, #172f58);
    border: 1px solid #6d7193;
    border-radius: 10px;
    padding: 0.65rem 0.4rem;
    text-shadow: 0 0 10px #000;
}

.monitor {
    background: linear-gradient(180deg, #0e0e1b 0%, #1a1a2f 100%);
    border: 2px solid #47476f;
    border-radius: 14px;
    padding: 0.72rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.65rem;
    min-height: 0;
}

.monitor-header {
    border: 1px solid #61618a;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a8e7ff;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.monitor-leds {
    display: flex;
    gap: 0.35rem;
}

.monitor-leds .led {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #0cf;
    box-shadow: 0 0 8px #0cf;
}

.monitor-screen {
    border: 1px solid #20203a;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 50%, transparent 50%) 0 0 / 100% 4px,
        radial-gradient(circle at 50% 15%, #111b22 0%, #050510 52%, #020208 100%);
    border-radius: 9px;
    padding: 0.65rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.monitor-title {
    margin: 0;
    text-align: center;
    color: #8de8ff;
    letter-spacing: 0.08em;
    font-size: 0.84rem;
}

.game-grid {
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    flex: 1;
}

.game-card {
    text-decoration: none;
    color: #ecf7ff;
    padding: 0.66rem 0.72rem;
    border: 1px solid #3b3b67;
    border-radius: 8px;
    background: linear-gradient(160deg, #1d1d34 0%, #12122b 100%);
    display: grid;
    gap: 0.22rem;
}

.game-card strong {
    font-size: 0.84rem;
}

.game-card span {
    font-size: 0.72rem;
    color: #b0d9e9;
}

.game-card em {
    color: #d8eaf3;
    font-size: 0.68rem;
    font-style: normal;
    line-height: 1.25;
}

.game-card small {
    width: fit-content;
    color: #ffe07a;
    border: 1px solid #6c5c27;
    border-radius: 999px;
    padding: 0.08rem 0.36rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.game-card.is-active,
.game-card:hover {
    border-color: #8dffc3;
    box-shadow: 0 0 16px #4be5a566;
    transform: translateX(4px);
}

.game-card[aria-selected="true"] {
    border-color: #9effde;
    box-shadow: 0 0 18px #00f0c0;
}

.game-card:focus-visible {
    outline: 2px solid #9effde;
    outline-offset: 2px;
}

.monitor-empty {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #8aa8c4;
    text-align: center;
}

.monitor-error {
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid #8a3b3b;
    background: #2a1313;
    border-radius: 8px;
    color: #ffbcbc;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: left;
}

.monitor-error code {
    color: #ffd6a5;
}

.control-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(180deg, #24273b, #151625);
    border: 1px solid #414467;
    border-radius: 12px;
    padding: .75rem;
}

.joystick-pad {
    width: 165px;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: 3rem 3.3rem 3rem;
    grid-template-rows: 3rem 3rem 3rem;
    column-gap: 0.2rem;
    row-gap: 0.2rem;
    justify-items: center;
    align-items: center;
}

.dpad-btn {
    width: 2.65rem;
    height: 2.65rem;
    border: none;
    border-radius: 50%;
    color: #dbf7ff;
    background: radial-gradient(circle at 30% 30%, #4d5368, #21243a);
    box-shadow: 0 0 12px #000;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 120ms ease;
}

.action-btn {
    width: 3.2rem;
    height: 3.2rem;
    border: none;
    border-radius: 50%;
    color: #f6fcff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.action-btn-a {
    background: radial-gradient(circle at 30% 30%, #72ffe5, #08a16c);
    color: #001f17;
}

.action-btn-b {
    background: radial-gradient(circle at 30% 30%, #ff9292, #a11e1e);
    color: #220505;
}

.arcade-buttons {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1fr 1fr;
}

.dpad-btn:hover,
.dpad-btn:focus-visible,
.action-btn:hover,
.action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 16px #63e8d1, 0 0 6px #000;
}

.dpad-btn:active,
.action-btn:active {
    transform: translateY(1px) scale(0.98);
}

.dpad-btn[data-direction="up"] { grid-column: 2; grid-row: 1; }
.dpad-btn[data-direction="left"] { grid-column: 1; grid-row: 2; }
.dpad-center { grid-column: 2; grid-row: 2; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #21223b; border: 2px solid #51517a; }
.dpad-btn[data-direction="down"] { grid-column: 2; grid-row: 3; }
.dpad-btn[data-direction="right"] { grid-column: 3; grid-row: 2; }

.machine-footer p {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.25;
    color: #9ec3dd;
    text-align: center;
}

@media (max-width: 620px) {
    .arcade-machine {
        width: min(92vw, 560px);
        min-height: min(94vh, 860px);
    }

    .arcade-machine::before,
    .arcade-machine::after {
        display: none;
    }

    .control-panel {
        gap: .6rem;
    }

    .joystick-pad {
        width: 136px;
        grid-template-columns: 2.6rem 2.7rem 2.6rem;
        grid-template-rows: 2.6rem 2.6rem 2.6rem;
    }

    .dpad-btn {
        width: 2.2rem;
        height: 2.2rem;
    }

    .action-btn {
        width: 2.9rem;
        height: 2.9rem;
    }
}