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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    background: linear-gradient(to bottom, #0d0a15 0%, #1a1020 50%, #2d1b2e 100%);
    color: #fff;
}

/* WebGL effects canvas */
#webgl-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 150;
    mix-blend-mode: screen;
}

.world {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(to bottom,
            rgba(13, 10, 21, 0.9) 0%,
            rgba(26, 16, 32, 0.95) 50%,
            rgba(45, 27, 46, 1) 100%);
}

/* Background layers for parallax effect - Cave atmosphere */
.bg-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bg-far {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(100, 50, 120, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(80, 40, 90, 0.06) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(20, 15, 25, 0.3) 0%, rgba(35, 25, 40, 0.4) 100%);
}

.bg-mid {
    background:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 200px,
            rgba(60, 40, 70, 0.03) 200px,
            rgba(60, 40, 70, 0.03) 202px),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 150px,
            rgba(50, 35, 60, 0.04) 150px,
            rgba(50, 35, 60, 0.04) 152px);
}

.bg-near {
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(200, 150, 255, 0.4), transparent),
        radial-gradient(1px 1px at 85% 60%, rgba(180, 140, 230, 0.3), transparent),
        radial-gradient(1px 1px at 45% 75%, rgba(190, 145, 240, 0.35), transparent),
        radial-gradient(2px 2px at 65% 15%, rgba(210, 160, 255, 0.5), transparent),
        radial-gradient(1px 1px at 25% 85%, rgba(170, 130, 220, 0.3), transparent);
    background-size: 100% 100%;
    opacity: 0.6;
    animation: glow-pulse 8s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* Player character */
.player {
    position: absolute;
    width: 60px;
    height: 80px;
    z-index: 100;
    /* Position is set by JavaScript */
}

.character {
    position: relative;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Sprite-based character - Uses CSS sprite sheet technique */
.character-body,
.character-head,
.character-needle,
.character-cloak {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Hornet sprite container - more detailed pixel art style */
.character-body {
    width: 60px;
    height: 80px;
    position: relative;
    animation: sprite-idle 1.2s steps(4) infinite;
}

/* Create Hornet's iconic look using layered elements */
.character-body::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 42px;
    background:
        /* Head/Mask */
        radial-gradient(ellipse at 50% 25%, #e879f9 0%, #c084fc 45%, transparent 46%),
        /* Body */
        radial-gradient(ellipse at 50% 60%, #d946ef 0%, #a855f7 65%, transparent 66%);
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 8px rgba(200, 150, 255, 0.6));
}

/* Hornet's horn */
.character-body::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 22px solid #f0abfc;
    left: 50%;
    top: -12px;
    transform: translateX(-50%) rotate(-8deg);
    filter: drop-shadow(0 0 6px rgba(240, 171, 252, 0.8));
}

/* Cloak with animated frames */
.character-cloak {
    width: 40px;
    height: 45px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
    clip-path: polygon(50% 0%, 0% 20%, 5% 100%, 95% 100%, 100% 20%);
    top: 65%;
    filter: drop-shadow(0 2px 8px rgba(139, 92, 246, 0.6));
    animation: cloak-sway 0.8s ease-in-out infinite;
}

/* Needle weapon */
.character-needle {
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #ffffff 0%, #e0e0e0 80%, #888 100%);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.4);
    top: 45%;
    left: 70%;
    opacity: 0;
    transform-origin: left center;
    transition: all 0.1s ease;
}

/* Sprite-based idle animation - 4 frames */
@keyframes sprite-idle {
    0% { transform: translate(-50%, -50%) translateY(0); }
    25% { transform: translate(-50%, -50%) translateY(-1px); }
    50% { transform: translate(-50%, -50%) translateY(-2px); }
    75% { transform: translate(-50%, -50%) translateY(-1px); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}

/* Cloak sway animation */
@keyframes cloak-sway {
    0%, 100% { transform: translate(-50%, -50%) scaleX(1) rotate(0deg); }
    50% { transform: translate(-50%, -50%) scaleX(1.05) rotate(2deg); }
}

/* Walking animation - sprite-based with 6 frames */
.player.walking .character-body {
    animation: sprite-walk 0.48s steps(6) infinite;
}

.player.walking .character-cloak {
    animation: walk-cloak-flow 0.3s ease-in-out infinite;
}

@keyframes sprite-walk {
    0% { transform: translate(-50%, -50%) translateY(0) scaleY(1); }
    16.66% { transform: translate(-50%, -50%) translateY(-4px) scaleY(0.98); }
    33.33% { transform: translate(-50%, -50%) translateY(-2px) scaleY(1.02); }
    50% { transform: translate(-50%, -50%) translateY(0) scaleY(1); }
    66.66% { transform: translate(-50%, -50%) translateY(-4px) scaleY(0.98); }
    83.33% { transform: translate(-50%, -50%) translateY(-2px) scaleY(1.02); }
    100% { transform: translate(-50%, -50%) translateY(0) scaleY(1); }
}

@keyframes walk-cloak-flow {
    0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) scaleX(1); }
    50% { transform: translate(-50%, -50%) rotate(8deg) scaleX(1.1); }
}

