/* =========================================================================
   Bullet Hell — loose modern retro, DOOM register.
   Chunky pixel grid, rust and dried blood, hot amber for anything urgent.
   ========================================================================= */

:root {
    --void:      #07050a;
    --panel:     #140f10;
    --panel-lit: #241a18;
    --wall:      #4a3b33;
    --blood:     #6b0f0f;
    --blood-lit: #a01c1c;
    --fire:      #e03b1e;
    --amber:     #ffb000;
    --amber-dim: #7a4a00;
    --bone:      #d8cfc0;
    --sick:      #7fbf3f;

    --font-pixel: 'Press Start 2P', 'Courier New', monospace;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--void);
    font-family: var(--font-pixel);
    color: var(--bone);
    user-select: none;
    -webkit-font-smoothing: none;
    font-smooth: never;
}

/* The backing store is small and stretched; keep every pixel hard-edged. */
canvas#game {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ===== Screen overlays ===== */
.screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    text-align: center;
    padding: 24px;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.35) 0 2px,
            rgba(0, 0, 0, 0.15) 2px 4px
        ),
        radial-gradient(ellipse at center, rgba(30, 12, 8, 0.92) 0%, rgba(5, 3, 6, 0.98) 70%);
}

.screen.hidden {
    display: none;
    pointer-events: none;
}

/* ===== Start screen ===== */
.game-title {
    font-size: clamp(1.4rem, 5vw, 3.2rem);
    line-height: 1.3;
    color: var(--fire);
    letter-spacing: 0.06em;
    margin-bottom: 0.8em;
    text-shadow:
        4px 4px 0 var(--blood),
        8px 8px 0 rgba(0, 0, 0, 0.85);
}

.subtitle {
    font-size: clamp(0.5rem, 1.4vw, 0.75rem);
    color: var(--amber-dim);
    margin-bottom: 3em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* ===== Buttons — heavy slabs, no radius, no gradients ===== */
.btn {
    font-family: var(--font-pixel);
    font-size: clamp(0.6rem, 1.5vw, 0.9rem);
    padding: 18px 40px;
    color: var(--bone);
    background: var(--blood);
    border: 0;
    box-shadow:
        inset 0 0 0 3px var(--fire),
        inset 0 0 0 6px var(--void),
        6px 6px 0 rgba(0, 0, 0, 0.8);
    cursor: pointer;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: none;
}

.btn:hover,
.btn:focus-visible {
    background: var(--blood-lit);
    color: #fff;
    box-shadow:
        inset 0 0 0 3px var(--amber),
        inset 0 0 0 6px var(--void),
        6px 6px 0 rgba(0, 0, 0, 0.8);
    outline: none;
}

.btn:active {
    transform: translate(3px, 3px);
    box-shadow:
        inset 0 0 0 3px var(--amber),
        inset 0 0 0 6px var(--void),
        2px 2px 0 rgba(0, 0, 0, 0.8);
}

/* ===== Controls legend ===== */
.controls-info {
    margin-top: 3em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 24px;
    font-size: clamp(0.42rem, 1vw, 0.58rem);
    color: var(--wall);
    line-height: 2;
    max-width: 620px;
}

.controls-info strong {
    color: var(--amber);
    font-weight: normal;
}

/* ===== HUD ===== */
.hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

.hud.hidden { display: none; }

.hud-left {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: var(--panel);
    box-shadow:
        inset 0 0 0 3px var(--wall),
        inset 0 0 0 6px var(--void);
    padding: 14px 18px;
    min-width: 300px;
}

.bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bar-label {
    font-size: 0.5rem;
    color: var(--amber-dim);
    width: 26px;
    letter-spacing: 0.1em;
}

.bar-track {
    position: relative;
    flex: 1;
    height: 14px;
    background: #0d0808;
    box-shadow: inset 0 0 0 2px var(--void);
    overflow: hidden;
}

.bar {
    height: 100%;
    width: 100%;
    transition: width 0.12s steps(4, end);
}

.bar-health { background: var(--fire); }
.bar-xp     { background: var(--sick); }

.bar-text {
    font-size: 0.45rem;
    color: var(--bone);
    min-width: 116px;
    text-align: right;
    letter-spacing: 0.05em;
}

.stats-display {
    font-size: 0.42rem;
    color: var(--amber);
    letter-spacing: 0.06em;
    margin-top: 6px;
    line-height: 1.8;
}

.hud-right {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background: var(--panel);
    box-shadow:
        inset 0 0 0 3px var(--wall),
        inset 0 0 0 6px var(--void);
    padding: 6px;
    line-height: 0;
}

#minimap {
    image-rendering: pixelated;
    display: block;
}

/* ===== Level up ===== */
.levelup-title {
    font-size: clamp(1rem, 3.5vw, 2rem);
    color: var(--amber);
    letter-spacing: 0.08em;
    text-shadow: 4px 4px 0 var(--amber-dim), 8px 8px 0 rgba(0, 0, 0, 0.8);
    margin-bottom: 0.6em;
}

.levelup-subtitle {
    font-size: clamp(0.45rem, 1.2vw, 0.62rem);
    color: var(--wall);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 2.5em;
}

.upgrade-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.5em;
}

.upgrade-card {
    width: 210px;
    padding: 22px 16px;
    background: var(--panel-lit);
    box-shadow:
        inset 0 0 0 3px var(--wall),
        inset 0 0 0 6px var(--void),
        6px 6px 0 rgba(0, 0, 0, 0.75);
    cursor: pointer;
    pointer-events: auto;
}

.upgrade-card:hover {
    background: #33221d;
    box-shadow:
        inset 0 0 0 3px var(--amber-dim),
        inset 0 0 0 6px var(--void),
        6px 6px 0 rgba(0, 0, 0, 0.75);
}

