:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #050713;
    color: #f5f7ff;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 50% -10%, rgba(72, 82, 220, .27), transparent 36rem),
        #050713;
}

button, a { font: inherit; }

.topbar {
    width: min(1100px, calc(100% - 2rem));
    min-height: 68px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back-link {
    color: #b7c0dc;
    font-weight: 750;
    text-decoration: none;
}

.back-link:hover { color: #fff; }

.quiet-button {
    padding: .55rem .85rem;
    color: #cbd2e8;
    border: 1px solid #303854;
    border-radius: 10px;
    background: #10152a;
    cursor: pointer;
}

main {
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.game-shell { width: min(100%, 900px); margin: 0 auto; }

.heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.eyebrow {
    margin: 0 0 .35rem;
    color: #70e7ff;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 3.75rem);
    line-height: .95;
    letter-spacing: -.045em;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: .85rem;
    color: #939dbb;
    font-size: .78rem;
}

.legend span { display: inline-flex; align-items: center; gap: .3rem; }

kbd {
    min-width: 24px;
    padding: .18rem .35rem;
    color: #e9edff;
    text-align: center;
    border: 1px solid #3e4765;
    border-radius: 5px;
    background: #161c33;
    box-shadow: inset 0 -2px 0 #0a0e1e;
}

.canvas-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid #242d4a;
    border-radius: 20px;
    background: #02040c;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(2, 4, 12, .62);
    backdrop-filter: blur(5px);
    transition: opacity .2s ease;
}

.overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.overlay-card {
    width: min(92%, 430px);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    background: rgba(12, 17, 39, .94);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.overlay-card h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    letter-spacing: -.04em;
}

.overlay-card > p:not(.eyebrow) {
    margin: 0 auto 1.5rem;
    color: #aeb7d2;
    line-height: 1.55;
}

.primary-button {
    min-height: 48px;
    padding: .75rem 1.2rem;
    color: #06111b;
    font-weight: 850;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #8ef0ff, #769eff);
    cursor: pointer;
}

button:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.mobile-controls {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-top: .8rem;
}

.mobile-controls button {
    min-height: 54px;
    color: #eef1ff;
    font-weight: 800;
    border: 1px solid #303a5d;
    border-radius: 13px;
    background: #11172d;
    touch-action: manipulation;
    user-select: none;
}

.mobile-controls .fire { color: #06111b; background: #73def3; }
.mobile-controls .pulse { grid-column: 1 / -1; min-height: 44px; }
.mobile-controls button.active { transform: translateY(2px); filter: brightness(1.3); }

@media (pointer: coarse), (max-width: 700px) {
    .legend { display: none; }
    .mobile-controls { display: grid; }
    .topbar { min-height: 56px; }
    main { padding-top: .3rem; }
    .canvas-frame { border-radius: 12px; }
}

@media (max-height: 720px) and (orientation: landscape) {
    .heading { display: none; }
    .topbar { min-height: 44px; }
    main { padding-top: 0; }
    .game-shell { width: min(80vw, 760px); }
    .mobile-controls { position: fixed; inset: auto .5rem .5rem; pointer-events: none; grid-template-columns: 72px 72px 72px; justify-content: space-between; }
    .mobile-controls button { pointer-events: auto; opacity: .82; }
    .mobile-controls .pulse { grid-column: 2; grid-row: 2; }
}