body {
    margin: 0;
    overflow: hidden;
    background-color: #1a1a1a;
    font-family: 'Arial', sans-serif;
    overscroll-behavior: none;
}

#gameCanvas {
    width: 100vw;
    height: 100vh;
    touch-action: none; /* prevent browser gestures cancelling joystick on mobile */
}

#ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    gap: 20px;
}

#score, #level-display {
    display: none !important;
}

#weapon-display { display: none !important; }

/* centered orb progress bar */
#orb-progress {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    width: min(68vw, 720px); height: 20px; border-radius: 10px;
    background: rgba(0,0,0,0.5); border: 1px solid #555; z-index: 12;
}
#orb-progress .progress-fill {
    height: 100%; width: 0%; border-radius: 10px;
    /* replaced solid color with the provided orb progress graphic that reveals with width */
    background-image: url('UI - orb progress bar longer.png');
    background-repeat: no-repeat;
    background-position: left center;
    /* ensure the decorative pattern tiles horizontally and stays vertically centered while width animates */
    /* increase the source image render size so the graphic doesn't appear cut off at the end */
    background-size: auto 140%;
    transition: width 160ms ease;
    will-change: width, background-position;
}
#orb-progress .level-label {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    color: #fff; font-weight: 700; letter-spacing: 0.5px; pointer-events: none;
}
#orb-progress img#progress-orb {
    z-index: 20;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    will-change: left, opacity;
}

/* Position player stats in the middle-left of the viewport */
#stats-panel {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 240px;
    box-sizing: border-box;
    padding: 12px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(85,85,85,0.9);
    border-radius: 10px;
    color: #fff;
    pointer-events: auto;
}
#stats-panel #weapon-title { color: #00ffcc; font-weight: 700; margin-bottom: 6px; }
#stats-panel .stats-row { display:flex; justify-content:space-between; gap:12px; font-size: 14px; padding: 2px 0; }

/* Ensure responsive fallback on very narrow screens */
@media (max-width: 520px) {
    #stats-panel { left: 8px; width: 200px; padding: 8px; }
}

/* Intro overlay that appears at start (centered around player on screen) */
#intro-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transition: opacity 0.6s ease, transform 0.6s ease;
    opacity: 1;
    display: none;
}

#intro-overlay.hidden {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.98);
    pointer-events: none;
}

#intro-arrow {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
    transform-origin: center;
    animation: intro-bob 1200ms ease-in-out infinite;
}

@keyframes intro-bob {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

#intro-text {
    color: white;
    background: rgba(0,0,0,0.45);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

/* Gamepad image shown at bottom of intro overlay, will fade out when player moves */
#intro-gamepad {
    width: 320px;
    max-width: 40vw;
    opacity: 1;
    transition: opacity 0.8s ease;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* hide DOM intro assets so canvas renders them (prevents duplicate visuals) */
#intro-arrow, #intro-gamepad {
    display: none !important;
}

/* ensure small screens remain readable */
@media (max-width: 600px) {
    #intro-arrow { width: 56px; height:56px; }
    #intro-text { font-size: 16px; padding: 8px 12px; }
    #intro-gamepad { width: 220px; max-width: 60vw; }
}

/* Responsive UI scale variable (used to scale start menu and UI on small screens) */
:root {
    --ui-scale: 1;
}

/* Apply UI scaling to top-level UI and start screen container */
#ui, #start-screen, #game-over-screen, #controls-screen, #bestiary-screen {
    transform-origin: top left;
    transform: none;
    will-change: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Utility hidden class to consistently hide panels and UI elements */
.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; }

/* Helper class used by JS to softly hide footer/debug/wormhole without clashing with CSS collapse rules */
.hidden-by-js { display: none !important; }

/* Onscreen joystick styling */
#onscreen-joystick {
    position: fixed;
    left: 50%;
    transform: translateX(-50%); /* center horizontally */
    bottom: 24px;
    width: 140px;
    height: 140px;
    pointer-events: auto;
    z-index: 20; /* lowered so modals (z-index ≥40) appear above */
    touch-action: none; /* allow custom pointer handling */
    display: flex;
    align-items: center;
    justify-content: center;
}

