:root {
                --bg-deep: #0a0a12;
                --bg-panel: #111827;
                --border-light: #5c7a9a;
                --border-highlight: #a0c4e8;
                --border-shadow: #1a2a3a;
                --text-primary: #e8e8f0;
                --text-secondary: #b0c4d8;
                --text-dim: #6a7a8a;
                --neon-pink: #ff6b9d;
                --neon-cyan: #00e5ff;
                --neon-green: #39ff14;
                --neon-gold: #ffd740;
                --neon-purple: #b388ff;
                --hp-green: #4cff4c;
                --hp-yellow: #ffe040;
                --hp-red: #ff4444;
                --mp-blue: #4488ff;
                --mp-purple: #aa66ff;
                --exp-gold: #ffaa00;
                --window-bg: #1a1e2e;
                --crt-flicker: rgba(255, 255, 255, 0.015);
            }
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                background: var(--bg-deep);
                background-image:
                    radial-gradient(ellipse at center, rgba(40, 20, 60, 0.6) 0%, transparent 70%),
                    radial-gradient(circle at 20% 30%, rgba(80, 30, 100, 0.25) 0%, transparent 50%),
                    radial-gradient(circle at 75% 60%, rgba(20, 50, 90, 0.3) 0%, transparent 50%),
                    radial-gradient(circle at 50% 80%, rgba(60, 10, 80, 0.2) 0%, transparent 40%);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: 'VT323', 'Courier New', monospace;
                padding: 20px;
                cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect x='2' y='2' width='4' height='4' fill='white'/><rect x='6' y='6' width='4' height='4' fill='white'/><rect x='10' y='10' width='4' height='4' fill='white'/></svg>") 8 8, auto;
                position: relative;
                overflow-x: hidden;
                transition: filter 0.3s ease;
            }
            body.modal-open {
                overflow: hidden;
            }
            body.modal-open .main-container {
                filter: blur(2px) brightness(0.7);
                pointer-events: none;
                transition: filter 0.35s ease, brightness 0.35s ease;
            }
            body::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 9999;
                background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px);
                animation: scanlineMove 0.1s linear infinite;
            }
            @keyframes scanlineMove {
                0% { background-position: 0 0; }
                100% { background-position: 0 4px; }
            }
            body::after {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 9998;
                background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
                box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5);
            }
            .particles-container {
                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(--neon-cyan);
                animation: floatUp 6s ease-in infinite;
                opacity: 0;
                box-shadow: 0 0 6px var(--neon-cyan), 0 0 12px var(--neon-cyan);
            }
            .particle:nth-child(odd) {
                background: var(--neon-pink);
                box-shadow: 0 0 6px var(--neon-pink), 0 0 12px var(--neon-pink);
            }
            .particle:nth-child(3n) {
                background: var(--neon-gold);
                box-shadow: 0 0 6px var(--neon-gold), 0 0 12px var(--neon-gold);
                width: 3px;
                height: 3px;
            }
            .particle:nth-child(5n+2) {
                background: var(--neon-purple);
                box-shadow: 0 0 6px var(--neon-purple), 0 0 12px var(--neon-purple);
                width: 5px;
                height: 5px;
            }
            @keyframes floatUp {
                0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
                10% { opacity: 1; transform: translateY(-20px) translateX(5px) scale(1); }
                30% { transform: translateY(-80px) translateX(-15px) scale(1.5); opacity: 0.9; }
                60% { transform: translateY(-180px) translateX(20px) scale(0.8); opacity: 0.5; }
                100% { transform: translateY(-350px) translateX(-30px) scale(0); opacity: 0; }
            }
            .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; }
            .particle:nth-child(2) { left: 25%; animation-delay: 1.5s; animation-duration: 5.5s; }
            .particle:nth-child(3) { left: 40%; animation-delay: 3s; animation-duration: 6.5s; }
            .particle:nth-child(4) { left: 55%; animation-delay: 0.8s; animation-duration: 8s; }
            .particle:nth-child(5) { left: 70%; animation-delay: 2.2s; animation-duration: 5s; }
            .particle:nth-child(6) { left: 85%; animation-delay: 4s; animation-duration: 7.5s; }
            .particle:nth-child(7) { left: 15%; animation-delay: 3.5s; animation-duration: 6s; }
            .particle:nth-child(8) { left: 60%; animation-delay: 1s; animation-duration: 5.8s; }
            .particle:nth-child(9) { left: 78%; animation-delay: 2.8s; animation-duration: 6.8s; }
            .particle:nth-child(10) { left: 32%; animation-delay: 4.5s; animation-duration: 7.2s; }
            .main-container {
                position: relative;
                z-index: 10;
                width: 100%;
                max-width: 820px;
                display: flex;
                flex-direction: column;
                gap: 16px;
                transition: filter 0.35s ease, opacity 0.35s ease;
            }
            .pixel-panel {
                background: var(--window-bg);
                border: 3px solid var(--border-light);
                outline: 2px solid var(--border-shadow);
                outline-offset: -6px;
                box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05), 0 0 0 4px var(--border-shadow), 0 0 0 6px rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 60px rgba(100, 60, 180, 0.15);
                position: relative;
                padding: 20px 24px;
                image-rendering: pixelated;
            }
            .pixel-panel::before {
                content: '◆';
                position: absolute;
                top: -10px;
                left: -10px;
                font-size: 16px;
                color: var(--neon-gold);
                text-shadow: 0 0 8px var(--neon-gold), 0 0 16px var(--neon-gold);
                animation: cornerGlow 2s ease-in-out infinite;
                z-index: 5;
            }
            .pixel-panel::after {
                content: '◆';
                position: absolute;
                bottom: -10px;
                right: -10px;
                font-size: 16px;
                color: var(--neon-cyan);
                text-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan);
                animation: cornerGlow 2s ease-in-out 1s infinite;
                z-index: 5;
            }
            @keyframes cornerGlow {
                0%, 100% { opacity: 0.6; transform: scale(1); }
                50% { opacity: 1; transform: scale(1.3); }
            }
            .title-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #0d0f1a;
                border: 3px solid var(--border-light);
                outline: 2px solid var(--border-shadow);
                outline-offset: -6px;
                box-shadow: 0 0 0 4px var(--border-shadow), 0 0 0 6px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.5);
                padding: 14px 20px;
                position: relative;
            }
            .title-bar::before {
                content: '📁';
                position: absolute;
                left: -8px;
                top: -14px;
                font-size: 18px;
                animation: bounceIcon 3s ease-in-out infinite;
            }
            @keyframes bounceIcon {
                0%, 100% { transform: translateY(0); }
                30% { transform: translateY(-6px); }
                50% { transform: translateY(0); }
                70% { transform: translateY(-3px); }
            }
            .title-text {
                font-family: 'Press Start 2P', 'Courier New', monospace;
                font-size: 13px;
                color: var(--text-primary);
                letter-spacing: 2px;
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 25px rgba(180, 140, 255, 0.5);
                animation: titleFlicker 5s ease-in-out infinite;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            @keyframes titleFlicker {
                0%, 100% { opacity: 1; }
                92% { opacity: 1; }
                93% { opacity: 0.7; }
                94% { opacity: 1; }
                96% { opacity: 0.8; }
                97% { opacity: 1; }
            }
            .title-blip {
                display: inline-block;
                width: 10px;
                height: 10px;
                background: var(--neon-green);
                animation: blipBlink 1s step-end infinite;
                box-shadow: 0 0 8px var(--neon-green);
            }
            @keyframes blipBlink {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.15; }
            }
            .title-lv {
                font-family: 'Press Start 2P', monospace;
                font-size: 10px;
                color: var(--neon-gold);
                background: rgba(0, 0, 0, 0.5);
                padding: 6px 10px;
                border: 2px solid var(--neon-gold);
                text-shadow: 0 0 8px var(--neon-gold);
                letter-spacing: 1px;
            }
            .content-grid {
                display: grid;
                grid-template-columns: 280px 1fr;
                gap: 16px;
            }
            .character-panel {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
            }
            .avatar-frame {
                width: 140px;
                height: 140px;
                border: 4px solid var(--border-highlight);
                outline: 3px solid var(--border-shadow);
                outline-offset: -8px;
                box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 0 5px var(--border-shadow), 0 0 0 7px rgba(0, 0, 0, 0.4), 0 0 30px rgba(180, 130, 255, 0.35);
                background: #1a1a2e;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                overflow: hidden;
                image-rendering: pixelated;
            }
            .pixel-avatar {
                display: grid;
                grid-template-columns: repeat(8, 14px);
                grid-template-rows: repeat(8, 14px);
                gap: 1px;
                image-rendering: pixelated;
                transform: scale(1.05);
            }
            .pixel-avatar .px { width: 14px; height: 14px; border-radius: 1px; }
            .px-skin { background: #f4c7a8; }
            .px-skin-dark { background: #e8b898; }
            .px-hair { background: #3a2a5c; }
            .px-hair-light { background: #5a4a7c; }
            .px-eye { background: #1a1a1a; }
            .px-eye-highlight { background: #ffffff; }
            .px-mouth { background: #d4887a; }
            .px-clothes { background: #c0392b; }
            .px-clothes-dark { background: #8b1a1a; }
            .px-accent { background: #f0c040; }
            .px-bg { background: transparent; }
            .avatar-label {
                font-family: 'Press Start 2P', monospace;
                font-size: 14px;
                color: var(--neon-cyan);
                text-shadow: 0 0 8px var(--neon-cyan);
                letter-spacing: 1px;
                text-align: center;
                animation: labelPulse 3s ease-in-out infinite;
            }
            @keyframes labelPulse {
                0%, 100% { opacity: 0.7; }
                50% { opacity: 1; text-shadow: 0 0 16px var(--neon-cyan), 0 0 30px var(--neon-cyan); }
            }
            .status-bars {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .status-row {
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: 'Press Start 2P', monospace;
                font-size: 8px;
                color: var(--text-primary);
            }
            .status-label { width: 28px; text-align: right; letter-spacing: 0px; flex-shrink: 0; }
            .status-bar-outer {
                flex: 1;
                height: 14px;
                border: 2px solid #333;
                background: #0a0a0a;
                position: relative;
                overflow: hidden;
                box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
            }
            .status-bar-inner {
                height: 100%;
                width: 0%;
                transition: width 0.8s ease-out;
                position: relative;
            }
            .status-bar-inner.hp {
                background: linear-gradient(180deg, #5cff5c 0%, #2a8a2a 100%);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px rgba(76, 255, 76, 0.4);
            }
            .status-bar-inner.mp {
                background: linear-gradient(180deg, #66aaff 0%, #2244aa 100%);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px rgba(68, 136, 255, 0.4);
            }
            .status-bar-inner.exp {
                background: linear-gradient(180deg, #ffcc44 0%, #aa7700 100%);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 170, 0, 0.4);
            }
            .status-value {
                font-size: 7px;
                min-width: 42px;
                text-align: left;
                flex-shrink: 0;
                color: var(--text-secondary);
            }
            .status-bar-inner::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 50%;
                background: rgba(255, 255, 255, 0.15);
                pointer-events: none;
            }
            .stats-table {
                width: 100%;
                font-family: 'Press Start 2P', monospace;
                font-size: 14px;
                color: var(--text-secondary);
                border-collapse: collapse;
            }
            .stats-table tr { border-bottom: 1px dotted rgba(255, 255, 255, 0.1); }
            .stats-table td { padding: 5px 4px; letter-spacing: 0.5px; }
            .stats-table .stat-name { color: var(--neon-gold); text-shadow: 0 0 4px rgba(255, 215, 64, 0.4); white-space: nowrap; }
            .stats-table .stat-val { text-align: right; color: var(--text-primary); font-size: 9px; }
            .main-panel { display: flex; flex-direction: column; gap: 16px; }
            .dialog-box {
                position: relative;
                padding: 16px 20px;
                background: #151929;
                border: 2px solid #4a5568;
                box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25), 0 0 0 1px #2d3748;
            }
            .dialog-box .dialog-arrow {
                position: absolute;
                bottom: -12px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 12px solid #4a5568;
                animation: arrowBounce 1.5s ease-in-out infinite;
            }
            @keyframes arrowBounce {
                0%, 100% { bottom: -12px; opacity: 0.7; }
                50% { bottom: -18px; opacity: 1; }
            }
            .dialog-text {
                font-family: 'VT323', 'Courier New', monospace;
                font-size: 18px;
                color: #d0d8e8;
                line-height: 1.5;
                letter-spacing: 0.5px;
            }
            .dialog-text .highlight { color: var(--neon-gold); text-shadow: 0 0 6px rgba(255, 215, 64, 0.5); font-weight: bold; }
            .dialog-text .highlight2 { color: var(--neon-pink); text-shadow: 0 0 6px rgba(255, 107, 157, 0.5); }
            .skills-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
            .skill-card {
                background: #131725;
                border: 2px solid #3a4055;
                padding: 12px 14px;
                transition: all 0.2s ease;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .skill-card:hover {
                border-color: var(--neon-cyan);
                box-shadow: 0 0 20px rgba(0, 229, 255, 0.2), inset 0 0 20px rgba(0, 229, 255, 0.05);
                transform: translateY(-2px);
            }
            .skill-card:active { transform: scale(0.96); transition: transform 0.05s ease; }
            .skill-card .skill-icon { font-size: 22px; margin-bottom: 4px; display: block; }
            .skill-card .skill-name { font-family: 'Press Start 2P', monospace;  color: var(--neon-cyan); letter-spacing: 1px; text-shadow: 0 0 6px rgba(0, 229, 255, 0.4); }
            .skill-card .skill-desc { font-family: 'VT323', monospace; font-size: 14px; color: #8899aa; margin-top: 4px; letter-spacing: 0.3px; }
            .skill-card .skill-lv { position: absolute; top: 8px; right: 10px; font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-gold); background: rgba(0, 0, 0, 0.5); padding: 2px 6px; border: 1px solid rgba(255, 215, 64, 0.4); }
            .menu-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
            .menu-item {
                font-family: 'Press Start 2P', monospace;
                font-size: 9px;
                padding: 10px 16px;
                background: #111520;
                border: 2px solid #3a4055;
                color: #b0c0d0;
                cursor: pointer;
                letter-spacing: 1px;
                transition: all 0.15s ease;
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 6px;
                position: relative;
                user-select: none;
            }
            .menu-item:hover {
                border-color: var(--neon-pink);
                color: #ffffff;
                box-shadow: 0 0 16px rgba(255, 107, 157, 0.35), inset 0 0 12px rgba(255, 107, 157, 0.08);
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
            }
            .menu-item:active { background: #1a1025; transform: scale(0.94); transition: transform 0.04s ease; }
            .menu-item .menu-cursor { display: inline-block; animation: cursorBlink 0.9s step-end infinite; color: var(--neon-pink); font-size: 12px; }
            @keyframes cursorBlink {
                0%, 100% { opacity: 1; }
                50% { opacity: 0; }
            }
            .menu-item .menu-dot { width: 6px; height: 6px; background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); animation: dotPulse 1.5s ease-in-out infinite; }
            @keyframes dotPulse {
                0%, 100% { opacity: 0.5; transform: scale(1); }
                50% { opacity: 1; transform: scale(1.6); }
            }
            .status-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-family: 'Press Start 2P', monospace;
                font-size: 8px;
                color: #667788;
                padding: 8px 4px;
                letter-spacing: 0.5px;
            }
            .status-footer .footer-dot { display: inline-block; width: 6px; height: 6px; background: var(--neon-green); margin-right: 4px; box-shadow: 0 0 5px var(--neon-green); animation: dotPulse 2s ease-in-out infinite; }
            .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 100000;
                background: rgba(0, 0, 0, 0.75);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity 0.35s ease, visibility 0.35s ease;
                background-image: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.85) 100%), repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 6px);
            }
            .modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
            .modal-window {
                position: relative;
                background: var(--window-bg);
                border: 4px solid var(--border-light);
                outline: 3px solid var(--border-shadow);
                outline-offset: -8px;
                box-shadow: inset 0 0 0 3px rgba(255,255,255,0.04), 0 0 0 6px var(--border-shadow), 0 0 0 9px rgba(0,0,0,0.5), 0 0 60px rgba(100,60,180,0.35), 0 0 120px rgba(255,107,157,0.2), 0 20px 60px rgba(0,0,0,0.7);
                width: 90%;
                max-width: 560px;
                max-height: 85vh;
                overflow-y: auto;
                padding: 0;
                transform: scale(0.85);
                transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                image-rendering: pixelated;
                clip-path: polygon(0px 12px, 4px 12px, 4px 4px, 12px 4px, 12px 0px, calc(100% - 12px) 0px, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 12px), 0px calc(100% - 12px));
            }
            .modal-overlay.active .modal-window { transform: scale(1); }
            .modal-title-bar { display: flex; align-items: center; justify-content: space-between; background: #0d0f1a; border-bottom: 3px solid var(--border-light); padding: 14px 18px; position: sticky; top: 0; z-index: 2; }
            .modal-title-bar .modal-title-text { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--text-primary); letter-spacing: 2px; text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(180,140,255,0.5); display: flex; align-items: center; gap: 8px; }
            .modal-title-bar .modal-title-icon { display: inline-block; width: 12px; height: 12px; background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); animation: blipBlink 1.2s step-end infinite; }
            .modal-close-btn { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #ff6666; background: rgba(0,0,0,0.5); border: 2px solid #ff4444; padding: 6px 10px; cursor: pointer; letter-spacing: 0; line-height: 1; transition: all 0.15s ease; text-shadow: 0 0 8px #ff4444; box-shadow: 0 0 10px rgba(255,68,68,0.3); user-select: none; }
            .modal-close-btn:hover { background: #ff4444; color: #000; border-color: #fff; box-shadow: 0 0 25px rgba(255,68,68,0.7), 0 0 50px rgba(255,68,68,0.4); text-shadow: none; transform: scale(1.08); }
            .modal-content { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
            .modal-avatar-section { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
            .modal-avatar-mini { width: 72px; height: 72px; border: 3px solid var(--border-highlight); outline: 2px solid var(--border-shadow); outline-offset: -6px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3), 0 0 0 4px var(--border-shadow), 0 0 20px rgba(180,130,255,0.3); background: #1a1a2e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
            .modal-avatar-mini .pixel-avatar { grid-template-columns: repeat(8,8px); grid-template-rows: repeat(8,8px); gap:0.5px; transform:scale(1);}
            .modal-avatar-mini .pixel-avatar .px { width:8px; height:8px;}
            .modal-player-name { font-family:'Press Start 2P'; font-size:12px; color:var(--text-primary); letter-spacing:1px; margin-bottom:4px;}
            .modal-player-title { font-family:'Press Start 2P'; font-size:13px; color:var(--neon-gold); margin-bottom:6px;}
            .modal-player-id { font-family:'VT323'; font-size:15px; color:#8899aa; }
            .modal-divider { width:100%; height:2px; background: repeating-linear-gradient(90deg, var(--border-light) 0px, var(--border-light) 8px, transparent 8px, transparent 14px); opacity:0.6; margin:2px 0;}
            .modal-bio { font-family:'VT323'; font-size:17px; color:#c8d0dc; line-height:1.6; background:rgba(0,0,0,0.25); padding:14px 16px; border-left:4px solid var(--neon-cyan); }
            .modal-bio .highlight { color:var(--neon-gold); text-shadow:0 0 6px rgba(255,215,64,0.4);}
            .modal-bio .highlight2 { color:var(--neon-pink); text-shadow:0 0 6px rgba(255,107,157,0.4);}
            .modal-bio .highlight3 { color:var(--neon-cyan); text-shadow:0 0 6px rgba(0,229,255,0.4);}
            .modal-tags { display:flex; flex-wrap:wrap; gap:8px;}
            .modal-tag { font-family:'Press Start 2P'; font-size:10px; padding:6px 10px; border:2px solid; letter-spacing:1px; transition:0.2s; cursor:default;}
            .modal-tag.tag-frontend { border-color:#00e5ff; color:#00e5ff; }
            .modal-tag.tag-design { border-color:#ff6b9d; color:#ff6b9d; }
            .modal-tag.tag-creative { border-color:#ffd740; color:#ffd740; }
            .modal-tag.tag-code { border-color:#39ff14; color:#39ff14; }
            .modal-tag.tag-pixel { border-color:#b388ff; color:#b388ff; }
            .modal-tag:hover { transform:translateY(-3px); box-shadow:0 0 20px currentColor;}
            .modal-contact-list { list-style:none; display:flex; flex-direction:column; gap:8px;}
            .modal-contact-list li { font-family:'VT323'; font-size:16px; color:#b0c0d0; display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.08);}
            .modal-contact-list li:hover { border-color:var(--neon-cyan); background:rgba(0,229,255,0.04);}
            .modal-contact-list .contact-icon { font-size:18px; width:28px; text-align:center;}
            .modal-contact-list .contact-value { color:var(--text-primary); word-break:break-all;}
            .modal-contact-list a { color:var(--neon-cyan); text-decoration:none; }
            .modal-contact-list a:hover { color:#fff; text-shadow:0 0 12px var(--neon-cyan);}
            .modal-footer-hint { text-align:center; font-family:'Press Start 2P'; font-size:10px; color:#556677; }
            @media (max-width: 700px) {
                .content-grid { grid-template-columns: 1fr; }
                .character-panel { flex-direction: row; flex-wrap: wrap; justify-content: center; }
                .avatar-frame { width: 90px; height: 90px; }
                .pixel-avatar { grid-template-columns: repeat(8, 10px); grid-template-rows: repeat(8, 10px); }
                .pixel-avatar .px { width: 10px; height: 10px; }
                .skills-section { grid-template-columns: 1fr; }
                .modal-window { max-width: 94%; }
            }