@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&family=Rajdhani:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

body.cheese-rain-ui {
    --ui-gold: #ffd54a;
    --ui-amber: #ffad33;
    --ui-purple: #5b236c;
    --ui-violet: #261141;
    --ui-panel: rgba(20, 10, 40, 0.78);
    --ui-panel-soft: rgba(14, 9, 28, 0.64);
    --ui-border: rgba(255, 213, 74, 0.32);
    --ui-border-strong: rgba(255, 213, 74, 0.56);
    --ui-text: #fff8e1;
    --ui-text-dim: rgba(255, 248, 225, 0.76);
    --ui-text-faint: rgba(255, 248, 225, 0.52);
    --ui-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
    --ui-gold-glow: 0 0 18px rgba(255, 213, 74, 0.22);
    --ui-green: #00ff88;
    --ui-danger: #ff6666;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
}

body.cheese-rain-ui #ui-layer,
body.cheese-rain-ui #ui,
body.cheese-rain-ui #fps-hud {
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    color: var(--ui-text);
}

body.cheese-rain-ui .ui-intro-panel {
    background:
        radial-gradient(circle at top, rgba(255, 213, 74, 0.12), transparent 45%),
        linear-gradient(180deg, rgba(40, 18, 68, 0.96), rgba(18, 10, 34, 0.86));
    border: 1px solid var(--ui-border);
    border-radius: 26px;
    box-shadow: var(--ui-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    color: var(--ui-text);
}

body.cheese-rain-ui .ui-intro-panel h1 {
    margin-top: 0;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 3vw, 2.7rem);
    font-weight: 800;
    color: var(--ui-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--ui-purple), 0 0 22px rgba(255, 213, 74, 0.34);
}

body.cheese-rain-ui .ui-intro-panel p,
body.cheese-rain-ui .ui-intro-panel .tagline,
body.cheese-rain-ui .ui-intro-panel .controls-info,
body.cheese-rain-ui .ui-intro-panel .key-row {
    color: var(--ui-text-dim);
    font-size: 0.98rem;
    line-height: 1.6;
}

body.cheese-rain-ui .ui-intro-panel .tagline {
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.cheese-rain-ui .ui-intro-panel .accent,
body.cheese-rain-ui .ui-intro-panel .key,
body.cheese-rain-ui .ui-help-panel .accent {
    color: var(--ui-gold);
    font-weight: 700;
}

body.cheese-rain-ui .ui-intro-panel .key {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 213, 74, 0.24);
    background: rgba(255, 213, 74, 0.08);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

body.cheese-rain-ui .ui-intro-panel button,
body.cheese-rain-ui #start-hint {
    background: linear-gradient(135deg, var(--ui-gold) 0%, var(--ui-amber) 100%);
    color: #4a0e4e;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(255, 173, 51, 0.44), inset 0 -4px 0 rgba(0, 0, 0, 0.18);
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.cheese-rain-ui #start-hint {
    display: inline-block;
    border: 1px solid rgba(255, 213, 74, 0.28);
}

body.cheese-rain-ui .ui-help-panel {
    background: linear-gradient(180deg, rgba(26, 14, 46, 0.82), rgba(15, 10, 25, 0.68));
    border: 1px solid rgba(255, 213, 74, 0.2);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
    color: var(--ui-text-dim);
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    line-height: 1.75;
}

body.cheese-rain-ui #crosshair {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at center, var(--ui-gold) 0 1.5px, transparent 2px);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 213, 74, 0.12);
}

body.cheese-rain-ui #crosshair::before,
body.cheese-rain-ui #crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

body.cheese-rain-ui #crosshair::before {
    width: 18px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.cheese-rain-ui #crosshair::after {
    width: 2px;
    height: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.cheese-rain-ui #crosshair #crosshair-dot,
body.cheese-rain-ui #crosshair .dot {
    display: none;
}

body.cheese-rain-ui #crosshair.shoot::before,
body.cheese-rain-ui #crosshair.shoot::after,
body.cheese-rain-ui #crosshair.firing::before,
body.cheese-rain-ui #crosshair.firing::after {
    opacity: 0.45;
}

body.cheese-rain-ui #hud-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    flex-wrap: wrap;
}

body.cheese-rain-ui .hud-card,
body.cheese-rain-ui #btn-settings,
body.cheese-rain-ui #settings-modal,
body.cheese-rain-ui .wbtn,
body.cheese-rain-ui .weapon-slot {
    background: linear-gradient(180deg, rgba(22, 12, 38, 0.86), rgba(10, 8, 22, 0.72));
    border: 1px solid rgba(255, 213, 74, 0.18);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    color: var(--ui-text);
    backdrop-filter: blur(14px);
}