#onscreen-joystick.hidden { display: none !important; }

#joystick-base {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(200,200,200,0.35); /* light gray base */
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
    transform: translateZ(0);
    touch-action: none;
}

#joystick-knob {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(80,80,80,0.95); /* darker gray knob */
    left: calc(50% - 28px);
    top: calc(50% - 28px);
    transition: transform 0s;
    will-change: transform;
    touch-action: none;
    box-shadow: 0 6px 12px rgba(0,0,0,0.5);
}

#onscreen-fire, #onscreen-loadout {
    position: fixed;
    bottom: 28px;
    transform: translateX(-50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(80,80,80,0.9);
    color: #fff;
    border: 1px solid #444;
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
    z-index: 20; /* lowered from 110 */
    pointer-events: auto;
    touch-action: none;
    font-weight: 700;
    letter-spacing: 0.5px;
}
#onscreen-fire.hidden, #onscreen-loadout.hidden { display: none !important; }
#onscreen-fire { left: calc(50% - 180px); }
#onscreen-loadout { left: calc(50% + 180px); }

#pause-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    z-index: 20; /* lowered from 120 */
    pointer-events: auto;
    font-weight: 700;
}

@media (max-width: 420px), (max-aspect-ratio: 9/16) {
    #onscreen-joystick { width: 110px; height: 110px; left: 16px; bottom: 16px; }
    #joystick-knob { width: 48px; height: 48px; left: calc(50% - 24px); top: calc(50% - 24px); }
    #onscreen-fire, #onscreen-loadout { width: 68px; height: 68px; bottom: 20px; font-size: 12px; }
    #onscreen-fire { left: calc(50% - 150px); }
    #onscreen-loadout { left: calc(50% + 150px); }
}

#inventory-panel {
    position: fixed; top: 16px; right: 16px; z-index: 14;
    transform: none;
    width: 300px; max-height: 80vh; display: flex; flex-direction: column;
    background: rgba(0,0,0,0.6); border: 1px solid #555; border-radius: 10px; overflow: hidden;
    box-sizing: border-box;
    padding-top: 40px; /* make room for the title area */
    position: fixed; /* ensure relative for absolute children */
}
/* Ensure header sits above buttons and full width */
#inventory-header {
    position: absolute;
    top: 6px;
    left: 12px;
    right: 44px; /* leave space for collapse arrow at top-right */
    display:flex; align-items:center; gap:10px;
    z-index: 20;
}
/* Collapse arrow moved to top-right and visually compact */
#inventory-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    color:#aaa;
    border:none;
    font-size:18px;
    cursor:pointer;
    z-index: 30;
    width:36px;
    height:36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:8px;
}
#inventory-toggle:hover { color: #fff; background: rgba(255,255,255,0.02); }

#inventory-grid { grid-template-columns: repeat(3, 1fr); }
#inventory-panel.collapsed #inventory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:6px; padding:8px; }
#inventory-panel.collapsed .inventory-item { width: 44px; height: 44px; border-radius:6px; }
#inventory-panel.collapsed .inventory-item img { width: 40px; height: 40px; }
#inventory-panel.collapsed .inventory-badge { display: none; } /* no extra icons/badges */
#coin-tracker { display:flex; align-items:center; gap:6px; margin-left:auto; }
#coin-tracker img { width:24px; height:24px; object-fit:contain; display:inline-block; }
#coin-tracker #coin-count { color:#fff; font-weight:700; }

.inventory-item {
    display:inline-flex;
    width:72px;
    height:72px;
    align-items:center;
    justify-content:center;
    position:relative;
    border-radius:8px;
    background: rgba(255,255,255,0.02);
    margin:6px;
    cursor:pointer;
    transition: box-shadow 120ms ease, transform 120ms ease, border 120ms ease;
}
.inventory-item img { width:48px; height:48px; object-fit:contain; }
.inventory-item .inventory-badge {
    position:absolute; right:6px; top:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px; padding:2px 6px; border-radius:6px;
}
.inventory-item.selected {
    outline: 2px solid rgba(153, 221, 255, 0.95);
    box-shadow: 0 6px 18px rgba(64, 174, 255, 0.12);
    transform: translateY(-2px);
}