.upgrade-card.selected {
    background: var(--blood);
    box-shadow:
        inset 0 0 0 3px var(--amber),
        inset 0 0 0 6px var(--void),
        6px 6px 0 rgba(0, 0, 0, 0.75);
}

.card-name {
    font-size: 0.72rem;
    color: var(--amber);
    margin-bottom: 1.2em;
    line-height: 1.4;
}

.upgrade-card.selected .card-name { color: #fff; }

.card-desc {
    font-size: 0.45rem;
    color: var(--bone);
    line-height: 2;
    margin-bottom: 1.6em;
}

.card-rarity {
    font-size: 0.38rem;
    color: #96775e;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.card-rarity.rare { color: var(--sick); }

/* ===== Game over ===== */
.gameover-title {
    font-size: clamp(1.2rem, 4.5vw, 2.6rem);
    color: var(--fire);
    letter-spacing: 0.08em;
    text-shadow: 4px 4px 0 var(--blood), 8px 8px 0 rgba(0, 0, 0, 0.85);
    margin-bottom: 1em;
}

.gameover-stats {
    font-size: clamp(0.45rem, 1.2vw, 0.62rem);
    color: var(--bone);
    line-height: 2.8;
    margin-bottom: 2.5em;
}

.gameover-stats span { color: var(--amber); }

/* ===== Pause ===== */
.pause-title {
    font-size: clamp(1rem, 3.5vw, 2rem);
    color: var(--amber);
    letter-spacing: 0.2em;
    margin-bottom: 1.2em;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .bar { transition: none; }
}

/* =========================================================================
   Touch controls — twin-stick, landscape only
   ========================================================================= */

/* Stop the browser treating the play surface as a scrollable document:
   no pull-to-refresh, no rubber-banding, no double-tap zoom. */
body.touch-device {
    overscroll-behavior: none;
    touch-action: none;
}

.touch-layer {
    position: absolute;
    inset: 0;
    z-index: 60;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.touch-layer.hidden { display: none; }

/* Floating sticks: positioned at the thumb by JS, hidden until touched. */
.stick {
    position: absolute;
    width: 136px;
    height: 136px;
    margin-left: -68px;
    margin-top: -68px;
    border-radius: 50%;
    display: none;
    pointer-events: none;
    background: rgba(20, 15, 16, 0.4);
    box-shadow: inset 0 0 0 3px rgba(92, 70, 56, 0.75);
}

.stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 176, 0, 0.30);
    box-shadow: inset 0 0 0 3px var(--amber);
    transform: translate(-50%, -50%);
}

/* The firing stick reads hot so the two thumbs are never confused. */
.stick-fire {
    box-shadow: inset 0 0 0 3px rgba(160, 28, 28, 0.8);
    background: rgba(40, 10, 10, 0.4);
}

.stick-fire .stick-knob {
    background: rgba(224, 59, 30, 0.35);
    box-shadow: inset 0 0 0 3px var(--fire);
}

.touch-pause {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 70;
    width: 52px;
    height: 52px;
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--amber);
    background: var(--panel);
    border: 0;
    box-shadow:
        inset 0 0 0 3px var(--wall),
        inset 0 0 0 6px var(--void);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.touch-pause.hidden { display: none; }
.touch-pause:active { color: #fff; background: var(--blood); }

/* ===== Portrait gate =====
   Twin-stick needs the horizontal room, and a portrait viewport puts both
   thumbs over the play area. Shown only on touch devices in portrait. */
.rotate-gate {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 24px;
    background: var(--void);
}

body.touch-device .rotate-gate { }

@media (orientation: portrait) {
    body.touch-device .rotate-gate { display: flex; }
    /* Hide the HUD and touch layer so nothing is interactable behind the gate */
    body.touch-device .hud,
    body.touch-device .touch-layer,
    body.touch-device .touch-pause { display: none; }
}

.rotate-icon {
    font-size: 4rem;
    color: var(--amber);
    animation: rotate-hint 2.4s ease-in-out infinite;
}

.rotate-text {
    font-size: 0.72rem;
    color: var(--bone);
    letter-spacing: 0.1em;
    line-height: 2;
}

.rotate-sub {
    font-size: 0.48rem;
    color: var(--amber-dim);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

@keyframes rotate-hint {
    0%, 45%   { transform: rotate(0deg); }
    55%, 100% { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rotate-icon { animation: none; }
}

/* On short landscape viewports (phones), pull the HUD in so the sticks and
   the status panel do not fight for the same corner. */
@media (orientation: landscape) and (max-height: 500px) {
    .hud-left { min-width: 220px; padding: 8px 12px; }
    .bar-track { height: 10px; }
    .bar-text { min-width: 92px; font-size: 0.38rem; }
    .stats-display { font-size: 0.36rem; }
    #minimap { width: 96px; height: 96px; }
    .controls-info { display: none; }
}

/* Sticks rest dimmed at their default positions so a player can see the
   controls exist before touching anything, then brighten on grab. */
.stick.stick-idle {
    opacity: 0.32;
}

/* Build marker: lets a cached tablet be identified at a glance. */
.build-marker {
    font-size: 0.4rem;
    color: #3d2f28;
    letter-spacing: 0.18em;
    margin-top: 2.5em;
}

/* Sound toggle — mirrors the pause button so the two read as a pair. */
.mute-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 70;
    min-width: 52px;
    height: 40px;
    padding: 0 10px;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    color: var(--amber);
    background: var(--panel);
    border: 0;
    box-shadow:
        inset 0 0 0 3px var(--wall),
        inset 0 0 0 6px var(--void);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mute-btn.muted { color: #6b5347; }
.mute-btn:active { color: #fff; background: var(--blood); }