/* CSS Custom Properties - Naruto Color Palette */
:root {
    --naruto-orange: #FF6B35;
    --naruto-black: #1a1a1a;
    --naruto-dark-red: #8B0000;
    --naruto-gray-blue: #4A5568;
    --chakra-blue: #00BFFF;
    --chakra-purple: #9932CC;
    --leaf-green: #228B22;
    --golden-yellow: #FFD700;
    --shadow-dark: rgba(0, 0, 0, 0.8);
    --glass-effect: rgba(255, 255, 255, 0.1);

    /* Linktree-style colors */
    --bg-primary: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    --card-bg: rgba(255, 255, 255, 0.9);
    --text-primary: #333;
    --text-secondary: #666;
}

/* Itachi Theme Variables */
:root.itachi-theme {
    --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    --card-bg: rgba(0, 0, 0, 0.7);
    --text-primary: #fff;
    --text-secondary: #ccc;
    --naruto-orange: #ff0000;
    --chakra-blue: #8B0000;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Orbitron', 'Arial', sans-serif;
    background: var(--bg-primary);
    background-attachment: fixed;
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
    transition: all 0.5s ease;
}

/* Village Background Effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, var(--naruto-orange) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--chakra-blue) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, var(--naruto-dark-red) 0%, transparent 50%);
    opacity: 0.3;
    z-index: -2;
    animation: villageGlow 8s ease-in-out infinite alternate;
}

@keyframes villageGlow {
    0% { opacity: 0.2; }
    100% { opacity: 0.4; }
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--card-bg);
    border: 2px solid var(--naruto-orange);
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.theme-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--naruto-orange);
}

.toggle-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: bold;
    font-size: 14px;
}

.crow-icon {
    font-size: 18px;
    animation: crowFly 2s ease-in-out infinite;
}

@keyframes crowFly {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Container Layout */
.container {
    max-width: 400px;
    margin: 0 auto;
    padding: 80px 20px 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

/* Profile Header */
.profile-header {
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.profile-header .profile-image-wrapper {
    margin-bottom: 20px;
}

.profile-header .profile-image-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
    border: 3px solid var(--naruto-orange);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
    overflow: hidden;
    background: linear-gradient(45deg, var(--naruto-orange), var(--naruto-dark-red));
    margin: 0 auto;
}

.profile-header .ninja-name {
    font-family: 'Metal Mania', 'Bungee', cursive;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
    transition: all 0.3s ease;
}

/* Premium Naruto-Style Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at center, rgba(255, 107, 53, 0.15) 0%, transparent 40%),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #0a0a0a 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    font-family: 'Cinzel', serif;
}

.preloader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(0, 191, 255, 0.04) 0%, transparent 50%);
    animation: ambientGlow 8s ease-in-out infinite alternate;
    z-index: -1;
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    filter: blur(5px);
}

.rasengan-container {
    text-align: center;
    position: relative;
    z-index: 10;
}

/* Premium Anime-Style Rasengan */
.rasengan {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 40px;
    filter: drop-shadow(0 0 50px rgba(0, 191, 255, 0.6));
}

/* Main Energy Core */
.chakra-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(135, 206, 235, 0.8) 15%,
            rgba(0, 191, 255, 0.9) 35%,
            rgba(0, 100, 255, 0.95) 60%,
            rgba(0, 50, 150, 1) 85%,
            rgba(0, 20, 80, 1) 100%
        );
    border-radius: 50%;
    animation:
        coreRotate 2s linear infinite,
        corePulse 4s ease-in-out infinite,
        coreGlow 3s ease-in-out infinite alternate;
    box-shadow:
        0 0 20px rgba(0, 191, 255, 0.8),
        0 0 40px rgba(0, 191, 255, 0.6),
        0 0 60px rgba(0, 191, 255, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        inset 0 0 40px rgba(0, 191, 255, 0.2);
    z-index: 10;
    position: relative;
}

.chakra-core::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 25%;
    height: 25%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    animation: highlight 2s ease-in-out infinite alternate;
}