/* Sprinting animation - faster sprite cycling */
.player.sprinting .character-body {
    animation: sprite-sprint 0.28s steps(6) infinite;
}

.player.sprinting .character-cloak {
    animation: sprint-cloak-trail 0.14s ease-in-out infinite;
}

@keyframes sprite-sprint {
    0% { transform: translate(-50%, -50%) translateY(-3px) scaleY(0.92) rotate(5deg); }
    16.66% { transform: translate(-50%, -50%) translateY(-6px) scaleY(0.9) rotate(3deg); }
    33.33% { transform: translate(-50%, -50%) translateY(-4px) scaleY(0.94) rotate(7deg); }
    50% { transform: translate(-50%, -50%) translateY(-3px) scaleY(0.92) rotate(5deg); }
    66.66% { transform: translate(-50%, -50%) translateY(-6px) scaleY(0.9) rotate(3deg); }
    83.33% { transform: translate(-50%, -50%) translateY(-4px) scaleY(0.94) rotate(7deg); }
    100% { transform: translate(-50%, -50%) translateY(-3px) scaleY(0.92) rotate(5deg); }
}

@keyframes sprint-cloak-trail {
    0%, 100% { transform: translate(-50%, -50%) scaleX(1.4) rotate(-20deg); }
    50% { transform: translate(-50%, -50%) scaleX(1.5) rotate(-25deg); }
}

