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

:root {
    --bg-color: #0f172a;
    --panel-bg: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-red: #ef4444;
    --accent-red-hover: #dc2626;
    --accent-gold: #f59e0b;
    --accent-gold-hover: #d97706;
    --success: #10b981;
    --border-color: #334155;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, .stat-value, .btn-icon {
    font-family: 'Jua', sans-serif;
}

#app-container {
    width: 100%;
    max-width: 600px;
    height: 100vh;
    max-height: 900px;
    background-color: var(--panel-bg);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}

/* Stats Bar */
#stats-bar {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.5rem;
    color: var(--accent-gold);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.hp-value {
    color: var(--success);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* Main Area */
#main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

/* Sword Display */
#sword-display {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    transition: all 0.5s ease;
}

#sword-name {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #e2e8f0;
    transition: color 0.3s, text-shadow 0.3s;
}

.sword-stats {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.sword-stats span {
    color: var(--text-primary);
    font-weight: bold;
}

/* Sword Visual Placeholder (CSS Drawing) */
.sword-visual {
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}

#sword-blade {
    width: 20px;
    height: 100px;
    background: linear-gradient(to right, #94a3b8, #e2e8f0, #94a3b8);
    clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0 20%);
    transition: all 0.5s ease;
}

#sword-guard {
    width: 60px;
    height: 15px;
    background: #475569;
    border-radius: 5px;
    transition: all 0.5s ease;
}

#sword-hilt {
    width: 16px;
    height: 30px;
    background: #593f2d;
    border-radius: 2px 2px 5px 5px;
}

/* Actions */
#actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.action-btn {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 15px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: #334155;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.action-btn:hover {
    background: #475569;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.action-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.primary-btn {
    background: var(--accent-blue);
}
.primary-btn:hover { background: var(--accent-blue-hover); }

.danger-btn {
    background: var(--accent-red);
}
.danger-btn:hover { background: var(--accent-red-hover); }

.special-btn {
    background: linear-gradient(45deg, #8b5cf6, #ec4899);
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
    width: 100%;
    margin-bottom: 10px;
}
.special-btn:hover {
    background: linear-gradient(45deg, #7c3aed, #db2777);
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.7);
}

.double-btn {
    background: linear-gradient(45deg, #f59e0b, #ef4444);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
    width: 100%;
}
.double-btn:hover {
    background: linear-gradient(45deg, #d97706, #dc2626);
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.7);
}

#skill-area {
    margin-bottom: 20px;
}

.hidden {
    display: none !important;
}

/* Event Log */
#event-log-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#event-log-container h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: var(--text-secondary);
}

#event-log {
    flex: 1;
    overflow-y: auto;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.log-entry {
    padding: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    animation: fadeIn 0.3s ease;
}

.log-success { color: var(--success); border-left: 3px solid var(--success); }
.log-fail { color: var(--accent-red); border-left: 3px solid var(--accent-red); }
.log-info { color: var(--accent-blue); border-left: 3px solid var(--accent-blue); }
.log-battle { color: var(--accent-gold); border-left: 3px solid var(--accent-gold); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Battle Modal */
.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(5px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: var(--panel-bg);
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    text-align: center;
}

.modal-content h2 {
    color: var(--accent-red);
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.battle-arena {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.fighter {
    flex: 1;
}

.fighter h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.vs {
    font-family: 'Jua', sans-serif;
    font-size: 2rem;
    color: var(--accent-gold);
    margin: 0 15px;
}

.health-bar {
    width: 100%;
    height: 15px;
    background: #334155;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.hp-fill {
    height: 100%;
    background: var(--success);
    width: 100%;
    transition: width 0.3s ease, background 0.3s ease;
}

.fighter p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    height: 40px;
}

#enemy-visual-container {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

#enemy-character {
    font-size: 4rem;
    animation: float 3s ease-in-out infinite;
    transition: transform 0.1s;
}

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

#slice-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: crosshair;
}

.blinking-text {
    color: var(--accent-gold);
    font-size: 1.1rem;
    margin-bottom: 10px;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.battle-actions {
    display: flex;
    gap: 15px;
}

.battle-actions button {
    flex: 1;
}

/* Training & Trophy Modals */
.clickable {
    cursor: pointer;
    transition: transform 0.2s;
}
.clickable:hover {
    transform: scale(1.1);
}

#train-slice-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: crosshair;
}

#robot-dummy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    z-index: 5;
    transition: transform 0.1s;
}

#trophy-road-container {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.trophy-milestone {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: #334155;
    border-radius: 8px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.trophy-milestone.achieved {
    opacity: 1;
    background: linear-gradient(90deg, #1e293b, #b45309);
    border: 1px solid var(--accent-gold);
}

.milestone-req {
    font-family: 'Jua', sans-serif;
    color: var(--accent-gold);
    font-size: 1.2rem;
}

.milestone-reward {
    font-weight: bold;
}

/* Shop Modal Styles */
.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-item .item-name {
    font-weight: bold;
    font-size: 1.1rem;
}

.shop-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
    min-width: 90px;
}

.shop-btn.equipped {
    background: var(--success);
    cursor: default;
}

/* Sword Levels Effects */
.level-6 #sword-name { color: #8b5cf6; text-shadow: 0 0 10px rgba(139, 92, 246, 0.5); }
.level-6 #sword-blade { background: linear-gradient(to right, #8b5cf6, #c4b5fd, #8b5cf6); box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); }

.level-7 #sword-name { color: #ec4899; text-shadow: 0 0 15px rgba(236, 72, 153, 0.6); }
.level-7 #sword-blade { background: linear-gradient(to right, #ec4899, #fbcfe8, #ec4899); box-shadow: 0 0 20px rgba(236, 72, 153, 0.6); }

.level-8 #sword-name, .level-9 #sword-name { color: #f59e0b; text-shadow: 0 0 20px rgba(245, 158, 11, 0.7); }
.level-8 #sword-blade, .level-9 #sword-blade { background: linear-gradient(to right, #f59e0b, #fde68a, #f59e0b); box-shadow: 0 0 25px rgba(245, 158, 11, 0.7); }