.chakra-core::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.1) 45deg,
        transparent 90deg,
        rgba(0, 191, 255, 0.2) 135deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.1) 225deg,
        transparent 270deg,
        rgba(0, 191, 255, 0.2) 315deg,
        transparent 360deg
    );
    animation: conicSpin 3s linear infinite;
}

/* Premium Chakra Energy Rings */
.chakra-ring {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
    animation: ringRotate 4s linear infinite;
}

.ring-1 {
    top: 10px;
    left: 10px;
    width: 180px;
    height: 180px;
    border: 3px solid transparent;
    border-image: linear-gradient(45deg,
        rgba(255, 107, 53, 0.8) 0%,
        rgba(255, 215, 0, 0.6) 25%,
        transparent 50%,
        rgba(255, 107, 53, 0.4) 75%,
        rgba(255, 215, 0, 0.8) 100%
    ) 1;
    border-radius: 50%;
    animation-duration: 3s;
    filter: blur(1px);
    box-shadow:
        0 0 20px rgba(255, 107, 53, 0.3),
        inset 0 0 20px rgba(255, 215, 0, 0.2);
}

.ring-2 {
    top: 30px;
    left: 30px;
    width: 140px;
    height: 140px;
    border: 2px solid transparent;
    border-image: linear-gradient(135deg,
        rgba(0, 191, 255, 0.9) 0%,
        rgba(135, 206, 235, 0.7) 30%,
        transparent 60%,
        rgba(0, 191, 255, 0.5) 90%,
        rgba(135, 206, 235, 0.9) 100%
    ) 1;
    border-radius: 50%;
    animation-duration: 2.2s;
    animation-direction: reverse;
    filter: blur(0.5px);
    box-shadow:
        0 0 15px rgba(0, 191, 255, 0.4),
        inset 0 0 15px rgba(135, 206, 235, 0.3);
}

.ring-3 {
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    border: 2px solid transparent;
    border-image: linear-gradient(225deg,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 215, 0, 0.6) 40%,
        transparent 70%,
        rgba(255, 255, 255, 0.4) 100%
    ) 1;
    border-radius: 50%;
    animation-duration: 1.5s;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        inset 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Premium Anime-Style Animations */
@keyframes coreRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        transform: translate(-50%, -50%) rotate(90deg) scale(1.05);
        filter: hue-rotate(90deg) brightness(1.1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
        filter: hue-rotate(180deg) brightness(1.2);
    }
    75% {
        transform: translate(-50%, -50%) rotate(270deg) scale(1.05);
        filter: hue-rotate(270deg) brightness(1.1);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        filter: hue-rotate(360deg) brightness(1);
    }
}

@keyframes corePulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(0, 191, 255, 0.8),
            0 0 40px rgba(0, 191, 255, 0.6),
            0 0 60px rgba(0, 191, 255, 0.4),
            inset 0 0 20px rgba(255, 255, 255, 0.3),
            inset 0 0 40px rgba(0, 191, 255, 0.2);
    }
    50% {
        box-shadow:
            0 0 30px rgba(0, 191, 255, 1),
            0 0 60px rgba(0, 191, 255, 0.8),
            0 0 90px rgba(0, 191, 255, 0.6),
            inset 0 0 30px rgba(255, 255, 255, 0.5),
            inset 0 0 60px rgba(0, 191, 255, 0.4);
    }
}

@keyframes coreGlow {
    0% {
        filter: brightness(1) saturate(1);
    }
    100% {
        filter: brightness(1.3) saturate(1.5);
    }
}

@keyframes highlight {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes conicSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ringRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.7;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.2);
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.7;
        filter: brightness(1);
    }
}

@keyframes ambientGlow {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Premium Anime-Style Loading Text */
.loading-text {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 40px;
    position: relative;
    color: #ffffff;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(0, 191, 255, 0.6),
        0 0 30px rgba(0, 191, 255, 0.4);
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: textGlow 3s ease-in-out infinite alternate;
}

.loading-text::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 107, 53, 0.8) 20%,
        rgba(255, 215, 0, 1) 50%,
        rgba(255, 107, 53, 0.8) 80%,
        transparent 100%
    );
    animation: topLine 2s ease-in-out infinite;
}