/* Attack animation - Silksong arcing diagonal slash */
.player.attacking .character-needle {
    opacity: 1;
    animation: needle-arc-slash 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.player.attacking .character-body {
    animation: attack-arc-motion 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.player.attacking .character-cloak {
    animation: attack-cloak-swirl 0.35s ease-out;
}

/* Arcing needle slash - starts from back, arcs forward in diagonal motion */
@keyframes needle-arc-slash {
    0% {
        opacity: 0;
        transform: translate(-35px, 15px) rotate(-120deg);
    }
    15% {
        opacity: 1;
        transform: translate(-25px, 5px) rotate(-90deg);
    }
    40% {
        opacity: 1;
        transform: translate(0px, -10px) rotate(-45deg);
    }
    65% {
        opacity: 1;
        transform: translate(30px, -15px) rotate(-20deg);
    }
    100% {
        opacity: 1;
        transform: translate(40px, -8px) rotate(0deg);
    }
}

/* Body follows the arc motion */
@keyframes attack-arc-motion {
    0% {
        transform: translate(-50%, -50%) rotate(-10deg) translateX(-5px);
    }
    30% {
        transform: translate(-50%, -50%) rotate(5deg) translateX(3px) translateY(-8px);
    }
    65% {
        transform: translate(-50%, -50%) rotate(15deg) translateX(8px) translateY(-12px);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(0px) translateY(0px);
    }
}

/* Cloak swirls during attack */
@keyframes attack-cloak-swirl {
    0% {
        transform: translate(-50%, -50%) rotate(-15deg) scaleX(0.9);
    }
    40% {
        transform: translate(-50%, -50%) rotate(25deg) scaleX(1.3);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scaleX(1);
    }
}

/* Facing direction */
.player.facing-left {
    transform: scaleX(-1);
}

.player.facing-right {
    transform: scaleX(1);
}

/* Portfolio sections */
.portfolio-section {
    position: relative;
    padding: 20px;
    background:
        linear-gradient(135deg,
            rgba(30, 25, 40, 0.92) 0%,
            rgba(25, 20, 35, 0.95) 50%,
            rgba(20, 15, 30, 0.92) 100%);
    border: 2px solid rgba(120, 80, 150, 0.5);
    border-radius: 8px;
    width: 280px;
    box-shadow:
        inset 0 1px 3px rgba(150, 100, 200, 0.2),
        0 0 25px rgba(150, 100, 200, 0.25),
        0 5px 20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    z-index: 10;
}

.portfolio-section:hover {
    border-color: rgba(180, 120, 220, 0.8);
    box-shadow:
        inset 0 1px 5px rgba(180, 120, 220, 0.3),
        0 0 35px rgba(180, 120, 220, 0.5),
        0 5px 25px rgba(0, 0, 0, 0.7);
    transform: translateY(-3px);
}

.portfolio-section h2 {
    color: #c299ff;
    margin-bottom: 15px;
    font-size: 1.5em;
    text-shadow: 0 0 15px rgba(180, 120, 255, 0.6);
    font-weight: 600;
}

.portfolio-section p,
.portfolio-section ul {
    color: #d0c5e0;
    line-height: 1.6;
    font-size: 0.95em;
}

.portfolio-section ul {
    list-style: none;
    padding-left: 0;
}

.portfolio-section li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.portfolio-section li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: #a780d9;
    text-shadow: 0 0 8px rgba(167, 128, 217, 0.5);
}

/* Stone walls */
.stone-wall {
    position: absolute;
    width: 80px;
    height: 100%;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(40, 35, 50, 0.6) 20%,
            rgba(50, 45, 60, 0.8) 50%,
            rgba(40, 35, 50, 0.6) 80%,
            transparent 100%),
        repeating-linear-gradient(0deg,
            rgba(30, 25, 40, 0.4) 0px,
            rgba(35, 30, 45, 0.5) 40px,
            rgba(25, 20, 35, 0.3) 80px);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.wall-left {
    left: 0;
    border-right: 2px solid rgba(80, 60, 100, 0.3);
}

.wall-right {
    right: 0;
    border-left: 2px solid rgba(80, 60, 100, 0.3);
}

/* Stone pillars */
.stone-pillar {
    position: absolute;
    width: 60px;
    height: 250px;
    background:
        linear-gradient(90deg,
            rgba(45, 40, 55, 0.9) 0%,
            rgba(55, 50, 65, 0.95) 50%,
            rgba(45, 40, 55, 0.9) 100%),
        repeating-linear-gradient(0deg,
            transparent 0px,
            rgba(35, 30, 45, 0.3) 20px,
            transparent 40px);
    border: 2px solid rgba(70, 55, 85, 0.4);
    border-radius: 5px;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.pillar-1 {
    left: 25%;
    top: 20%;
}

.pillar-2 {
    right: 20%;
    bottom: 15%;
}

/* Ruins */
.ruins {
    position: absolute;
    width: 120px;
    height: 100px;
    background:
        linear-gradient(135deg,
            rgba(50, 45, 60, 0.7) 0%,
            rgba(40, 35, 50, 0.8) 50%,
            rgba(35, 30, 45, 0.6) 100%);
    clip-path: polygon(0 100%, 10% 30%, 30% 40%, 50% 10%, 70% 35%, 90% 25%, 100% 100%);
    border-bottom: 2px solid rgba(80, 60, 100, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.ruin-1 {
    left: 10%;
    bottom: 0;
}

.ruin-2 {
    right: 15%;
    bottom: 0;
}

/* Platform containers */
.platform-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Stone platforms */
.stone-platform {
    position: relative;
    width: 280px;
    height: 25px;
    background:
        linear-gradient(to bottom,
            rgba(65, 55, 75, 0.95) 0%,
            rgba(55, 45, 65, 1) 30%,
            rgba(45, 35, 55, 1) 70%,
            rgba(35, 25, 45, 0.9) 100%),
        repeating-linear-gradient(90deg,
            transparent 0px,
            rgba(50, 40, 60, 0.5) 30px,
            transparent 60px);
    border: 2px solid rgba(80, 65, 95, 0.6);
    border-radius: 8px;
    box-shadow:
        inset 0 -3px 10px rgba(0, 0, 0, 0.6),
        inset 0 3px 5px rgba(100, 80, 120, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(150, 100, 200, 0.15);
    z-index: 5;
}

.stone-platform::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(120, 100, 140, 0.4) 50%,
        transparent 100%);
}

.stone-platform::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 10%;
    width: 80%;
    height: 8px;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.4) 0%,
        transparent 70%);
    filter: blur(4px);
}

