/* The hero illustration: a component's source beside a mock game screen with the HUD it describes. */
.demo { position: relative; display: grid; gap: 16px; }
.demo .code { margin: 0; box-shadow: var(--shadow); }
.demo .code pre { font-size: 0.78rem; padding: 14px 16px; }

.demo-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background:
        radial-gradient(40% 55% at 72% 38%, rgba(255, 138, 31, 0.5), transparent 70%),
        linear-gradient(180deg, #1a1f3a 0%, #2a2140 45%, #14182b 100%);
    box-shadow: var(--shadow);
    overflow: hidden;
    font-size: clamp(9px, 1.05vw, 13px);
    color: #fff;
}

/* A far and a near ridge, so the HUD has a scene behind it */
.demo-screen::before,
.demo-screen::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
}
.demo-screen::before {
    height: 48%;
    background: #171c33;
    clip-path: polygon(0 55%, 14% 30%, 27% 52%, 41% 12%, 55% 48%, 68% 26%, 82% 55%, 100% 20%, 100% 100%, 0 100%);
}
.demo-screen::after {
    height: 30%;
    background: #0d111f;
    clip-path: polygon(0 40%, 18% 70%, 34% 30%, 52% 75%, 70% 35%, 86% 68%, 100% 45%, 100% 100%, 0 100%);
}

.hud { position: absolute; inset: 0; z-index: 1; padding: 4.5%; }
.hud > * { position: absolute; }

.hud-vitals { top: 6%; left: 4.5%; width: 34%; }
.hud-name { margin-bottom: 0.5em; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.hud-bar { height: 0.9em; margin-bottom: 0.45em; border-radius: 1em; background: rgba(8, 11, 18, 0.7); overflow: hidden; }
.hud-bar span { display: block; height: 100%; border-radius: inherit; }
.hud-bar.hp span { width: 72%; background: linear-gradient(90deg, #2fc98a, #6ff0b4); animation: hud-hp 5s ease-in-out infinite; }
.hud-bar.mp { width: 70%; height: 0.6em; }
.hud-bar.mp span { width: 55%; background: linear-gradient(90deg, #4c8dff, #8fc1ff); }

.hud-gold {
    top: 6%;
    right: 4.5%;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.9em;
    border-radius: 2em;
    background: rgba(8, 11, 18, 0.7);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hud-gold i { width: 1em; height: 1em; border-radius: 50%; background: var(--ember); }

.hud-map {
    right: 4.5%;
    bottom: 8%;
    width: 19%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(60, 220, 151, 0.18), rgba(8, 11, 18, 0.75) 70%);
}
.hud-map i { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #ff6b6b; }
.hud-map i:nth-child(1) { top: 46%; left: 46%; background: #fff; }
.hud-map i:nth-child(2) { top: 24%; left: 62%; animation: hud-blip 4s ease-in-out infinite; }
.hud-map i:nth-child(3) { top: 66%; left: 28%; animation: hud-blip 6s ease-in-out infinite reverse; }
.hud-map i:nth-child(4) { top: 34%; left: 22%; background: var(--ember-300); }

.hud-slots { left: 50%; bottom: 8%; display: flex; gap: 0.7em; transform: translateX(-50%); }
.hud-slot {
    position: relative;
    display: grid;
    place-items: end;
    width: 3.6em;
    aspect-ratio: 1;
    padding: 0.2em 0.4em;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.7em;
    background: rgba(8, 11, 18, 0.7);
    font-size: 0.85em;
    font-weight: 700;
    overflow: hidden;
}
.hud-slot::before { content: ""; position: absolute; inset: 22%; border-radius: 30%; background: var(--slot, #8fc1ff); opacity: 0.85; }
.hud-slot.cooling::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 18, 0.75);
    transform-origin: bottom;
    animation: hud-cooldown 4s linear infinite;
}

.hud-toast {
    left: 4.5%;
    bottom: 8%;
    max-width: 30%;
    padding: 0.5em 0.9em;
    border-left: 3px solid var(--ember-500);
    border-radius: 0.3em;
    background: rgba(8, 11, 18, 0.7);
    line-height: 1.35;
}
.hud-toast small { display: block; color: var(--ember-300); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8em; }

.demo-note { margin: 0; color: var(--text-dim); font-size: 0.8rem; text-align: right; }

@keyframes hud-hp { 0%, 100% { width: 72%; } 50% { width: 46%; } }
@keyframes hud-blip { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-120%, 90%); } }
@keyframes hud-cooldown { from { transform: scaleY(1); } to { transform: scaleY(0); } }