.loading-text::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 191, 255, 0.8) 20%,
        rgba(135, 206, 235, 1) 50%,
        rgba(0, 191, 255, 0.8) 80%,
        transparent 100%
    );
    animation: bottomLine 2s ease-in-out infinite reverse;
}

/* Japanese-style subtitle */
.loading-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 300;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 2px;
    text-transform: lowercase;
    font-style: italic;
    animation: subtitleFade 4s ease-in-out infinite;
}

@keyframes textGlow {
    0% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(0, 191, 255, 0.6),
            0 0 30px rgba(0, 191, 255, 0.4);
        transform: scale(1);
    }
    100% {
        text-shadow:
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(0, 191, 255, 0.8),
            0 0 45px rgba(0, 191, 255, 0.6);
        transform: scale(1.02);
    }
}

@keyframes topLine {
    0%, 100% {
        width: 120%;
        opacity: 0.8;
    }
    50% {
        width: 140%;
        opacity: 1;
    }
}

@keyframes bottomLine {
    0%, 100% {
        width: 120%;
        opacity: 0.8;
    }
    50% {
        width: 140%;
        opacity: 1;
    }
}

@keyframes subtitleFade {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0px);
    }
    50% {
        opacity: 0.9;
        transform: translateY(-2px);
    }
}

/* Floating Kanji Characters */
.floating-kanji {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.kanji {
    position: absolute;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 107, 53, 0.3);
    text-shadow:
        0 0 10px rgba(255, 107, 53, 0.5),
        0 0 20px rgba(255, 107, 53, 0.3);
    animation: kanjiFloat 8s ease-in-out infinite;
}

.kanji-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.kanji-2 {
    top: 20%;
    right: 15%;
    animation-delay: 2s;
    animation-duration: 10s;
}

.kanji-3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 4s;
    animation-duration: 9s;
}

.kanji-4 {
    bottom: 20%;
    right: 10%;
    animation-delay: 6s;
    animation-duration: 7s;
}

@keyframes kanjiFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.2;
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-30px) rotate(8deg);
        opacity: 0.3;
    }
}

/* Premium Progress Indicator */
.chakra-progress {
    margin-top: 30px;
    width: 300px;
    position: relative;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 10px rgba(0, 191, 255, 0.3),
        inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        rgba(255, 107, 53, 0.8) 0%,
        rgba(255, 215, 0, 1) 30%,
        rgba(0, 191, 255, 1) 70%,
        rgba(135, 206, 235, 0.8) 100%
    );
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: progressGlow 2s ease-in-out infinite alternate;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: progressShine 1.5s ease-in-out infinite;
}

.progress-text {
    text-align: center;
    margin-top: 10px;
}

.progress-percent {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 5px rgba(0, 191, 255, 0.5);
    letter-spacing: 1px;
}

@keyframes progressGlow {
    0% {
        box-shadow:
            0 0 5px rgba(0, 191, 255, 0.5),
            0 0 10px rgba(0, 191, 255, 0.3);
    }
    100% {
        box-shadow:
            0 0 10px rgba(0, 191, 255, 0.8),
            0 0 20px rgba(0, 191, 255, 0.5);
    }
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Chakra Glow Effect */
.chakra-glow {
    text-shadow: 
        0 0 5px var(--chakra-blue),
        0 0 10px var(--chakra-blue),
        0 0 15px var(--chakra-blue),
        0 0 20px var(--chakra-blue);
    animation: chakraFlicker 2s ease-in-out infinite alternate;
}

@keyframes chakraFlicker {
    0% { 
        text-shadow: 
            0 0 5px var(--chakra-blue),
            0 0 10px var(--chakra-blue),
            0 0 15px var(--chakra-blue),
            0 0 20px var(--chakra-blue);
    }
    100% { 
        text-shadow: 
            0 0 2px var(--chakra-blue),
            0 0 5px var(--chakra-blue),
            0 0 8px var(--chakra-blue),
            0 0 12px var(--chakra-blue);
    }
}

/* Sharingan Background Eye */
.sharingan-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: -3;
    opacity: 0.15;
    animation: eyePulse 9s ease-in-out infinite;
}