.inv-debug-btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: #00b3ff;
    color: #001;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.inv-debug-btn:hover {
    background: #00a3e0;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.tooltip {
    position: fixed; z-index: 100; background: rgba(0,0,0,0.9); color:#fff;
    border:1px solid #555; border-radius:8px; padding:8px 10px; max-width: 320px; pointer-events: none; font-size: 12px;
}

#inventory-panel.collapsed {
    /* make panel shrink-to-fit its inline content instead of fixed width */
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(0,0,0,0.6);
    right: 16px; /* keep anchored to top-right */
}
/* Ensure header sits above buttons and full width */
#inventory-header {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    width: auto;
    background: transparent;
}
/* Collapse arrow moved to top-right and visually compact */
#inventory-toggle {
    position: relative;
    top: 0;
    right: 0;
    margin-left: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
}
#inventory-toggle:hover { color: #fff; background: rgba(255,255,255,0.02); }

#inventory-grid { grid-template-columns: repeat(3, 1fr); }
#inventory-panel.collapsed #inventory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:6px; padding:8px; }
#inventory-panel.collapsed .inventory-item { width: 44px; height: 44px; border-radius:6px; }
#inventory-panel.collapsed .inventory-item img { width: 40px; height: 40px; }
#inventory-panel.collapsed .inventory-badge { display: none; } /* no extra icons/badges */
#coin-tracker { display:flex; align-items:center; gap:6px; margin-left:auto; }
#coin-tracker img { width:24px; height:24px; object-fit:contain; display:inline-block; }
#coin-tracker #coin-count { color:#fff; font-weight:700; }

.inventory-item {
    display:inline-flex;
    width:72px;
    height:72px;
    align-items:center;
    justify-content:center;
    position:relative;
    border-radius:8px;
    background: rgba(255,255,255,0.02);
    margin:6px;
    cursor:pointer;
    transition: box-shadow 120ms ease, transform 120ms ease, border 120ms ease;
}
.inventory-item img { width:48px; height:48px; object-fit:contain; }
.inventory-item .inventory-badge {
    position:absolute; right:6px; top:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px; padding:2px 6px; border-radius:6px;
}
.inventory-item.selected {
    outline: 2px solid rgba(153, 221, 255, 0.95);
    box-shadow: 0 6px 18px rgba(64, 174, 255, 0.12);
    transform: translateY(-2px);
}

.inv-debug-btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: #00b3ff;
    color: #001;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.inv-debug-btn:hover {
    background: #00a3e0;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.tooltip {
    position: fixed; z-index: 100; background: rgba(0,0,0,0.9); color:#fff;
    border:1px solid #555; border-radius:8px; padding:8px 10px; max-width: 320px; pointer-events: none; font-size: 12px;
}

#inventory-panel.collapsed #coin-tracker {
    display:flex;
    align-items:center;
    gap:6px;
    padding: 2px 4px;
}
#inventory-panel.collapsed #coin-count,
#inventory-panel.collapsed #orb-count {
    font-weight: 800;
    color: #fff;
    font-size: 14px;
}

/* minimize toggle button visual noise in collapsed state */
#inventory-panel.collapsed #inventory-toggle {
    display: block;
    margin-left: 0;
    font-size: 16px;
    color: #aaa;
    background: transparent;
    border: none;
}

#inventory-panel.collapsed #inventory-wormhole-controls,
#inventory-panel.collapsed #inventory-debug-controls,
#inventory-panel.collapsed #inventory-actions {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide core in-game UI when settings overlay is open (settings should overlay the menu) */
.settings-open #inventory-panel,
.settings-open #orb-progress,
.settings-open #pause-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide additional in-game UI requested: player stats, radar, and touch buttons while settings open */
.settings-open #stats-panel,
.settings-open #radar-overlay,
.settings-open #onscreen-fire,
.settings-open #onscreen-loadout {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}