body.cheese-rain-ui .hud-card {
    border-radius: 16px;
    padding: 10px 12px;
}

body.cheese-rain-ui .card-label,
body.cheese-rain-ui #ammo-label,
body.cheese-rain-ui #wave-num,
body.cheese-rain-ui #health-label {
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ui-text-faint);
}

body.cheese-rain-ui .tool-btn,
body.cheese-rain-ui .mob-btn,
body.cheese-rain-ui .act-btn,
body.cheese-rain-ui #reload-btn {
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

body.cheese-rain-ui .tool-btn.active,
body.cheese-rain-ui .mob-btn.active,
body.cheese-rain-ui .wbtn.active,
body.cheese-rain-ui .weapon-slot.active {
    border-color: var(--ui-border-strong);
    box-shadow: 0 0 14px rgba(255, 213, 74, 0.18), inset 0 0 0 1px rgba(255, 213, 74, 0.16);
}

body.cheese-rain-ui #mode-pill {
    background: rgba(255, 71, 87, 0.18);
    border: 1px solid rgba(255, 71, 87, 0.28);
    color: #ff7a84;
    font-family: 'Space Mono', monospace;
}

body.cheese-rain-ui #mode-pill.add {
    background: rgba(46, 213, 115, 0.16);
    border-color: rgba(46, 213, 115, 0.26);
    color: #64ef9a;
}

body.cheese-rain-ui #mode-pill.drill {
    background: rgba(255, 159, 67, 0.16);
    border-color: rgba(255, 159, 67, 0.26);
    color: #ffba69;
}

body.cheese-rain-ui #mode-pill.chain {
    background: rgba(0, 210, 211, 0.16);
    border-color: rgba(0, 210, 211, 0.26);
    color: #62f3f3;
}

body.cheese-rain-ui #btn-settings,
body.cheese-rain-ui .settings-actions button {
    border-radius: 14px;
    color: var(--ui-text);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

body.cheese-rain-ui #btn-settings:hover,
body.cheese-rain-ui .settings-actions button:hover {
    border-color: var(--ui-border-strong);
    background: rgba(255, 213, 74, 0.12);
}

body.cheese-rain-ui #settings-modal h2 {
    color: var(--ui-gold);
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
}

body.cheese-rain-ui .setting-row label {
    color: var(--ui-text-dim);
}

body.cheese-rain-ui .setting-row input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 213, 74, 0.14);
}

body.cheese-rain-ui .setting-row input:focus {
    border-color: var(--ui-border-strong);
}

body.cheese-rain-ui #fps-hud {
    font-family: 'Rajdhani', sans-serif;
}

body.cheese-rain-ui #health-icon,
body.cheese-rain-ui #health-text {
    color: var(--ui-green);
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.45);
}

body.cheese-rain-ui #health-bar-bg,
body.cheese-rain-ui #health-bar {
    background: rgba(0, 0, 0, 0.52);
    border: 1px solid rgba(0, 255, 136, 0.28);
    overflow: hidden;
}

body.cheese-rain-ui #health-bar-bg {
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

body.cheese-rain-ui #health-bar-fill,
body.cheese-rain-ui #health-fill {
    background: linear-gradient(90deg, #00ff88, #ffd54a);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.12);
}

body.cheese-rain-ui #ammo-count,
body.cheese-rain-ui #ammo-display,
body.cheese-rain-ui #weapon-name {
    color: var(--ui-gold);
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(255, 173, 51, 0.36);
}

body.cheese-rain-ui #weapon-name {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.cheese-rain-ui #weapon-selector,
body.cheese-rain-ui #weapon-bar {
    gap: 8px;
}

body.cheese-rain-ui .weapon-key,
body.cheese-rain-ui .weapon-name {
    color: var(--ui-text-faint);
}

body.cheese-rain-ui .weapon-slot.active .weapon-key,
body.cheese-rain-ui .weapon-slot.active .weapon-name,
body.cheese-rain-ui .wbtn.active {
    color: var(--ui-gold);
}

body.cheese-rain-ui .wbtn {
    border-radius: 12px;
}

body.cheese-rain-ui #wave-num,
body.cheese-rain-ui #health-label {
    color: var(--ui-text-dim);
}