.sharingan-eye {
    width: 100%;
    height: 100%;
    filter: blur(1px);
    transition: all 0.5s ease;
    animation: sharinganSpin 8s linear infinite;
}

/* Faster spin on hover */
.sharingan-bg:hover .sharingan-eye {
    animation: sharinganSpin 2s linear infinite;
    filter: blur(0px);
}

@keyframes eyePulse {
    0% { 
        transform: translate(-50%, -50%) scale(0.8); 
        opacity: 0.1; 
        filter: blur(4px);
    }
    25% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.2;
        filter: blur(3px);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.25; 
        filter: blur(2px);
    }
    75% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.2;
        filter: blur(3px);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.1;
        filter: blur(4px);
    }
}

/* Smooth Sharingan Spinning Animation */
@keyframes sharinganSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Enhanced pulse when About Me section is visible */
.sharingan-bg.active-pulse,
.sharingan-bg:hover {
    animation: eyePulseActive 6s ease-in-out infinite;
    opacity: 0.3;
}

/* Intense spinning when active */
.sharingan-bg.active-pulse .sharingan-eye {
    animation: sharinganSpin 3s linear infinite;
    filter: blur(0.5px);
}

@keyframes eyePulseActive {
    0% { 
        transform: translate(-50%, -50%) scale(0.9); 
        opacity: 0.2; 
        filter: blur(2px);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1); 
        opacity: 0.4; 
        filter: blur(1px);
    }
    100% { 
        transform: translate(-50%, -50%) scale(0.9); 
        opacity: 0.2; 
        filter: blur(2px);
    }
}

/* Floating Chakra Particles */
.chakra-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--chakra-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--chakra-blue);
    animation: particleFloat 15s linear infinite;
}

.particle-1 { left: 10%; animation-delay: 0s; }
.particle-2 { left: 20%; animation-delay: 2s; }
.particle-3 { left: 30%; animation-delay: 4s; }
.particle-4 { left: 40%; animation-delay: 6s; }
.particle-5 { left: 60%; animation-delay: 8s; }
.particle-6 { left: 70%; animation-delay: 10s; }
.particle-7 { left: 80%; animation-delay: 12s; }
.particle-8 { left: 90%; animation-delay: 14s; }

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateY(10vh) scale(1);
    }
    100% {
        transform: translateY(-10vh) scale(0);
        opacity: 0;
    }
}

/* Main Container */
.container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* Section Styles */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-content {
    max-width: 1200px;
    width: 100%;
    text-align: center;
    position: relative;
}

/* Anime Title Styles */
.anime-title {
    margin-bottom: 3rem;
    position: relative;
}

.title-kanji {
    display: block;
    font-family: 'Creepster', cursive;
    font-size: 2rem;
    color: var(--golden-yellow);
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.title-main {
    display: block;
    font-family: 'Bungee', cursive;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--naruto-orange);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.title-subtitle {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--chakra-blue);
    opacity: 0.9;
    letter-spacing: 1px;
}

/* About Section Styles */
.profile-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.profile-image-wrapper {
    position: relative;
    justify-self: center;
}

/* Profile Image Container */
.profile-image-container {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    position: relative;
    border: 5px solid var(--golden-yellow);
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
    overflow: hidden;
    background: linear-gradient(45deg, var(--naruto-orange), var(--naruto-dark-red));
}

/* Main Profile Image */
.profile-image-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Remove border-radius since container handles it */
    transition: all 0.3s ease;
    display: block;
}

/* Hover effect for profile image */
.profile-image-main:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.profile-placeholder {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--naruto-orange), var(--naruto-dark-red));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 5px solid var(--golden-yellow);
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
}

.profile-placeholder i {
    font-size: 4rem;
    color: white;
}