.level-10 #sword-name { color: #ef4444; text-shadow: 0 0 25px rgba(239, 68, 68, 0.8); }
.level-10 #sword-blade { background: linear-gradient(to right, #ef4444, #fecaca, #ef4444); box-shadow: 0 0 30px rgba(239, 68, 68, 0.8); width: 24px; height: 120px; }

.level-11 #sword-name { 
    background: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow 3s linear infinite;
    text-shadow: 0 0 30px rgba(255,255,255,0.5);
}
.level-11 #sword-blade { 
    background: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
    width: 30px;
    height: 140px;
    animation: pulse 1s alternate infinite;
}

.level-12 #sword-name {
    color: #000;
    text-shadow: 0 0 10px #8b5cf6, 0 0 20px #8b5cf6, 0 0 30px #c026d3;
    animation: pulse 1.5s alternate infinite;
}
.level-12 #sword-blade {
    background: linear-gradient(to bottom, #111827, #4c1d95, #111827);
    box-shadow: 0 0 50px #8b5cf6, inset 0 0 20px #c026d3;
    width: 34px;
    height: 160px;
    animation: darkPulse 2s alternate infinite;
    clip-path: polygon(50% 0%, 100% 10%, 90% 100%, 10% 100%, 0% 10%);
}

@keyframes darkPulse {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.1); filter: brightness(1.5); }
}

/* 13강 봉인된 검 */
.level-13 #sword-name {
    color: #94a3b8;
    text-shadow: 0 0 8px #60a5fa, 0 0 16px #93c5fd, 0 0 32px #bfdbfe;
    animation: sealedPulse 2s ease-in-out infinite;
    letter-spacing: 2px;
}
.level-13 #sword-blade {
    background: linear-gradient(to bottom, #1e3a5f, #93c5fd, #1e3a5f);
    box-shadow: 0 0 30px #3b82f6, 0 0 60px #60a5fa, inset 0 0 15px #bfdbfe;
    width: 26px;
    height: 170px;
    animation: sealedGlow 2s ease-in-out infinite;
    clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
    filter: hue-rotate(0deg);
}

@keyframes sealedPulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px #60a5fa, 0 0 16px #93c5fd; }
    50% { opacity: 0.6; text-shadow: 0 0 20px #bfdbfe, 0 0 40px #93c5fd, 0 0 60px #60a5fa; }
}

@keyframes sealedGlow {
    0%, 100% { box-shadow: 0 0 30px #3b82f6, inset 0 0 15px #bfdbfe; filter: brightness(1); }
    50% { box-shadow: 0 0 70px #93c5fd, 0 0 100px #60a5fa, inset 0 0 30px #bfdbfe; filter: brightness(1.4); }
}


@keyframes rainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* Animations */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

}

.shake {
    animation: shake 0.5s;
}

/* 퓨즈 아이템 선택 스타일 */
.fuse-item-selectable {
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.fuse-item-selectable:hover {
    background: rgba(255,255,255,0.1);
}
.fuse-item-selected {
    border: 2px solid #fbbf24 !important;
    background: rgba(251, 191, 36, 0.2) !important;
}

/* 특수 검 (14, 15, 16) 스타일 */
/* 14: 진실의검 */
.level-14 #sword-name {
    color: #ffffff;
    text-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b, 0 0 30px #ffffff;
    letter-spacing: 5px;
    animation: truthNameGlow 1.5s infinite alternate;
}
.level-14 #sword-blade {
    background: linear-gradient(to top, #fde68a, #ffffff, #fef3c7);
    box-shadow: 0 0 20px #fbbf24, 0 0 40px #ffffff, 0 0 60px #f59e0b;
    width: 28px;
    height: 140px;
    border-radius: 5px 5px 0 0;
    animation: truthBladePulse 2s infinite alternate;
}
.level-14 #sword-guard {
    background: #d97706;
    box-shadow: 0 0 15px #f59e0b;
    width: 80px;
    height: 15px;
    border-radius: 8px;
}
.level-14 #sword-hilt {
    background: linear-gradient(to right, #92400e, #b45309, #92400e);
    width: 16px;
    height: 35px;
}
@keyframes truthNameGlow {
    from { text-shadow: 0 0 10px #fbbf24, 0 0 20px #ffffff; transform: scale(1); }
    to { text-shadow: 0 0 20px #f59e0b, 0 0 40px #ffffff, 0 0 60px #fde68a; transform: scale(1.05); }
}
@keyframes truthBladePulse {
    from { box-shadow: 0 0 20px #fbbf24, 0 0 40px #ffffff; transform: scaleY(1); }
    to { box-shadow: 0 0 30px #f59e0b, 0 0 60px #ffffff, 0 0 90px #fde68a; transform: scaleY(1.05); }
}

/* 15: 평범한 검 */
.level-15 #sword-name { color: #d1d5db; text-shadow: 0 0 5px #fff; }
.level-15 #sword-blade { background: #9ca3af; box-shadow: 0 0 10px #fff; width: 20px; height: 100px; }

/* 15: 공허의 검 */
.level-16 #sword-name {
    color: #000;
    text-shadow: 0 0 10px #7e22ce, 0 0 20px #9333ea, 0 0 30px #c084fc;
    letter-spacing: 3px;
    animation: pulse 2s infinite;
}
.level-16 #sword-blade {
    background: radial-gradient(circle, #000 20%, #7e22ce 80%);
    box-shadow: 0 0 40px #9333ea, inset 0 0 20px #000;
    width: 30px;
    height: 150px;
    clip-path: polygon(50% 0%, 100% 20%, 80% 100%, 20% 100%, 0% 20%);
    animation: darkPulse 1.5s infinite alternate;
}

/* 16: 블랙홀 검 */
.level-17 #sword-name {
    color: #000;
    text-shadow: 0 0 10px #fff, 0 0 20px #fbbf24, 0 0 40px #f59e0b;
    letter-spacing: 4px;
    animation: pulse 1s infinite alternate;
}
.level-17 #sword-blade {
    background: #000;
    box-shadow: 0 0 50px #fbbf24, 0 0 100px #f59e0b, inset 0 0 30px #fff;
    width: 36px;
    height: 180px;
    border-radius: 50% 50% 10% 10%;
    animation: darkPulse 0.5s infinite alternate;
}

/* 17: 종말의 검 */
.level-18 #sword-name {
    color: #000;
    text-shadow: 0 0 10px #dc2626, 0 0 20px #ef4444, 0 0 40px #b91c1c, 0 0 80px #7f1d1d;
    letter-spacing: 6px;
    font-weight: 900;
    font-size: 2.5rem;
    animation: apocalypseName 0.8s infinite alternate;
}
.level-18 #sword-blade {
    background: linear-gradient(135deg, #000, #7f1d1d, #ef4444, #000);
    background-size: 400% 400%;
    box-shadow: 0 0 60px #ef4444, 0 0 120px #dc2626, inset 0 0 40px #000;
    width: 44px;
    height: 220px;
    clip-path: polygon(50% 0%, 100% 15%, 85% 100%, 15% 100%, 0% 15%);
    animation: apocalypseBlade 2s infinite, shake 0.3s infinite;
}