body.cheese-rain-ui #enemies-left,
body.cheese-rain-ui #msg {
    color: #ffb2b2;
    text-shadow: 0 0 8px rgba(255, 102, 102, 0.18);
}

body.cheese-rain-ui .kill-entry {
    background: rgba(8, 8, 18, 0.42);
    border-right: 2px solid var(--ui-danger);
    border-radius: 10px 0 0 10px;
}

body.cheese-rain-ui .hud-panel,
body.cheese-rain-ui #ui > div:first-child {
    color: var(--ui-text);
}

body.cheese-rain-ui .hud-panel {
    background: linear-gradient(180deg, rgba(25, 12, 42, 0.68), rgba(12, 8, 24, 0.46));
    border: 1px solid rgba(255, 213, 74, 0.18);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(12px);
}

body.cheese-rain-ui .entity-name,
body.cheese-rain-ui #title {
    color: var(--ui-gold);
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(255, 173, 51, 0.3);
}

body.cheese-rain-ui .entity-sub,
body.cheese-rain-ui #subtitle,
body.cheese-rain-ui .sub-info,
body.cheese-rain-ui #info {
    color: var(--ui-text-faint);
    font-family: 'Space Mono', monospace;
}

body.cheese-rain-ui .state-line,
body.cheese-rain-ui .warning,
body.cheese-rain-ui .info-line {
    color: #ffad88;
}

body.cheese-rain-ui .bar {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 213, 74, 0.22);
}

body.cheese-rain-ui .bar-fill {
    background: linear-gradient(90deg, #ff6a2b, var(--ui-amber), var(--ui-gold));
    box-shadow: 0 0 8px rgba(255, 173, 51, 0.18);
}

body.cheese-rain-ui #variants {
    gap: 10px;
    padding: 14px 18px 18px;
}

body.cheese-rain-ui .btn {
    background: linear-gradient(180deg, rgba(22, 12, 38, 0.9), rgba(10, 8, 20, 0.78));
    border: 1px solid rgba(255, 213, 74, 0.24);
    border-radius: 14px;
    color: var(--ui-gold);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.14em;
}

body.cheese-rain-ui .btn:hover,
body.cheese-rain-ui .btn.active {
    background: linear-gradient(135deg, var(--ui-gold) 0%, var(--ui-amber) 100%);
    border-color: var(--ui-border-strong);
    color: #221026;
    box-shadow: 0 0 16px rgba(255, 173, 51, 0.28);
}

body.cheese-rain-ui #damage-vignette {
    background: radial-gradient(ellipse at center, transparent 48%, rgba(255, 0, 0, 0.34) 100%);
}

body.cheese-rain-ui #shoot-btn-mobile,
body.cheese-rain-ui #fire-btn,
body.cheese-rain-ui #btn-fire {
    background: radial-gradient(circle, var(--ui-gold) 0%, var(--ui-amber) 100%);
    border-color: rgba(91, 35, 108, 0.88);
    color: #4a0e4e;
    box-shadow: 0 10px 24px rgba(255, 173, 51, 0.36);
}

body.cheese-rain-ui #shoot-btn-mobile:active,
body.cheese-rain-ui #fire-btn:active,
body.cheese-rain-ui #btn-fire:active,
body.cheese-rain-ui .act-btn:active {
    transform: scale(0.94);
}

body.cheese-rain-ui .joy-zone,
body.cheese-rain-ui .joystick-zone,
body.cheese-rain-ui .joy-base,
body.cheese-rain-ui #joystick-base {
    border-color: rgba(255, 213, 74, 0.24);
    background: radial-gradient(circle, rgba(255, 213, 74, 0.06) 0%, rgba(91, 35, 108, 0.12) 100%);
}

body.cheese-rain-ui .joy-stick,
body.cheese-rain-ui #joystick-knob,
body.cheese-rain-ui .knob {
    background: linear-gradient(180deg, rgba(255, 240, 214, 0.96), rgba(255, 213, 74, 0.68));
    border: 2px solid rgba(255, 213, 74, 0.24);
}

@media (max-width: 768px) {
    body.cheese-rain-ui .ui-intro-panel {
        width: min(92vw, 520px);
        padding: 28px 24px;
    }

    body.cheese-rain-ui #hud-top {
        gap: 8px;
        padding: 12px;
    }

    body.cheese-rain-ui #ammo-count,
    body.cheese-rain-ui #ammo-display {
        font-size: 2rem;
    }
}