.chakra-aura {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, var(--chakra-blue) 100%);
    opacity: 0.3;
    animation: auraGlow 3s ease-in-out infinite alternate;
}

@keyframes auraGlow {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.6; }
}

.profile-content {
    text-align: left;
}

.ninja-name {
    font-family: 'Metal Mania', 'Bungee', cursive;
    font-size: 2.5rem;
    color: var(--naruto-orange);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ninja-name:hover {
    text-shadow: 
        0 0 5px var(--chakra-blue),
        0 0 10px var(--chakra-blue),
        0 0 15px var(--chakra-blue),
        0 0 20px var(--chakra-blue),
        0 0 25px var(--chakra-blue);
    transform: scale(1.05);
}

.ninja-rank {
    font-size: 1.2rem;
    color: var(--chakra-blue);
    margin-bottom: 2rem;
    font-weight: 300;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.konoha-symbol {
    font-size: 3rem;
    text-align: center;
    margin-top: 2rem;
    animation: leafSway 4s ease-in-out infinite;
}

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

/* Kunai Decoration */
.kunai-decoration {
    position: absolute;
    top: 10%;
    right: 5%;
    z-index: 1;
}

.kunai {
    width: 60px;
    height: 200px;
    position: relative;
    animation: kunaiFloat 6s ease-in-out infinite;
}

.kunai-blade {
    width: 8px;
    height: 120px;
    background: linear-gradient(to bottom, #silver, #darkgray);
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
}

.kunai-handle {
    width: 20px;
    height: 80px;
    background: linear-gradient(to bottom, var(--naruto-orange), var(--naruto-dark-red));
    margin: 0 auto;
    border-radius: 0 0 10px 10px;
    position: relative;
}

@keyframes kunaiFloat {
    0%, 100% { transform: translateY(0) rotate(15deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

/* Cute mobile kunai animation */
@keyframes kunaiFloatMobile {
    0%, 100% {
        transform: translateY(0) rotate(10deg);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-5px) rotate(5deg);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-8px) rotate(0deg);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-3px) rotate(-5deg);
        opacity: 0.8;
    }
}

/* Headband Decoration */
.headband-decoration {
    position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 1;
}

.headband {
    width: 100px;
    height: 30px;
    position: relative;
    animation: headbandSway 5s ease-in-out infinite;
}

.headband-cloth {
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, var(--naruto-gray-blue), var(--naruto-black));
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.headband-plate {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 30px;
    background: linear-gradient(45deg, #silver, #darkgray);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.headband-plate .konoha-symbol {
    font-size: 1.2rem;
    margin: 0;
    animation: none;
}

@keyframes headbandSway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* Social Media Section */
.social-section {
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.social-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.social-card {
    width: 100%;
}

.social-link {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: var(--card-bg);
    border-radius: 25px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.social-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
}

.social-text {
    font-weight: 600;
    font-size: 16px;
    flex: 1;
}

/* Platform-specific hover effects */
.social-card[data-platform="instagram"] .social-link:hover {
    border-color: #E4405F;
    background: rgba(228, 64, 95, 0.1);
}

.social-card[data-platform="github"] .social-link:hover {
    border-color: #333;
    background: rgba(51, 51, 51, 0.1);
}

.social-card[data-platform="linkedin"] .social-link:hover {
    border-color: #0077B5;
    background: rgba(0, 119, 181, 0.1);
}

.social-card[data-platform="youtube"] .social-link:hover {
    border-color: #FF0000;
    background: rgba(255, 0, 0, 0.1);
}

.social-card[data-platform="facebook"] .social-link:hover {
    border-color: #1877F2;
    background: rgba(24, 119, 242, 0.1);
}



/* Responsive Design */
@media (max-width: 768px) {
    .container {
        max-width: 350px;
        padding: 60px 15px 15px;
        gap: 20px;
    }

    .theme-toggle {
        top: 15px;
        right: 15px;
        padding: 8px 15px;
    }

    .toggle-icon {
        font-size: 12px;
        gap: 6px;
    }

    .crow-icon {
        font-size: 16px;
    }

    .profile-header .profile-image-container {
        width: 100px;
        height: 100px;
    }

    .profile-header .ninja-name {
        font-size: 1.5rem;
    }

    .social-grid {
        max-width: 300px;
        gap: 12px;
    }

    .social-link {
        padding: 12px 18px;
        border-radius: 20px;
    }

    .social-icon {
        width: 20px;
        height: 20px;
        font-size: 18px;
        margin-right: 12px;
    }

    .social-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .container {
        max-width: 320px;
        padding: 50px 10px 10px;
        gap: 15px;
    }

    .profile-header .profile-image-container {
        width: 120px;
        height: 120px;
    }

    .profile-header .ninja-name {
        font-size: 1.3rem;
    }

    .social-grid {
        max-width: 280px;
        gap: 10px;
    }

    .social-link {
        padding: 10px 15px;
        border-radius: 18px;
    }

    .social-text {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .title-main {
        font-size: 2rem;
        letter-spacing: 1px;
    }

    /* Premium Rasengan Mobile Adjustments */
    .rasengan {
        width: 120px;
        height: 120px;
    }

    .chakra-core {
        width: 50px;
        height: 50px;
    }

    .ring-1 {
        width: 100px;
        height: 100px;
        top: 10px;
        left: 10px;
    }

    .ring-2 {
        width: 80px;
        height: 80px;
        top: 20px;
        left: 20px;
    }

    .ring-3 {
        width: 60px;
        height: 60px;
        top: 30px;
        left: 30px;
    }

    /* Mobile Premium Text Adjustments */
    .loading-text {
        font-size: 1rem;
        letter-spacing: 1px;
        margin-top: 25px;
    }

    .loading-subtitle {
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-top: 10px;
    }

    /* Show floating kanji on mobile with optimized performance */
    .floating-kanji {
        display: block;
    }

    .kanji {
        font-size: 1.2rem; /* Smaller on mobile */
        opacity: 0.6; /* More visible on mobile */
        animation-duration: 6s; /* Faster animation for better mobile performance */
    }

    /* Mobile-optimized kanji positions */
    .kanji-1 {
        top: 10%;
        left: 5%;
    }

    .kanji-2 {
        top: 15%;
        right: 5%;
    }

    .kanji-3 {
        bottom: 20%;
        left: 10%;
    }

    .kanji-4 {
        bottom: 15%;
        right: 8%;
    }

    /* Mobile progress bar */
    .chakra-progress {
        width: 200px;
        margin-top: 20px;
    }

    .progress-bar {
        height: 3px;
    }

    .progress-text {
        margin-top: 8px;
    }

    .progress-percent {
        font-size: 0.8rem;
    }

    .profile-image-container {
        width: 150px;
        height: 150px;
    }

    .profile-placeholder {
        width: 150px;
        height: 150px;
    }

    .profile-placeholder i {
        font-size: 3rem;
    }

    .about-text p {
        font-size: 1rem;
    }

    .sharingan-bg {
        width: 150px;
        height: 150px;
        opacity: 0.08;
    }
}

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Naruto Themed Footer */
.squid-game-footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, var(--naruto-black) 0%, var(--naruto-gray-blue) 50%, var(--naruto-black) 100%);
    border-top: 3px solid var(--naruto-orange);
    padding: 15px 0 0 0; /* Remove bottom padding */
    margin-top: 50px;
    margin-bottom: 0; /* Ensure no bottom margin */
    box-shadow: 0 -8px 32px rgba(255, 107, 53, 0.4);
}

.footer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 15px 20px; /* Add bottom padding to content */
    text-align: center;
}

.copyright-text {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    letter-spacing: 1px;
}

.design-text {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    color: var(--chakra-blue);
    font-weight: 400;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
    letter-spacing: 0.5px;
    margin-top: 5px;
}

.creator-link {
    color: var(--naruto-orange);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    position: relative;
}

.creator-link:hover {
    color: var(--golden-yellow);
    text-shadow: 0 0 15px var(--naruto-orange);
    transform: scale(1.05);
}

.creator-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--naruto-orange), var(--golden-yellow));
    transition: width 0.3s ease;
}

