:root {
    --hades-bg: #050505;
    --hades-white: #f3f3f3;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
    overflow: hidden;
    background: var(--hades-bg);
    color: var(--hades-white);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hades-page {
    position: fixed;
    cursor: default;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 67%, rgba(255,255,255,.065) 0%, rgba(255,255,255,0) 24%),
        #050505;
    touch-action: none;
    user-select: none;
}

.hades-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(52vw, 440px);
    height: min(52vw, 440px);
    transform: translate(-50%, -50%);
    will-change: transform;
}

.hades-robot {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    will-change: transform;
    animation: hades-float 2.8s ease-in-out infinite;
    transform-origin: center center;
}

.hades-robot.hades-shake {
    animation: hades-float 2.8s ease-in-out infinite, hades-shake .42s ease-in-out 1;
}

@keyframes hades-float {
    0%, 100% { transform: translate3d(0, 30px, 0); }
    50% { transform: translate3d(0, -54px, 0); }
}

@keyframes hades-shake {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    15% { transform: translate3d(-5px, 1px, 0) rotate(-1.2deg); }
    30% { transform: translate3d(5px, -1px, 0) rotate(1.2deg); }
    45% { transform: translate3d(-4px, 1px, 0) rotate(-0.9deg); }
    60% { transform: translate3d(4px, 0, 0) rotate(.8deg); }
    75% { transform: translate3d(-2px, 0, 0) rotate(-.4deg); }
}


.hades-shadow {
    fill: rgba(255,255,255,.08);
    filter: blur(12px);
    transform-origin: center;
}

#hades-antenna path,
#hades-antenna circle {
    fill: none;
    stroke: var(--hades-white);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#hades-antenna circle { fill: var(--hades-white); stroke: none; }
#hades-antenna path:last-child { fill: var(--hades-white); stroke: none; }

.hades-side { fill: var(--hades-white); }
.hades-shell { fill: var(--hades-white); }
.hades-inner { fill: #050505; }
.hades-eye-box { fill: var(--hades-white); }
.hades-eye-cross {
    fill: none;
    stroke: #050505;
    stroke-width: 9;
    stroke-linecap: square;
}
.hades-right-eye { fill: var(--hades-white); }

@media (max-width: 600px) {
    .hades-stage {
        width: min(62vw, 300px);
        height: min(62vw, 300px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hades-robot { animation: none !important; }
}