.stone-platform.standalone {
    height: 20px;
}

/* Controls hint */
.controls-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(25, 20, 35, 0.92);
    padding: 15px 30px;
    border: 2px solid rgba(120, 80, 150, 0.6);
    border-radius: 8px;
    z-index: 1000;
    box-shadow:
        inset 0 1px 3px rgba(150, 100, 200, 0.2),
        0 0 25px rgba(150, 100, 200, 0.3),
        0 5px 20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.controls-hint p {
    margin: 0;
    font-size: 0.9em;
    color: #d0c5e0;
}

.controls-hint strong {
    color: #c299ff;
    text-shadow: 0 0 10px rgba(180, 120, 255, 0.4);
}

/* Attack effect */
@keyframes attack-flash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.player.attacking::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(192, 132, 252, 0.7) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: attack-flash 0.3s ease-out;
    pointer-events: none;
}

/* Clawline anchor rings */
.clawline-ring {
    position: absolute;
    width: 35px;
    height: 35px;
    border: 3px solid rgba(220, 180, 255, 0.8);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(220, 180, 255, 0.15) 0%,
        rgba(192, 132, 252, 0.25) 50%,
        transparent 70%);
    box-shadow:
        0 0 15px rgba(220, 180, 255, 0.6),
        inset 0 0 10px rgba(220, 180, 255, 0.4);
    z-index: 8;
    animation: ring-pulse 2s ease-in-out infinite;
    cursor: pointer;
}

.clawline-ring::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(240, 200, 255, 0.6);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.clawline-ring::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 230, 255, 0.9);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(255, 230, 255, 0.8);
}

@keyframes ring-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.clawline-ring:hover {
    border-color: rgba(255, 220, 255, 1);
    box-shadow:
        0 0 25px rgba(255, 220, 255, 0.9),
        inset 0 0 15px rgba(255, 220, 255, 0.6);
    animation: ring-active 0.5s ease-in-out infinite;
}

@keyframes ring-active {
    0%, 100% { transform: scale(1.05) rotate(0deg); }
    50% { transform: scale(1.15) rotate(180deg); }
}

/* Silk thread visual */
.silk-thread {
    position: absolute;
    width: 3px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(220, 180, 255, 0.8) 50%,
        rgba(192, 132, 252, 0.7) 100%);
    box-shadow:
        0 0 8px rgba(220, 180, 255, 0.8),
        0 0 4px rgba(255, 255, 255, 0.6);
    transform-origin: top center;
    pointer-events: none;
    z-index: 95;
    display: none;
}

.silk-thread.active {
    display: block;
    animation: thread-shimmer 0.3s ease-in-out infinite;
}

@keyframes thread-shimmer {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* Grappling state */
.player.grappling .character-body {
    animation: grapple-hang 0.6s ease-in-out infinite;
}

.player.grappling .character-cloak {
    animation: grapple-cloak-sway 0.8s ease-in-out infinite;
}

@keyframes grapple-hang {
    0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); }
    50% { transform: translate(-50%, -50%) rotate(5deg); }
}

@keyframes grapple-cloak-sway {
    0%, 100% { transform: translate(-50%, -50%) rotate(-15deg) scaleY(1.2); }
    50% { transform: translate(-50%, -50%) rotate(15deg) scaleY(1.3); }
}

/* Shuriken projectiles - Simple glowing spheres */
.shuriken {
    width: 12px;
    height: 12px;
    position: absolute;
    pointer-events: none;
    z-index: 90;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 230, 245, 0.95) 30%,
        rgba(255, 200, 230, 0.8) 60%,
        rgba(255, 180, 220, 0.4) 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(255, 220, 240, 0.9),
        0 0 35px rgba(255, 180, 220, 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.8);
    animation: shuriken-pulse 0.15s ease-in-out infinite alternate;
}

@keyframes shuriken-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 20px rgba(255, 220, 240, 0.9),
            0 0 35px rgba(255, 180, 220, 0.6),
            inset 0 0 8px rgba(255, 255, 255, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 0 25px rgba(255, 230, 245, 1),
            0 0 45px rgba(255, 200, 230, 0.8),
            inset 0 0 12px rgba(255, 255, 255, 1);
    }
}