.creator-link:hover::after {
    width: 100%;
}

.footer-decoration {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-symbol {
    font-size: 1.5rem;
    animation: leafFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.6));
}

@keyframes leafFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-5px) rotate(5deg) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateY(-8px) rotate(0deg) scale(1.05);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-3px) rotate(-5deg) scale(1.1);
        opacity: 1;
    }
}

/* Mobile footer adjustments */
@media (max-width: 768px) {
    .squid-game-footer {
        padding: 6px 0;
    }

    .copyright-text {
        font-size: 0.8rem;
    }

    .footer-symbol {
        font-size: 1rem;
    }
}

/* PWA Install Banner */
.pwa-install-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
    border: 2px solid var(--naruto-orange);
    border-radius: 15px;
    padding: 15px 20px;
    z-index: 10000;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3);
    animation: slideInFromTop 0.5s ease-out;
    max-width: 90%;
    backdrop-filter: blur(10px);
}

.install-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-family: 'Orbitron', monospace;
}

.install-icon {
    font-size: 1.5rem;
    animation: bounce 2s infinite;
}

.install-text {
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
}

.install-btn {
    background: linear-gradient(45deg, var(--naruto-orange), var(--golden-yellow));
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.install-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.install-close {
    background: transparent;
    color: #ccc;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.install-close:hover {
    color: var(--naruto-orange);
    background: rgba(255, 107, 53, 0.1);
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Mobile PWA banner adjustments */
@media (max-width: 768px) {
    .pwa-install-banner {
        top: 10px;
        padding: 12px 15px;
    }

    .install-text {
        font-size: 0.8rem;
    }

    .install-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* 🥷 Naruto Link Redirection Animation */
.naruto-link-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at center, rgba(255, 107, 53, 0.4) 0%, transparent 60%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(26, 26, 46, 0.98) 50%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: linkOverlayAppear 0.3s ease-out;
    backdrop-filter: blur(15px);
}

.naruto-link-content {
    text-align: center;
    color: white;
    max-width: 500px;
    padding: 40px;
}

.link-shuriken-spinner {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 40px;
    animation: shurikenSpin 3s linear infinite; /* Slower spin */
    display: flex;
    justify-content: center;
    align-items: center;
}

.link-shuriken-spinner svg {
    width: 100%;
    height: 100%;
    fill: var(--naruto-orange);
    filter: drop-shadow(0 0 20px var(--naruto-orange));
}

.link-chakra-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.link-chakra-ring {
    position: absolute;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: chakraRingRotate 4s linear infinite; /* Slower rotation */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.link-chakra-ring:nth-child(1) {
    width: 170px;
    height: 170px;
    border-color: rgba(0, 191, 255, 0.8);
    animation-duration: 2s; /* Slower */
    border-style: dashed;
}

.link-chakra-ring:nth-child(2) {
    width: 200px;
    height: 200px;
    border-color: rgba(255, 107, 53, 0.7);
    animation-duration: 3s; /* Slower */
    animation-direction: reverse;
    border-style: dotted;
}

.link-chakra-ring:nth-child(3) {
    width: 230px;
    height: 230px;
    border-color: rgba(255, 215, 0, 0.6);
    animation-duration: 4s; /* Slower */
    border-style: solid;
}

.link-redirect-text {
    font-family: 'Orbitron', monospace;
    font-size: 2.2rem;
    color: var(--naruto-orange);
    text-shadow:
        0 0 20px var(--naruto-orange),
        0 0 40px var(--naruto-orange),
        0 0 60px rgba(255, 107, 53, 0.5);
    margin-bottom: 20px;
    animation: textPulse 2s ease-in-out infinite; /* Slower pulse */
    font-weight: 700;
}

.link-jutsu-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    color: var(--chakra-blue);
    text-shadow:
        0 0 15px var(--chakra-blue),
        0 0 30px var(--chakra-blue);
    margin-bottom: 25px;
    font-weight: 600;
    animation: jutsuGlow 3s ease-in-out infinite; /* Add glow animation */
}

.link-destination {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--golden-yellow);
    text-shadow:
        0 0 10px var(--golden-yellow),
        0 0 20px var(--golden-yellow);
    opacity: 0.9;
    word-break: break-all;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    margin-bottom: 25px;
}

.link-progress-container {
    margin-top: 20px;
    text-align: center;
}

.link-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--naruto-orange);
    margin-bottom: 10px;
}