@keyframes apocalypseName {
    0% { transform: scale(1); text-shadow: 0 0 10px #dc2626, 0 0 20px #ef4444; }
    100% { transform: scale(1.1) skew(-5deg); text-shadow: 0 0 20px #ef4444, 0 0 40px #b91c1c, 0 0 80px #7f1d1d; }
}

@keyframes apocalypseBlade {
    0% { background-position: 0% 50%; filter: brightness(1) drop-shadow(0 0 20px #ef4444); }
    50% { background-position: 100% 50%; filter: brightness(1.5) drop-shadow(0 0 50px #dc2626); }
    100% { background-position: 0% 50%; filter: brightness(1) drop-shadow(0 0 20px #ef4444); }
}

/* 18: 67단검 (Twin Daggers) */
.level-19 .sword-visual {
    height: 180px; /* Adjusted height */
}
.level-19 #sword-name {
    color: #ff007f;
    text-shadow: 0 0 10px #ff007f, 0 0 20px #f43f5e;
    letter-spacing: 5px;
    font-weight: bold;
    animation: pulse 1s infinite alternate;
}
.level-19 #sword-blade {
    background: transparent;
    box-shadow: none;
    clip-path: none; /* CRITICAL: Remove global sword clip-path that was cutting off the tops! */
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}
/* Left Dagger (Number 6) */
.level-19 #sword-blade::before {
    content: '6';
    font-size: 75px;
    font-family: 'Impact', sans-serif;
    font-weight: 900;
    color: #60a5fa;
    text-shadow: 0 0 8px #3b82f6, 2px 2px 0px #1e3a8a;
    line-height: 1;
    
    /* Handle drawn as background in padding space */
    padding-bottom: 45px;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6) no-repeat;
    background-position: center bottom;
    background-size: 16px 55px;
    
    transform: scaleY(1.2) rotate(-15deg);
    transform-origin: bottom center;
    animation: bladeGlowBlue 1.5s infinite alternate;
}
/* Right Dagger (Number 7) */
.level-19 #sword-blade::after {
    content: '7';
    font-size: 75px;
    font-family: 'Impact', sans-serif;
    font-weight: 900;
    color: #f472b6;
    text-shadow: 0 0 8px #ec4899, 2px 2px 0px #831843;
    line-height: 1;
    
    /* Handle drawn as background in padding space (aligned to left for 7's stem) */
    padding-bottom: 45px;
    background: linear-gradient(135deg, #831843, #ec4899) no-repeat;
    background-position: 5px bottom; /* X=5px, Y=bottom */
    background-size: 16px 55px;
    
    transform: scaleY(1.2) rotate(15deg);
    transform-origin: bottom center;
    animation: bladeGlowPink 1.5s infinite alternate;
}

/* Hide default guard and hilt for 18 since handles are built into the blades */
.level-19 #sword-guard, .level-19 #sword-hilt {
    display: none;
}

/* Level 20: 여명의 검 (Dawn Sword) */
.level-20 #sword-name {
    color: #fde047;
    text-shadow: 0 0 10px #eab308, 0 0 20px #ca8a04, 0 0 30px #f97316, 0 0 40px #ef4444;
    font-weight: 900;
    font-size: 2rem;
    animation: dawn-glow 2s ease-in-out infinite alternate;
}

@keyframes dawn-glow {
    from { text-shadow: 0 0 10px #eab308, 0 0 20px #ca8a04; }
    to { text-shadow: 0 0 20px #fde047, 0 0 40px #f97316, 0 0 60px #ef4444; }
}

.level-20 #sword-blade {
    background: linear-gradient(to top, #ef4444, #f97316, #eab308, #fef08a, #ffffff);
    box-shadow: 0 0 30px #f97316, 0 0 50px #eab308, inset 0 0 20px #ffffff;
    width: 32px;
    height: 180px;
    border-radius: 16px 16px 4px 4px;
    animation: sun-flare 1.5s infinite alternate;
}

@keyframes sun-flare {
    from { box-shadow: 0 0 30px #f97316, 0 0 50px #eab308, inset 0 0 20px #ffffff; }
    to { box-shadow: 0 0 50px #ef4444, 0 0 80px #fde047, inset 0 0 30px #ffffff; }
}

.level-20 #sword-guard {
    background: linear-gradient(to right, #b45309, #f59e0b, #b45309);
    width: 80px;
    height: 16px;
    border-radius: 8px;
    box-shadow: 0 0 20px #f59e0b;
}

.level-20 #sword-hilt {
    background: linear-gradient(to bottom, #78350f, #b45309);
    width: 20px;
    height: 50px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 10px #b45309;
}

/* Level 21: 해적의 문어다리 검 (시즌 검) */
.level-21 #sword-blade {
    width: 60px;
    height: 140px;
    background: linear-gradient(to top right, #6b21a8, #d8b4fe);
    /* 완벽하게 구부러진 문어 다리(초승달/낫) 형태의 폴리곤 */
    clip-path: polygon(
        60% 100%,
        80% 75%,
        90% 50%,
        80% 25%,
        40% 0%,
        20% 5%,
        50% 25%,
        60% 50%,
        50% 75%,
        20% 100%
    );
    position: relative;
    transform: translateX(10px);
    transform-origin: bottom center;
}
.level-21 #sword-blade::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 촘촘하고 정면을 향한 빨판 패턴 */
    background: radial-gradient(circle, #ec4899 4px, #fbcfe8 6px, transparent 7px);
    background-size: 18px 22px;
    background-position: center;
    opacity: 0.85;
}
.level-21 #sword-guard {
    background: #4c1d95;
    border-radius: 10px 10px 5px 5px;
    height: 15px;
    width: 70px;
    box-shadow: 0 0 10px #4c1d95;
}
.level-21 #sword-hilt {
    background: #3b0764;
    position: relative;
    width: 20px;
    height: 45px;
    border-radius: 0 0 10px 10px;
}

/* Level 22: 해적의 검 (시즌 검) */
.level-22 #sword-blade {
    width: 45px;
    height: 120px;
    background: linear-gradient(to right, #94a3b8, #f8fafc, #64748b);
    /* 간지나는 해적검(커틀러스) 형태 */
    clip-path: polygon(
        20% 100%, 
        20% 20%, 
        90% 0%, 
        100% 30%, 
        80% 60%, 
        60% 100%
    );
    position: relative;
    box-shadow: inset -2px -2px 10px rgba(0,0,0,0.5);
    transform: rotate(5deg);
    transform-origin: bottom center;
}
.level-22 #sword-guard {
    background: linear-gradient(to right, #b45309, #fde047, #b45309);
    height: 18px;
    width: 70px;
    clip-path: polygon(0 100%, 15% 0, 85% 0, 100% 100%);
    box-shadow: 0 0 15px #fde047;
}
.level-22 #sword-hilt {
    background: linear-gradient(to bottom, #78350f, #451a03);
    position: relative;
    width: 22px;
    height: 50px;
    border-radius: 0 0 8px 8px;
    box-shadow: inset 0 0 10px #000;
}

/* Level 23: 빛의 검 (한정 조합) */
.level-23 {
    animation: lightSwordFloat 2s ease-in-out infinite;
}
.level-23 #sword-blade {
    width: 40px;
    height: 160px;
    background: linear-gradient(135deg, #fff, #fef08a, #fde047, #fff);
    background-size: 200% 200%;
    clip-path: polygon(50% 0%, 100% 20%, 80% 100%, 20% 100%, 0% 20%);
    box-shadow: 0 0 30px #fde047, 0 0 60px #fef08a, inset 0 0 20px #fff;
    animation: lightSwordPulse 1.5s infinite alternate;
}
.level-23 #sword-guard {
    background: linear-gradient(to right, #f59e0b, #fff, #f59e0b);
    width: 90px;
    height: 25px;
    border-radius: 5px;
    clip-path: polygon(0 50%, 15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%);
    box-shadow: 0 0 20px #f59e0b;
}
.level-23 #sword-hilt {
    background: linear-gradient(to bottom, #d97706, #78350f);
    width: 24px;
    height: 60px;
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 0 10px #f59e0b;
}

@keyframes lightSwordPulse {
    0% { background-position: 0% 50%; box-shadow: 0 0 20px #fde047, inset 0 0 10px #fff; }
    100% { background-position: 100% 50%; box-shadow: 0 0 50px #fff, 0 0 80px #fde047, inset 0 0 30px #fff; }
}
@keyframes lightSwordFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Level 24: 사명의 검 (한정 조합) */
.level-24 {
    animation: missionSwordFloat 3s ease-in-out infinite;
}
.level-24 #sword-blade {
    width: 50px;
    height: 180px;
    background: linear-gradient(to right, #991b1b, #ef4444, #fca5a5, #ef4444, #991b1b);
    clip-path: polygon(50% 0%, 100% 15%, 85% 100%, 15% 100%, 0% 15%);
    box-shadow: 0 0 40px #ef4444, inset 0 0 20px #fca5a5;
    animation: missionSwordPulse 2s infinite alternate;
}
.level-24 #sword-guard {
    background: linear-gradient(to right, #b45309, #fde047, #b45309);
    width: 110px;
    height: 40px;
    border-radius: 5px;
    clip-path: polygon(0 40%, 20% 0, 35% 30%, 50% 0, 65% 30%, 80% 0, 100% 40%, 90% 100%, 10% 100%);
    box-shadow: 0 0 25px #fde047, inset 0 0 10px #ef4444;
}
.level-24 #sword-hilt {
    background: linear-gradient(to bottom, #991b1b, #450a0a);
    width: 28px;
    height: 70px;
    border-radius: 0 0 15px 15px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px #ef4444;
}

@keyframes missionSwordPulse {
    0% { box-shadow: 0 0 30px #ef4444, inset 0 0 15px #fca5a5; }
    100% { box-shadow: 0 0 60px #ef4444, 0 0 100px #fde047, inset 0 0 30px #fff; }
}
@keyframes missionSwordFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}


@keyframes hiltGlowBlue {
    0% { background-position: 0% 50%; box-shadow: inset 0 0 5px #000, 0 0 10px #3b82f6; }
    100% { background-position: 100% 50%; box-shadow: inset 0 0 15px #000, 0 0 25px #60a5fa, 0 0 10px #fff; }
}

@keyframes hiltGlowPink {
    0% { background-position: 0% 50%; box-shadow: inset 0 0 5px #000, 0 0 10px #ec4899; }
    100% { background-position: 100% 50%; box-shadow: inset 0 0 15px #000, 0 0 25px #f472b6, 0 0 10px #fff; }
}

@keyframes bladeGlowBlue {
    0% { text-shadow: 0 0 8px #3b82f6, 2px 2px 0px #1e3a8a; }
    100% { text-shadow: 0 0 20px #60a5fa, 0 0 10px #fff, 2px 2px 0px #1e3a8a; }
}

@keyframes bladeGlowPink {
    0% { text-shadow: 0 0 8px #ec4899, 2px 2px 0px #831843; }
    100% { text-shadow: 0 0 20px #f472b6, 0 0 10px #fff, 2px 2px 0px #831843; }
}

/* Splash Screen */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.splash-text {
    font-size: 3rem;
    color: var(--accent-gold);
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
    animation: splashPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes splashPop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* 레벨 26: 보물의 검 */
.level-26 #sword-blade {
    background: linear-gradient(0deg, #fcd34d 0%, #fef08a 50%, #2dd4bf 100%);
    box-shadow: 0 0 20px #fcd34d, 0 0 40px #2dd4bf, inset 0 0 10px rgba(255, 255, 255, 0.8);
    border: 2px solid #fbbf24;
    width: 32px;
    height: 150px;
    border-radius: 5px 5px 0 0;
    position: relative;
}
.level-26 #sword-blade::before {
    content: '💎';
    font-size: 1.5rem;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 10px #2dd4bf;
}
.level-26 #sword-guard {
    background: linear-gradient(90deg, #b45309 0%, #f59e0b 50%, #b45309 100%);
    box-shadow: 0 0 15px #f59e0b;
    border: 2px solid #fffbeb;
    width: 90px;
    height: 20px;
    border-radius: 8px;
}
.level-26 #sword-hilt {
    background: linear-gradient(90deg, #78350f 0%, #92400e 50%, #78350f 100%);
    border: 2px solid #fcd34d;
    width: 20px;
    height: 45px;
    border-radius: 0 0 10px 10px;
}

/* Level 27: ������ �� */
/* Level 27: 왕자의 검 */
.level-27 #sword-blade {
    background: linear-gradient(180deg, #ffffff 0%, #60a5fa 100%);
    box-shadow: 0 0 30px #60a5fa, inset 0 0 15px #3b82f6;
    border: 3px solid #2563eb;
    width: 34px;
    height: 160px;
    border-radius: 5px 5px 0 0;
    position: relative;
}
.level-27 #sword-blade::before {
    content: '👑';
    font-size: 2.5rem;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 20px #fde047;
    z-index: 2;
}
.level-27 #sword-guard {
    background: linear-gradient(90deg, #eab308 0%, #fef08a 50%, #eab308 100%);
    box-shadow: 0 0 25px #facc15;
    border: 3px solid #ffffff;
    width: 110px;
    height: 28px;
    border-radius: 10px;
    position: relative;
}
.level-27 #sword-guard::after {
    content: '💎';
    font-size: 1.5rem;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 10px #60a5fa;
}
.level-27 #sword-hilt {
    background: linear-gradient(90deg, #78350f 0%, #b45309 50%, #78350f 100%);
    border: 2px solid #facc15;
    width: 24px;
    height: 55px;
    border-radius: 0 0 12px 12px;
}

/* Level 28: 세월의 검 */
.level-28 #sword-blade {
    background: linear-gradient(180deg, #57534e 0%, #292524 50%, #1c1917 100%);
    box-shadow: 0 0 40px #a855f7, inset 0 0 20px #14b8a6;
    border: 3px solid #78716c;
    width: 38px;
    height: 170px;
    clip-path: polygon(50% 0%, 100% 15%, 85% 100%, 15% 100%, 0% 15%);
    position: relative;
    overflow: hidden;
}
.level-28 #sword-blade::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(20,184,166,0.4) 0%, transparent 60%);
    animation: rotateGlow 10s linear infinite;
}
.level-28 #sword-blade::after {
    content: '⏳';
    font-size: 2rem;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 15px #14b8a6;
    opacity: 0.9;
}
.level-28 #sword-guard {
    background: linear-gradient(90deg, #27272a 0%, #52525b 50%, #27272a 100%);
    box-shadow: 0 0 30px #a855f7;
    border: 2px solid #14b8a6;
    width: 130px;
    height: 35px;
    border-radius: 2px 2px 15px 15px;
    position: relative;
}
.level-28 #sword-guard::after {
    content: '✵';
    font-size: 2.5rem;
    color: #14b8a6;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 10px #a855f7;
}
.level-28 #sword-hilt {
    background: repeating-linear-gradient(45deg, #1c1917, #1c1917 10px, #292524 10px, #292524 20px);
    border: 2px solid #57534e;
    box-shadow: inset 0 0 10px #000;
    width: 26px;
    height: 65px;
    border-radius: 0 0 15px 15px;
}

/* Level 29: 로얄의 검 */
.level-29 #sword-blade {
    background: linear-gradient(180deg, #fef08a 0%, #facc15 50%, #ca8a04 100%);
    box-shadow: 0 0 40px #facc15, inset 0 0 20px #ffffff;
    border: 3px solid #fef08a;
    width: 40px;
    height: 180px;
    border-radius: 5px 5px 0 0;
    clip-path: none;
    position: relative;
}
.level-29 #sword-blade::before {
    content: '👑';
    font-size: 2.2rem;
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 15px #facc15;
    z-index: 2;
}
.level-29 #sword-guard {
    background: linear-gradient(90deg, #ca8a04 0%, #fef08a 50%, #ca8a04 100%);
    box-shadow: 0 0 30px #facc15;
    border: 3px solid #ffffff;
    width: 120px;
    height: 30px;
    border-radius: 12px;
    position: relative;
}
.level-29 #sword-hilt {
    background: linear-gradient(90deg, #78350f 0%, #b45309 50%, #78350f 100%);
    border: 2px solid #facc15;
    width: 26px;
    height: 60px;
    border-radius: 0 0 15px 15px;
}

/* Level 30: 과거의 검 */
.level-30 #sword-blade {
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 50%, #64748b 100%);
    box-shadow: 0 0 50px #93c5fd, inset 0 0 25px #e0f2fe;
    border: 2px solid #f1f5f9;
    width: 36px;
    height: 190px;
    border-radius: 5px 5px 0 0;
    clip-path: polygon(50% 0%, 100% 20%, 80% 100%, 20% 100%, 0% 20%);
    position: relative;
    overflow: hidden;
    animation: ghostPulse 3s infinite alternate;
}
.level-30 #sword-blade::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(147,197,253,0.3) 0%, transparent 70%);
    animation: rotateGlow 8s linear infinite reverse;
}
.level-30 #sword-blade::after {
    content: '🕰️';
    font-size: 2.5rem;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 15px #bfdbfe;
    opacity: 0.8;
}
.level-30 #sword-guard {
    background: linear-gradient(90deg, #475569 0%, #94a3b8 50%, #475569 100%);
    box-shadow: 0 0 40px #bfdbfe;
    border: 2px solid #e2e8f0;
    width: 130px;
    height: 25px;
    border-radius: 5px;
    position: relative;
}
.level-30 #sword-guard::after {
    content: '✧';
    font-size: 3rem;
    color: #e0f2fe;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 15px #93c5fd;
}
.level-30 #sword-hilt {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    border: 2px solid #94a3b8;
    box-shadow: inset 0 0 15px #000;
    width: 24px;
    height: 70px;
    border-radius: 0 0 15px 15px;
}

@keyframes ghostPulse {
    0% { filter: drop-shadow(0 0 10px #93c5fd); }
    100% { filter: drop-shadow(0 0 30px #bfdbfe); }
}

@keyframes globalMsgPulse {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 30px #ef4444, inset 0 0 10px #ef4444; }
    50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 60px #ef4444, inset 0 0 30px #ef4444; }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 30px #ef4444, inset 0 0 10px #ef4444; }
}

/* Level 31: 군주의 검 */
.level-31 #sword-blade {
    background: linear-gradient(180deg, #fef08a 0%, #a855f7 50%, #4c1d95 100%);
    box-shadow: 0 0 50px #fbbf24, inset 0 0 25px #c084fc;
    border: 2px solid #fef08a;
    width: 44px;
    height: 220px;
    border-radius: 5px 5px 0 0;
    clip-path: polygon(50% 0%, 100% 20%, 85% 100%, 15% 100%, 0% 20%);
    position: relative;
    overflow: hidden;
    animation: monarchPulse 2s infinite alternate;
}
.level-31 #sword-blade::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(253,224,71,0.4) 0%, transparent 60%);
    animation: rotateGlow 6s linear infinite;
}
.level-31 #sword-blade::after {
    content: '👑';
    font-size: 3rem;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 20px #fef08a;
    filter: drop-shadow(0 0 10px #fbbf24);
}
.level-31 #sword-guard {
    background: linear-gradient(90deg, #ca8a04 0%, #fef08a 50%, #ca8a04 100%);
    box-shadow: 0 0 40px #fbbf24;
    border: 3px solid #fef08a;
    width: 150px;
    height: 35px;
    border-radius: 10px;
    position: relative;
}
.level-31 #sword-guard::after {
    content: '✨';
    font-size: 2.5rem;
    color: #fef08a;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 15px #fef08a;
}
.level-31 #sword-hilt {
    background: linear-gradient(90deg, #3b0764 0%, #581c87 50%, #3b0764 100%);
    border: 2px solid #a855f7;
    box-shadow: inset 0 0 15px #000;
    width: 28px;
    height: 80px;
    border-radius: 0 0 15px 15px;
}

@keyframes monarchPulse {
    0% { filter: drop-shadow(0 0 15px #fbbf24) drop-shadow(0 0 5px #a855f7); }
    100% { filter: drop-shadow(0 0 40px #fef08a) drop-shadow(0 0 20px #d8b4fe); }
}
/* Lucky Block Visuals */
.lucky-block-visual {
    position: relative;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #ca8a04 100%);
    border: 4px solid #fbbf24;
    border-radius: 12px;
    box-shadow: 
        0 0 30px rgba(250, 204, 21, 0.8), 
        inset 0 0 20px rgba(255, 255, 255, 0.6),
        inset 0 0 10px rgba(0,0,0,0.3);
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    animation: luckyFloat 3s ease-in-out infinite, luckyPulse 1.5s infinite alternate;
}
.lucky-block-visual::before {
    content: '?';
    font-size: 4rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5), 2px 2px 0 #ca8a04, -2px -2px 0 #ca8a04, 2px -2px 0 #ca8a04, -2px 2px 0 #ca8a04;
    z-index: 2;
}
.lucky-block-visual-wings {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
}
.lucky-block-visual-wings::before,
.lucky-block-visual-wings::after {
    content: '⚔️';
    position: absolute;
    font-size: 3.5rem;
    top: 15%;
    filter: drop-shadow(0 0 10px #fef08a);
    z-index: 1;
    animation: wingFlap 2s ease-in-out infinite alternate;
}
.lucky-block-visual-wings::before {
    left: -60px;
    transform: rotate(-45deg) scaleX(-1);
}
.lucky-block-visual-wings::after {
    right: -60px;
    transform: rotate(45deg);
}
@keyframes luckyFloat {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    50% { transform: translateY(-15px) scale(1.05) rotate(5deg); }
}
@keyframes luckyPulse {
    0% { box-shadow: 0 0 30px rgba(250, 204, 21, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.6); }
    100% { box-shadow: 0 0 50px rgba(250, 204, 21, 1), inset 0 0 30px rgba(255, 255, 255, 0.8); }
}
@keyframes wingFlap {
    0% { transform: rotate(-45deg) scaleX(-1) translateY(0); }
    100% { transform: rotate(-25deg) scaleX(-1) translateY(-10px); }
}
}

/* 34: 반대의 검 (Level 34) */
.level-34 .sword-visual {
    height: 320px;
}
.level-34 #sword-name {
    color: #a855f7;
    text-shadow: 0 0 10px #a855f7, 0 0 20px #9333ea;
    font-weight: bold;
    animation: reverseGlow 2s infinite alternate;
}
.level-34 #sword-blade {
    /* 원래 칼날 자리에 손잡이 디자인을 적용 (위쪽) */
    width: 25px;
    height: 80px;
    background: #451a03;
    border-radius: 4px;
    border: 2px solid #78350f;
    clip-path: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}
.level-34 #sword-guard {
    width: 100px;
    height: 15px;
    background: #1e293b;
    border: 2px solid #0f172a;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}
.level-34 #sword-hilt {
    /* 원래 손잡이 자리에 거대한 칼날 디자인을 적용 (아래쪽 뾰족하게) */
    width: 60px;
    height: 200px;
    background: linear-gradient(180deg, #d8b4fe, #9333ea);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.8);
    border: none;
}
@keyframes reverseGlow {
    0% { transform: scale(1); filter: hue-rotate(0deg); }
    100% { transform: scale(1.05); filter: hue-rotate(45deg); }
}

/* 35: 최초의 검 (Level 35) */
.level-35 .sword-visual {
    height: 300px;
}
.level-35 #sword-name {
    color: #cd7f32;
    text-shadow: 0 0 10px #cd7f32, 0 0 20px #0f766e;
    font-weight: 900;
    letter-spacing: 3px;
    animation: ancientPulse 3s infinite alternate;
}
.level-35 #sword-blade {
    width: 50px;
    height: 200px;
    background: linear-gradient(90deg, #4e342e 0%, #8b5a2b 30%, #5c4033 50%, #8b5a2b 70%, #4e342e 100%);
    /* 들쭉날쭉하게 깨진 고대 검 모양 */
    clip-path: polygon(50% 0%, 80% 10%, 100% 25%, 75% 45%, 100% 65%, 90% 100%, 10% 100%, 0 70%, 25% 50%, 0 30%, 20% 10%);
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.8),
        0 0 30px rgba(20, 184, 166, 0.5); /* 신비한 고대 유물의 오라 */
}
.level-35 #sword-guard {
    width: 120px;
    height: 35px;
    background: linear-gradient(to right, #5d4037, #8d6e63, #5d4037);
    border: 3px solid #3e2723;
    border-radius: 8px;
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.3);
}
.level-35 #sword-hilt {
    width: 25px;
    height: 90px;
    background: repeating-linear-gradient(
        45deg,
        #3e2723,
        #3e2723 10px,
        #5d4037 10px,
        #5d4037 20px
    );
    border: 2px solid #271410;
    border-radius: 3px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.9);
}

@keyframes ancientPulse {
    0% { filter: brightness(0.8) drop-shadow(0 0 5px #0f766e); }
    100% { filter: brightness(1.2) drop-shadow(0 0 30px #2dd4bf); }
}

/* 36: 태초의 검 (Level 36) */
.level-36 .sword-visual {
    height: 360px;
    animation: genesisFloat 4s ease-in-out infinite, genesisAura 2s infinite alternate;
}
.level-36 #sword-name {
    color: #fef08a;
    text-shadow: 0 0 15px #fef08a, 0 0 30px #eab308, 0 0 45px #ca8a04, 0 0 60px #ffffff;
    font-weight: 900;
    letter-spacing: 5px;
    font-size: 2.2rem;
}
.level-36 #sword-blade {
    width: 45px;
    height: 250px;
    background: linear-gradient(135deg, #ffffff 0%, #fef08a 20%, #eab308 50%, #fef08a 80%, #ffffff 100%);
    clip-path: polygon(50% 0%, 100% 15%, 85% 100%, 15% 100%, 0% 15%);
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.9),
        0 0 50px rgba(250, 204, 21, 0.8),
        0 0 100px rgba(255, 215, 0, 0.5); /* 황금빛 아우라 */
}
.level-36 #sword-guard {
    width: 150px;
    height: 35px;
    background: linear-gradient(90deg, #fef08a, #ffffff, #fef08a);
    border: 3px solid #ca8a04;
    border-radius: 50% 50% 10% 10%;
    box-shadow: 0 0 40px rgba(250, 204, 21, 1);
}
.level-36 #sword-hilt {
    width: 30px;
    height: 100px;
    background: linear-gradient(90deg, #eab308, #ca8a04, #eab308);
    border: 3px solid #854d0e;
    border-radius: 5px;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5);
}

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

@keyframes genesisAura {
    0% { filter: drop-shadow(0 0 20px #fef08a); transform: scale(1); }
    100% { filter: drop-shadow(0 0 60px #eab308) drop-shadow(0 0 120px #ffffff); transform: scale(1.02); }
}

/* 33: 대검 (Level 33) - Greatsword */
.level-33 .sword-visual {
    height: 260px; /* 너무 크지 않게 적당히 묵직하게 조절 */
}
.level-33 #sword-name {
    color: #cbd5e1;
    text-shadow: 0 0 10px #64748b, 0 0 20px #334155;
    font-weight: 900;
    letter-spacing: 4px;
    font-size: 1.5rem;
}
.level-33 #sword-blade {
    width: 45px;
    height: 180px;
    background: linear-gradient(90deg, #475569 0%, #cbd5e1 30%, #94a3b8 50%, #cbd5e1 70%, #475569 100%);
    clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0% 15%);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    border: 2px solid #334155;
}
.level-33 #sword-guard {
    width: 90px;
    height: 25px;
    background: linear-gradient(to right, #1e293b, #475569, #1e293b);
    border: 3px solid #0f172a;
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.8);
}
.level-33 #sword-hilt {
    width: 25px;
    height: 60px;
    background: repeating-linear-gradient(
        0deg,
        #451a03,
        #451a03 5px,
        #78350f 5px,
        #78350f 10px
    );
    border: 2px solid #1e293b;
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}
}

/* 37: 템페스트 골드검 (Level 37) - Tempest Gold Sword */
.level-37 .sword-visual {
    height: 380px;
    animation: tempestFloat 3s ease-in-out infinite;
}
.level-37 #sword-name {
    color: #fbbf24;
    text-shadow: 0 0 20px #f59e0b, 0 0 40px #d97706, 0 0 60px #ffffff;
    font-weight: 900;
    letter-spacing: 6px;
    font-size: 2.5rem;
    animation: tempestNameGlow 2s infinite alternate;
}
.level-37 #sword-blade {
    width: 60px;
    height: 240px;
    background: linear-gradient(to right, #f59e0b, #fef08a, #ffffff, #fef08a, #f59e0b);
    clip-path: polygon(50% 0%, 100% 15%, 85% 100%, 15% 100%, 0% 15%);
    box-shadow: 0 0 50px #fbbf24, inset 0 0 30px #ffffff;
    animation: tempestPulse 2s infinite alternate;
}
.level-37 #sword-guard {
    background: linear-gradient(to right, #d97706, #fbbf24, #fffbeb, #fbbf24, #d97706);
    width: 140px;
    height: 50px;
    border-radius: 5px;
    /* 왕관 모양 */
    clip-path: polygon(0 40%, 20% 0, 35% 30%, 50% 0, 65% 30%, 80% 0, 100% 40%, 90% 100%, 10% 100%);
    box-shadow: 0 0 30px #fde047, inset 0 0 15px #f59e0b;
}
.level-37 #sword-hilt {
    background: linear-gradient(to bottom, #d97706, #78350f);
    width: 35px;
    height: 90px;
    border-radius: 0 0 15px 15px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 20px #fbbf24;
}

@keyframes tempestPulse {
    0% { filter: brightness(1) drop-shadow(0 0 20px #f59e0b); transform: scale(1); }
    100% { filter: brightness(1.3) drop-shadow(0 0 60px #fef08a); transform: scale(1.02); }
}
@keyframes tempestFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes tempestNameGlow {
    0% { transform: scale(1); filter: hue-rotate(0deg); }
    100% { transform: scale(1.05); filter: hue-rotate(15deg); }
}

/* Competitive Mode Button */
.comp-btn {
    background: linear-gradient(135deg, #1e1b4b, #312e81, #4c1d95) !important;
    color: #fbbf24 !important;
    border: 3px solid #f59e0b !important;
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4) !important;
}
.comp-btn:hover {
    box-shadow: 0 5px 25px rgba(245, 158, 11, 0.7) !important;
    transform: translateY(-2px);
}

/* Competitive Lobby Styles */
.comp-play-btn {
    background: linear-gradient(to bottom, #fde047, #f59e0b);
    color: #000;
    font-size: 2.5rem;
    font-weight: 900;
    border: 4px solid #fff;
    border-radius: 15px;
    padding: 15px 0;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    box-shadow: 0 8px 0 #b45309, 0 15px 20px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: all 0.1s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.comp-play-btn:active {
    transform: translateY(8px);
    box-shadow: 0 0 0 #b45309, 0 5px 10px rgba(0,0,0,0.5);
}

/* Level 38: Pro Sword (Cyberpunk Green) */
.level-38 .sword-visual {
    height: 380px;
    animation: cyberFloat 2.5s ease-in-out infinite;
}
.level-38 #sword-name {
    color: #39ff14;
    text-shadow: 0 0 10px #0fa, 0 0 20px #39ff14, 0 0 40px #00ff00, 3px 3px 0px #ff007f;
    font-weight: 900;
    letter-spacing: 5px;
    font-size: 2.5rem;
    animation: cyberTextGlow 1.5s infinite alternate;
    font-family: 'Courier New', Courier, monospace;
}
.level-38 #sword-blade {
    width: 50px;
    height: 250px;
    background: linear-gradient(to right, #001100, #00ff00, #39ff14, #00ff00, #001100);
    clip-path: polygon(50% 0%, 100% 10%, 90% 100%, 10% 100%, 0% 10%);
    box-shadow: 0 0 30px #39ff14, inset 0 0 20px #ffffff;
    animation: cyberBladePulse 0.1s infinite alternate;
    position: relative;
    border-left: 2px solid #ff007f; /* Glitch accent */
}
.level-38 #sword-guard {
    background: linear-gradient(to right, #1a1a1a, #00ff00, #1a1a1a);
    width: 150px;
    height: 40px;
    border-radius: 2px;
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    box-shadow: 0 0 20px #00ff00, inset 0 0 10px #39ff14;
    border: 2px solid #0fa;
}
.level-38 #sword-hilt {
    background: linear-gradient(to bottom, #111, #333);
    width: 30px;
    height: 100px;
    border-radius: 0 0 10px 10px;
    box-shadow: inset 0 0 10px rgba(0,255,0,0.5), 0 0 15px #39ff14;
    position: relative;
}
/* Hilt rings */
.level-38 #sword-hilt::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 60%;
    background: repeating-linear-gradient(to bottom, transparent, transparent 5px, #39ff14 5px, #39ff14 8px);
    opacity: 0.8;
}

@keyframes cyberBladePulse {
    0% { filter: brightness(1) drop-shadow(0 0 15px #00ff00); transform: translateX(-1px); }
    100% { filter: brightness(1.5) drop-shadow(0 0 25px #39ff14); transform: translateX(1px); }
}
@keyframes cyberTextGlow {
    0% { text-shadow: 0 0 10px #0fa, 0 0 20px #39ff14; opacity: 1; }
    95% { text-shadow: 0 0 15px #0fa, 0 0 30px #39ff14, 0 0 50px #00ff00; opacity: 1; }
    100% { text-shadow: none; opacity: 0.5; } /* Glitch flicker */
}
@keyframes cyberFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}