.link-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--chakra-blue), var(--naruto-orange), var(--golden-yellow));
    border-radius: 10px;
    animation: progressFill 4s linear forwards;
    width: 0%;
    box-shadow: 0 0 10px var(--naruto-orange);
}

.link-progress-text {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: var(--chakra-blue);
    text-shadow: 0 0 8px var(--chakra-blue);
    animation: progressTextBlink 1s ease-in-out infinite;
}

.link-kanji-effects {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
    z-index: 10;
}

.link-kanji {
    font-size: 2.5rem;
    color: var(--naruto-orange);
    text-shadow:
        0 0 20px var(--naruto-orange),
        0 0 40px var(--naruto-orange),
        0 0 60px rgba(255, 107, 53, 0.3);
    animation: kanjiFloat 4s ease-in-out infinite; /* Slower float */
    opacity: 0.9;
    font-weight: 700;
}

.link-kanji:nth-child(1) { animation-delay: 0s; }
.link-kanji:nth-child(2) { animation-delay: 0.5s; }
.link-kanji:nth-child(3) { animation-delay: 1s; }

/* Link Animation Keyframes */
@keyframes linkOverlayAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        backdrop-filter: blur(15px);
    }
}

@keyframes shurikenSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes chakraRingRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes textPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        text-shadow:
            0 0 20px var(--naruto-orange),
            0 0 40px var(--naruto-orange),
            0 0 60px rgba(255, 107, 53, 0.5);
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
        text-shadow:
            0 0 30px var(--naruto-orange),
            0 0 60px var(--naruto-orange),
            0 0 90px rgba(255, 107, 53, 0.7);
    }
}

@keyframes jutsuGlow {
    0%, 100% {
        text-shadow:
            0 0 15px var(--chakra-blue),
            0 0 30px var(--chakra-blue);
    }
    50% {
        text-shadow:
            0 0 25px var(--chakra-blue),
            0 0 50px var(--chakra-blue),
            0 0 75px rgba(0, 191, 255, 0.5);
    }
}

@keyframes kanjiFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.9;
    }
    25% {
        transform: translateY(-10px) rotate(2deg) scale(1.05);
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) rotate(0deg) scale(1.1);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-10px) rotate(-2deg) scale(1.05);
        opacity: 1;
    }
}

@keyframes progressFill {
    0% { width: 0%; }
    25% { width: 25%; }
    50% { width: 50%; }
    75% { width: 75%; }
    100% { width: 100%; }
}

@keyframes progressTextBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Mobile link animation adjustments */
@media (max-width: 768px) {
    .naruto-link-content {
        padding: 20px;
    }
    .mobile-shuriken {
    display: none;
}

    .link-shuriken-spinner {
        width: 120px;
        height: 120px;
        margin-bottom: 30px;
    }

    .link-redirect-text {
        font-size: 1.6rem;
    }

    .link-jutsu-text {
        font-size: 1.1rem;
    }

    .link-destination {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    .link-kanji {
        font-size: 1.8rem;
        gap: 25px;
    }

    .link-kanji-effects {
        gap: 25px;
    }

    .link-chakra-ring:nth-child(1) {
        width: 140px;
        height: 140px;
    }

    .link-chakra-ring:nth-child(2) {
        width: 160px;
        height: 160px;
    }

    .link-chakra-ring:nth-child(3) {
        width: 180px;
        height: 180px;
    }

    .link-progress-text {
        font-size: 0.8rem;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--naruto-black);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--naruto-orange), var(--chakra-blue));
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--chakra-blue), var(--naruto-orange));
}