/* 기본 스타일 설정 */
body {
    margin: 0;
    overflow: hidden;
    background-color: #1a1a2e;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
}

canvas {
    display: block;
    position: absolute;
    /* 추가 */
    top: 0;
    /* 추가 */
    left: 0;
    /* 추가 */
    z-index: 0;
    /* 추가 */
}

/* 게임 UI 스타일 */
#game-ui {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 15px;
    background-color: transparent;
    /* 배경 제거 */
    border-radius: 0;
    /* 둥근 모서리 제거 */
    color: #e0e0e0;
    /* 밝은 회색 텍스트 */
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
    /* 한글 글꼴 적용 */
    font-size: 18px;
    box-shadow: none;
    /* 그림자 효과 제거 */
    border: none;
    /* 테두리 제거 */
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-shadow: 0px 0px 8px black, 0px 0px 8px black;
    /* 강한 검은색 그림자 추가 */
    font-weight: bold;
    /* 폰트 굵게 */
    z-index: 1;
    /* UI가 캔버스 위에 오도록 설정 */
}

#player-hp-text {
    font-weight: bold;
    color: #ff6666;
    /* HP 텍스트 색상 */
}

#player-hp-bar-container {
    width: 200px;
    height: 20px;
    background-color: #555;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid black;
    /* 검은색 테두리 추가 */
    box-sizing: border-box;
    /* 테두리를 크기에 포함 */
    position: relative;
    /* 자식 요소의 absolute 포지셔닝을 위함 */
}

#player-hp-bar,
#player-shield-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 0.2s ease-out;
}

#player-hp-bar {
    background-color: #ff4444;
    /* HP 색상: 초록색 */
    z-index: 1;
    /* HP 바가 아래에 위치 */
}

#player-shield-bar {
    background-color: #ffffff;
    /* 보호막 색상: 흰색 */
    z-index: 2;
    /* 보호막 바가 위에 위치 */
}

/* 스킬 지속 시간 바 UI 스타일 */
#duration-bar-ui {
    position: absolute;
    bottom: 130px; /* XP Bar is at 110px, so 130px puts it just above */
    top: auto; /* Remove top positioning */
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    display: none;
    /* 초기에는 숨김 */
    flex-direction: column-reverse; /* Stack upwards */
    align-items: center;
    gap: 8px;
    /* 바 사이의 간격 */
    z-index: 100;
}

/* NEW UI STYLES */
#center-round-display {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 0 10px #000, 0 0 10px #000;
    z-index: 10;
    pointer-events: none;
}

#xp-bar-container {
    position: absolute;
    bottom: 110px;
    /* Position well above skill bar */
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    /* Fixed, long width */
    height: 14px;
    /* Thicker */
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #444;
    border-radius: 7px;
    z-index: 20;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#xp-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #44ff44, #00cc00);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 5px #00ff00;
}

#level-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 80px;
    font-weight: bold;
    text-shadow: 0 0 3px #000;
    z-index: 21;
}

.duration-bar-item {
    /* 각 스킬 바의 컨테이너 */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.duration-bar-label {
    font-size: 18px;
    /* 약간 작게 조정 */
    color: white;
    font-weight: bold;
    text-shadow: 0 0 5px black, 0 0 5px black;
}

.duration-bar-container {
    width: 100%;
    height: 15px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    border: 1px solid #888;
    overflow: hidden;
}

.duration-bar {
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    /* 골드 색상 */
    border-radius: 4px;
    transition: width 0.1s linear;
}

/* 스킬 포인트 UI 스타일 */
#skill-point-ui {
    position: absolute;
    /* 기존 top: 10px; */
    top: 10px;
    right: 10px;
    padding: 15px;
    background-color: transparent;
    border-radius: 0;
    color: #e0e0e0;
    /* 라벨 기본 색상 */
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
    /* 한글 글꼴 적용 */
    font-size: 22px;
    /* 폰트 크기 증가 */
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-shadow: 0px 0px 8px black, 0px 0px 8px black;
    /* 강한 검은색 그림자 추가 */
    font-weight: bold;
    /* 폰트 굵게 */
    z-index: 1;
    /* UI가 캔버스 위에 오도록 설정 */
}

#skill-point-ui div {
    /* XP/레벨/골드 텍스트 정렬 */
    text-align: right;
}

/* 스탯별 색상 지정 */
.skill-point-color {
    color: #00ffff;
}

/* 스킬 포인트: 파랑색 */
.level-color {
    color: #ff69b4;
}

/* 레벨: 핑크색 */
.gold-color {
    color: #ffd700;
}

/* 골드: 노랑색 */

/* 메시지 박스 스타일 (게임 오버, 레벨업 등) */
#message-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 중앙 정렬 */
    padding: 30px 50px;
    background-color: transparent;
    /* 배경 제거 */
    border-radius: 0;
    /* 둥근 모서리 제거 */
    color: white;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
    /* 한글 글꼴 적용 */
    font-size: 30px;
    text-align: center;
    display: none;
    /* 초기에는 숨김 */
    z-index: 100;
    /* 다른 요소 위에 표시 */
    box-shadow: none;
    /* 그림자 효과 제거 */
    border: none;
    /* 테두리 제거 */
    text-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black;
    /* 강한 검은색 그림자 추가 */
    font-weight: bold;
    /* 모든 메시지 굵게 */
}

@keyframes pop-in-animation {
    from {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.pop-in {
    /* 이 클래스는 애니메이션 트리거를 위해 JS에서 사용됩니다. */
    animation: pop-in-animation 0.4s ease-out forwards;
}

/* 플레이어 피격 효과 스타일 */
#damage-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 아래 요소 클릭 가능하도록 */
    z-index: 1000;
    /* 다른 UI 위에 표시 */
    background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0) 55%, rgba(255, 0, 0, 0.3) 100%);
    opacity: 0;
    display: none;
    /* 초기에는 완전히 숨김 */
    transition: opacity 0.4s ease-out;
    /* 사라질 때 부드럽게 */
}

#damage-vignette.active {
    opacity: 1;
    transition: opacity 0.1s ease-in;
    /* 나타날 때 빠르게 */
}

/* 상점 UI 스타일 (개편) */
#shop-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* "Magical Grimoire" Background (Unified Theme) */
    background:
        /* Subtle magical noise */
        radial-gradient(circle at 50% 50%, rgba(50, 50, 70, 0.95), rgba(30, 30, 45, 0.98)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.01) 0, rgba(255, 255, 255, 0.01) 1px, transparent 1px, transparent 10px);

    padding: 60px 80px;
    border-radius: 4px;
    /* Grimoire style - sharper corners */
    color: white;
    z-index: 2000;
    width: 1200px;
    max-width: 95vw;

    /* Magical Border */
    border: 2px solid #4a4a5a;
    box-shadow:
        0 0 0 4px #2a2a35,
        /* Double border */
        0 0 60px rgba(0, 0, 0, 0.9);

    backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    align-items: center;
    font-family: 'Malgun Gothic', sans-serif;
}

#shop-modal h2 {
    font-size: 3em;
    margin: 0 0 20px 0;
    color: #e0e0e0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 15px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    background: none;
    /* Remove gradient text */
    -webkit-text-fill-color: initial;
    background-clip: border-box;
}

#shop-gold-container {
    position: absolute;
    top: 40px;
    right: 50px;
    font-size: 20px;
    color: gold;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#shop-modal p {
    color: #a0a0b0;
    font-size: 1.2em;
    margin-bottom: 50px;
    /* Increased margin */
}

/* Item Grid */
.shop-items-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 Columns */
    gap: 40px;
    /* Huge Gap */
    width: 100%;
}

/* Banner Card Style */
.shop-item-card {
    background: linear-gradient(145deg, rgba(25, 25, 35, 0.95), rgba(15, 15, 25, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 20px;
    width: 100%;
    width: 100%;
    min-height: 180px;
    /* Use min-height */
    height: auto;
    /* grow as needed */
    display: flex;
    /* Row layout by default */
    flex-direction: row;
    align-items: stretch;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.shop-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(79, 172, 254, 0.3);
    border-color: rgba(79, 172, 254, 0.5);
    z-index: 10;
}

/* Left: Icon Placeholder (30%) */
.shop-item-left {
    flex: 3;
    /* 30% approx */
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding-right: 20px;
    margin-right: 20px;
}

.icon-placeholder {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Right: Info (70%) */
.shop-item-right {
    flex: 7;
    /* 70% approx */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    /* Align text left */
}

.shop-item-right h4 {
    color: #e0e0e0;
    font-size: 1.4em;
    margin: 0 0 5px 0;
    text-align: left;
}

.shop-item-right .item-description {
    color: #99a;
    font-size: 0.95em;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    flex-grow: 1;
    /* Show full text */
    overflow: visible;
    display: block;
    margin-bottom: 10px;
}

.shop-item-right button {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    border: none;
    color: #000;
    padding: 12px 20px;
    border-radius: 50px;
    /* Rounder */
    cursor: pointer;
    font-weight: 800;
    width: auto;
    /* Fit content */
    align-self: flex-end;
    /* Align right */
    transition: all 0.2s;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    min-width: 120px;
}

.shop-item-right button:hover {
    background: linear-gradient(135deg, #72baff, #40f4fe);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.5);
    transform: scale(1.05);
}

.shop-item-right button:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Special Border Styles - Clean up */
.shop-item-card.border-gold {
    border-color: rgba(255, 215, 0, 0.4);
}

.shop-item-card.border-gold .icon-placeholder {
    border-color: rgba(255, 215, 0, 0.4);
}

.shop-item-card.border-green {
    border-color: rgba(0, 255, 100, 0.4);
}

.shop-item-card.border-green .icon-placeholder {
    border-color: rgba(0, 255, 100, 0.4);
}

/* Reroll & Close Button Container */
.shop-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 30px;
}

#reroll-btn {
    background: linear-gradient(135deg, #ff9966, #ff5e62);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 94, 98, 0.4);
    transition: all 0.2s;
}

#reroll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 94, 98, 0.6);
}

#reroll-btn.disabled {
    background: #555 !important;
    color: #aaa;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    pointer-events: none;
}

#shop-modal #close-shop-btn {
    background: transparent;
    color: #aaa;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
    width: auto;
    margin-top: 0;
}

#shop-modal #close-shop-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border-color: white;
}

/* 스킬 바 UI 스타일 */
#skill-bar-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    border: 1px solid #444;
    z-index: 10;
    justify-content: center;
}

.skill-slot {
    width: 60px;
    height: 60px;
    background-color: #333;
    border: 2px solid #555;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 20px;
    color: white;
    font-weight: bold;
    overflow: hidden;
    cursor: default;
    /* 마우스 오버 시 커서 변경 방지 */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    /* 부드러운 전환 효과 */
}

.skill-slot.ready {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    /* 준비 상태일 때 빛나는 효과 */
}

.skill-cooldown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    opacity: 0;
    /* Hidden when not on cooldown */
    transition: opacity 0.1s;
}

.skill-cooldown.active {
    opacity: 1;
}

/* 보스 HP 바 스타일 */
#boss-hp-ui {
    position: absolute;
    top: 80px;
    /* Lowered to avoid overlap with top UI */
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    border: 1px solid #ff0000;
    display: none;
    /* 초기에는 숨김 */
    flex-direction: column;
    gap: 5px;
    z-index: 98;
}

#boss-hp-ui div {
    color: #ffcc00;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

#boss-hp-bar-container {
    width: 100%;
    height: 20px;
    background-color: #555;
    border-radius: 5px;
    overflow: hidden;
}

#boss-hp-bar {
    height: 100%;
    width: 100%;
    background-color: #cc0000;
    transition: width 0.2s ease-out;
}

/* 화면 밖 상점 표시기 스타일 */
#offscreen-indicator {
    position: absolute;
    width: 50px;
    height: 50px;
    display: none;
    /* 초기에는 숨김 */
    z-index: 102;
    pointer-events: none;
    /* 회전 중심을 왼쪽 가장자리 중앙으로 설정 (화살표의 뾰족한 부분) */
    transform-origin: 50% 50%;
    /* 아이콘만 표시하므로 중앙으로 변경 */
}

/* '?'가 담긴 원 */
#offscreen-indicator::before {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    /* 아이콘을 중앙에 위치 */
    transform: translate(-50%, -50%) rotate(var(--rotation-angle, 0deg));
    /* 아이콘이 회전하지 않도록 역회전 적용 */
    width: 30px;
    height: 30px;
    background: gold;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    color: black;
    border: 2px solid white;
    box-shadow: 0 0 10px gold;
}

/* 화살표 모양 (기본적으로 오른쪽을 가리키도록 수정) */
#offscreen-indicator::after {
    display: none;
    /* 화살표 제거 */
}

/* 화면 밖 보스 표시기 스타일 */
#boss-offscreen-indicator {
    position: absolute;
    width: 50px;
    height: 50px;
    display: none;
    /* 초기에는 숨김 */
    z-index: 102;
    pointer-events: none;
    transform-origin: 50% 50%;
}

#boss-offscreen-indicator::before {
    content: '💀';
    /* 보스 아이콘 (해골) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--boss-rotation-angle, 0deg));
    width: 30px;
    height: 30px;
    background: #cc0000;
    /* 어두운 빨간색 */
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    /* 아이콘 크기 조정 */
    color: white;
    border: 2px solid white;
    box-shadow: 0 0 10px #ff0000;
    /* 빨간색 빛 효과 */
}

/* 화면 밖 포탈 표시기 스타일 */
#portal-offscreen-indicator {
    position: absolute;
    width: 50px;
    height: 50px;
    display: none;
    /* 초기에는 숨김 */
    z-index: 102;
    pointer-events: none;
    transform-origin: 50% 50%;
}

#portal-offscreen-indicator::before {
    content: 'P';
    /* 포탈 아이콘 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--portal-rotation-angle, 0deg));
    width: 30px;
    height: 30px;
    background: #9932CC;
    /* 포탈 색상 (DarkOrchid) */
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: white;
    border: 2px solid white;
    box-shadow: 0 0 10px #9932CC;
    /* 보라색 빛 효과 */
}

/* 스킬 인벤토리 모달 스타일 */
/* 스킬 인벤토리 모달 스타일 (Casual Stylized Redesign) */
#skill-inventory-modal {
    position: fixed;
    top: 50%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);

    /* "Magical Grimoire" Background (Lighter, Blue-Grey/Purple-Grey) */
    background:
        /* Subtle magical noise */
        radial-gradient(circle at 50% 50%, rgba(50, 50, 70, 0.95), rgba(30, 30, 45, 0.98)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.01) 0, rgba(255, 255, 255, 0.01) 1px, transparent 1px, transparent 10px);

    /* Size & Spacing */
    width: 1100px;
    max-width: 95vw;
    padding: 30px 60px;
    /* Reduced vertical padding */

    /* Thicker, Brighter Gold Border */
    border: 3px solid #FFD700;
    /* Bright Toon Gold */
    outline: 4px solid #4a4a5a;
    /* Dark Outline for contrast */
    outline-offset: 0px;
    border-radius: 16px;

    /* Magical Shadow */
    box-shadow:
        0 0 0 4px #000,
        /* Crisp outer black line */
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(88, 101, 242, 0.2);
    /* Faint blue magical glow */

    color: #e0e0e0;
    /* Reverted Font to Game Standard */
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
    display: none;
    flex-direction: column;
    gap: 15px;
    /* Reduced gap */
    z-index: 2100;
}

/* Header Typography - Chunky & Readable matching Statues */
#skill-inventory-modal h2,
#skill-inventory-modal h3 {
    text-transform: uppercase;
    letter-spacing: 0px;
    /* Removed wide spacing */
    text-align: center;
    margin: 0 0 10px 0;
    font-weight: 800;
    /* Extra Bold */

    /* Bright Gold Gradient Text matching Statue numeric highlights */
    background: linear-gradient(to bottom, #FFE55C 0%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Strong Glow Effect like Statues */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6)) drop-shadow(0 2px 0px rgba(0, 0, 0, 0.8));
}

#skill-inventory-modal h2 {
    font-size: 2.5em;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
}

#skill-inventory-modal h3 {
    font-size: 1.6em;
    /* Unified style: Same Gold effect as h2 */
    margin-top: 20px;
}

/* Main Content Layout - Split Panel */
.skill-inventory-main-container {
    display: flex;
    flex-direction: row;
    /* Horizontal Split */
    gap: 30px;
    height: 600px;
    /* Fixed height for consistency */
}

/* --- Left Panel: Equipped Skills --- */
.equipped-skills-panel {
    flex: 6;
    /* 60% Width */
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.panel-header h3 {
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

.panel-header-line {
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(to right, #FFD700, transparent);
    opacity: 0.5;
}

/* Linked Row Structure */
.skill-linked-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.skill-linked-row:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.2);
}

.key-label {
    width: 60px;
    font-size: 18px;
    font-weight: 900;
    color: #FFD700;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Sockets (Main & Support) */
.socket {
    position: relative;
    background: radial-gradient(circle at center, #1a1a1a, #0d0d0d);
    border: 2px solid #555;
    border-radius: 6px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.socket:hover {
    border-color: #888;
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2);
}

.main-socket {
    width: 70px;
    height: 70px;
    border-color: #4a4a4a;
    /* Distinct border for main */
}

.support-socket {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at center, #222, #111);
}

.socket-empty-text {
    font-size: 10px;
    color: #444;
    font-weight: bold;
}

/* Link Connector */
.link-connector {
    flex-grow: 0;
    width: 30px;
    height: 4px;
    background: repeating-linear-gradient(90deg, #444 0, #444 4px, transparent 4px, transparent 8px);
    opacity: 0.5;
}

/* Support Group */
.support-sockets-group {
    display: flex;
    gap: 10px;
}

/* --- Right Panel: Inventory --- */
.inventory-panel {
    flex: 4;
    /* 40% Width */
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.inventory-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.inventory-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: #222;
    border: 1px solid #444;
    border-radius: 6px 6px 0 0;
    color: #888;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.inventory-tab:hover {
    background: #333;
    color: #aaa;
}

.inventory-tab.active {
    background: linear-gradient(to bottom, #FFD700, #B8860B);
    color: #111;
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.inventory-grid {
    flex-grow: 1;
    display: none;
    /* Hidden by default */
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    overflow-y: auto;
    padding-right: 5px;
}

.inventory-grid.active {
    display: grid;
}

/* Skill Icons in Inventory */
.inventory-skill-icon {
    width: 60px;
    height: 60px;
    background: #333;
    border: 2px solid #555;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #ccc;
    cursor: grab;
    transition: all 0.2s;
}

.inventory-skill-icon:hover {
    border-color: #FFD700;
    transform: scale(1.05);
}

/* Scrollbar for Inventory */
.inventory-grid::-webkit-scrollbar {
    width: 6px;
}

.inventory-grid::-webkit-scrollbar-track {
    background: #111;
    border-radius: 3px;
}

.inventory-grid::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

/* Rune Stone Item Style (Stylized/Chunky) */
.available-skill-item {
    background: linear-gradient(to bottom, #3a3a45, #2d2d35);
    border: 2px solid #555;
    border-bottom: 4px solid #222;
    /* Chunkier 3D effect */
    border-radius: 10px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    position: relative;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}

.available-skill-item:hover {
    transform: translateY(-3px);
    background: linear-gradient(to bottom, #4a4a55, #3a3a40);
    border-color: #888;
    box-shadow: 0 7px 0 rgba(0, 0, 0, 0.3);
}

.available-skill-item:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.available-skill-item span {
    color: #eee;
    font-size: 17px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.available-skill-item.selected {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    background: linear-gradient(to bottom, #4a4025, #352e1a);
}

.available-skill-item.selected span {
    color: #FFD700;
}

/* Close Button (Bottom) - Big & Clickable */
#close-skill-inventory-btn {
    align-self: center;
    background: #333;
    border: 2px solid #666;
    color: #ddd;
    font-family: inherit;
    font-weight: bold;
    font-size: 18px;
    padding: 12px 60px;
    border-radius: 50px;
    /* Pill shape */
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    box-shadow: 0 4px 0 #111;
}

#close-skill-inventory-btn:hover {
    background: #444;
    border-color: #888;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #111;
}

#close-skill-inventory-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #111;
}

/* P 스킬 아이콘 스타일 */
#p-skill-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    background-color: rgba(60, 60, 90, 0.7);
    /* 어두운 푸른색 배경 */
    border: 2px solid #00ffff;
    /* 청록색 테두리 */
    border-radius: 15px;
    /* 둥근 모서리 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    /* 빛나는 효과 */
    z-index: 99;
    transition: transform 0.2s ease-in-out;
}

#p-skill-icon:hover {
    transform: scale(1.05);
}

#p-skill-icon .p-text {
    font-size: 50px;
    font-weight: bold;
    color: #00ffff;
    /* 청록색 텍스트 */
    text-shadow: 0px 0px 10px black;
}

/* Unified Theme: Passive Skill Modal */
#p-skill-modal {
    position: fixed;
    /* Fixed centering like others */
    top: 50%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);

    /* "Magical Grimoire" Background */
    background:
        radial-gradient(circle at 50% 50%, rgba(50, 50, 70, 0.95), rgba(30, 30, 45, 0.98)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.01) 0, rgba(255, 255, 255, 0.01) 1px, transparent 1px, transparent 10px);

    /* Size & Spacing */
    padding: 40px;
    width: 600px;
    max-width: 90vw;

    /* Thicker, Brighter Gold Border */
    border: 3px solid #FFD700;
    outline: 4px solid #4a4a5a;
    outline-offset: 0px;
    border-radius: 16px;

    /* Magical Shadow */
    box-shadow:
        0 0 0 4px #000,
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 255, 255, 0.2);
    /* Cyan glow for P-Skill */

    color: #e0e0e0;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
    display: none;
    flex-direction: column;
    gap: 20px;
    z-index: 2200;
    /* Highest */
}

/* Unified Typography: Gold Gradient */
#p-skill-modal h2 {
    text-transform: uppercase;
    letter-spacing: 0px;
    text-align: center;
    margin: 0 0 20px 0;
    font-weight: 800;
    font-size: 2.2em;

    /* Bright Gold Gradient */
    background: linear-gradient(to bottom, #FFE55C 0%, #FFD700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Glow */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6)) drop-shadow(0 2px 0px rgba(0, 0, 0, 0.8));
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
}

#p-skill-modal p {
    font-size: 1.2em;
    text-align: center;
    color: #ccc;
    margin-bottom: 10px;
}

#p-skill-modal .p-skill-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center;
}

/* Stat Rows: Inset look */
.p-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle border */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    /* Inset shadow */
    transition: background 0.2s;
}

.p-stat-item:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.2);
}

.p-stat-item span {
    font-size: 1.1em;
    color: #ddd;
    font-weight: bold;
    text-shadow: 0 1px 2px black;
}

/* Upgrade Buttons: Clean 2D Flat Style */
.p-stat-item button {
    background: #3a3a4a;
    /* Dark flat background */
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: 0.5px;
}

.p-stat-item button:hover {
    background: #4a4a5a;
    border-color: #FFD700;
    color: #FFD700;
    transform: none;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.p-stat-item button:active {
    background: #555;
    transform: scale(0.98);
}

.p-stat-item button:disabled {
    background: #2a2a2a;
    color: #666;
    border-color: #333;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Close/Action buttons shared style */
#p-skill-modal #close-p-skill-btn {
    margin-top: 10px;
    background: #333;
    border: 2px solid #555;
    color: #ccc;
    box-shadow: 0 4px 0 #111;
}

#p-skill-modal #close-p-skill-btn:hover {
    background: #444;
    color: white;
    border-color: #888;
}


/* B 스킬 아이콘 스타일 (우측 하단) */
#b-skill-icon {
    position: absolute;
    bottom: 20px;
    right: 120px;
    /* P 스킬 아이콘 옆에 위치하도록 조정 */
    width: 80px;
    height: 80px;
    background-color: rgba(90, 90, 60, 0.7);
    /* 어두운 노랑색 배경 */
    border: 2px solid gold;
    /* 노랑색 테두리 */
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 15px gold;
    /* 노랑색 빛나는 효과 */
    z-index: 99;
    transition: transform 0.2s ease-in-out;
}

#b-skill-icon:hover {
    transform: scale(1.05);
}

#b-skill-icon .b-text {
    font-size: 50px;
    font-weight: bold;
    color: gold;
    /* 노랑색 텍스트 */
    text-shadow: 0px 0px 10px black;
    /* P 스킬 아이콘의 텍스트 그림자와 동일하게 설정 */
    /* text-shadow: 0px 0px 10px black; */
}

/* 스킬 강화 UI 스타일: Use Linked Row logic mainly now, but keeping clean for fallback/hybrids */
#skill-enhancement-section,
#unassigned-sub-skills-list {
    width: 100%;
    /* border: 1px solid rgba(255, 255, 255, 0.2); removed for cleaner look */
    /* padding: 10px; */
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

#unassigned-sub-skills-list {
    flex-direction: row;
    flex-wrap: wrap;
}

.primary-skill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
}

.primary-skill-name {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.sub-skill-slots-container {
    display: flex;
    gap: 8px;
}

.sub-skill-slot {
    width: 100px;
    height: 30px;
    background-color: #333;
    border: 1px solid #777;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sub-skill-slot:hover {
    background-color: #444;
}

.sub-skill-slot.filled {
    background-color: #2F4F4F;
    /* DarkSlateGray */
    color: #fff;
    border-color: #00FA9A;
    /* MediumSpringGreen */
}

.unassigned-sub-skill-item {
    padding: 8px 12px;
    background-color: #3a3a3a;
    border: 1px solid #555;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    color: #ddd;
    transition: all 0.2s;
}

.unassigned-sub-skill-item:hover {
    background-color: #555;
}

.unassigned-sub-skill-item.selected {
    background-color: #DAA520;
    color: black;
    font-weight: bold;
    box-shadow: 0 0 10px #DAA520;
}

/* 메뉴 화면 스타일 */
#menu-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a2e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
    color: white;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
}

#menu-screen h1 {
    font-size: 80px;
    text-shadow: 0 0 20px #00ffff;
    margin-bottom: 50px;
}

#menu-screen button {
    font-size: 30px;
    padding: 15px 40px;
    border-radius: 15px;
    border: 2px solid #00ffff;
    background-color: rgba(0, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

#menu-screen button:hover {
    background-color: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
}

/* Skill Inventory Layout Fixes */
.primary-skill-row {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.primary-skill-name {
    width: 120px;
    color: #DAA520;
    font-weight: bold;
    flex-shrink: 0;
}

.sub-skill-slots-container {
    display: flex;
    gap: 8px;
    flex-grow: 1;
}

.sub-skill-slot {
    flex: 1;
    height: 35px;
    border: 1px dashed #666;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #888;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s;
}

.sub-skill-slot:hover {
    border-color: #DAA520;
    background-color: rgba(255, 255, 255, 0.05);
}

.sub-skill-slot.filled {
    border-style: solid;
    border-color: #DAA520;
    background-color: rgba(218, 165, 32, 0.3);
    color: white;
    font-weight: bold;
}

/* Pause Overlay */
#pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 150;
    color: white;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
}

#pause-overlay h1 {
    font-size: 80px;
    color: #00ffff;
    text-shadow: 0 0 20px #00ffff;
    margin-bottom: 30px;
}

#pause-overlay p {
    font-size: 28px;
    color: #ccc;
}

/* Death Screen Overlay */
#death-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 2s ease-in-out;
}

#death-screen-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Center Round Display */
#center-round-display {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5);
    z-index: 100;
    z-index: 100;
    pointer-events: none;
    font-family: 'Malgun Gothic', sans-serif;
    text-align: center;
}

/* Stylized Health Orb (Clean Dark Ring) */
#health-orb-container {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 300px;
    height: 300px;
    z-index: 100;
    transform: translate(-30%, 30%);
    /* Embedded in corner */
    pointer-events: none;
    /* Let clicks pass through transparent edges if any */
}

/* Common Sphere Geometry */
#health-orb-base,
#health-orb-fill,
#health-orb-glass,
#health-orb-cradle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* 1. Base Layer (Background) */
#health-orb-base {
    background: #000;
    box-shadow: inset 0 0 50px #000;
    z-index: 1;
    width: 90%;
    /* Base/Fill slightly smaller to fit inside thick frame */
    height: 90%;
}

/* 2. The Liquid */
#health-orb-fill {
    width: 90%;
    /* Match Base */
    height: 90%;
    /* Deep Red Gradient */
    background: radial-gradient(circle at 50% 40%, #ff4444 0%, #aa0000 60%, #440000 100%);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
    z-index: 2;
    transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    clip-path: inset(0 0 0 0);
}

/* 3. Glass Highlights */
#health-orb-glass {
    width: 90%;
    /* Match Base */
    height: 90%;
    z-index: 3;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 20%),
        /* Top Left Spot */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.5) 90%);
    /* Depth */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

/* 4. The Frame (Thick Dark Ring) */
#health-orb-cradle {
    z-index: 4;
    border: 25px solid #1a1a1a;
    /* Thick Dark Grey Metal */
    box-shadow:
        0 0 15px rgba(0, 0, 0, 0.8),
        /* Outer Shadow */
        inset 0 0 10px rgba(0, 0, 0, 1);
    /* Inner Shadow on Metal */
}

/* Remove decorative gold tips */
#health-orb-cradle::before,
#health-orb-cradle::after {
    display: none;
}

/* Text Position - Adjusted for visibility */
#health-orb-text {
    position: absolute;
    top: 40%;
    /* Moved up slightly */
    left: 60%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #000;
    z-index: 5;
    font-family: 'Malgun Gothic', sans-serif;
    letter-spacing: 1px;
}


/* Skill Point Notification */
#skill-point-notification {
    position: absolute;
    right: -50px;
    /* Position to the right of XP Bar */
    top: 0px;
    /* Align with XP bar */
    width: 40px;
    height: 40px;
    background: #FFD700;
    border-radius: 5px;
    display: flex;
    /* flex default, hidden by JS */
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 0 10px #FFD700;
    animation: blink-animation 1s infinite alternate;
    z-index: 101;
}

@keyframes blink-animation {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px #FFD700;
    }

    100% {
        opacity: 0.7;
        transform: scale(1.1);
        box-shadow: 0 0 20px #FFD700;
    }
}

#sp-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 10px;
    border: 1px solid white;
}

/* ======================================== */
/* Stylish 'B' Button (Skill Inventory)     */
/* ======================================== */
#b-skill-icon {
    display: none;
    /* Hidden by default */
    position: fixed;
    bottom: 10px;
    right: 10px;
    /* Absolute corner position */
    width: 70px;
    height: 70px;

    /* Premium Dark Gold Gradient */
    /* Premium Dark Gold Gradient */
    background: linear-gradient(145deg, #2a2a2a, #111);

    border: 3px solid;
    border-image: linear-gradient(135deg, #FFD700, #B8860B, #FFD700) 1;
    border-radius: 15px;

    /* Animated Glow */
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 40px rgba(255, 215, 0, 0.2),
        inset 0 0 15px rgba(0, 0, 0, 0.8);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 200;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: b-icon-pulse 2s ease-in-out infinite;
}

/* ======================================== */
/* Shop Title - Simple Style                */
/* ======================================== */
#shop-title {
    color: #e0e0e0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    /* Simple shadow only */
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 1px;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

@keyframes b-icon-pulse {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(255, 215, 0, 0.5),
            0 0 40px rgba(255, 215, 0, 0.2),
            inset 0 0 15px rgba(0, 0, 0, 0.8);
    }

    50% {
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.7),
            0 0 60px rgba(255, 215, 0, 0.4),
            inset 0 0 15px rgba(0, 0, 0, 0.8);
    }
}

#b-skill-icon:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow:
        0 0 40px rgba(255, 215, 0, 0.8),
        0 0 80px rgba(255, 215, 0, 0.5),
        inset 0 0 15px rgba(0, 0, 0, 0.8);
}

#b-skill-icon .b-text {
    color: #FFD700;
    font-size: 32px;
    font-weight: 900;
    font-family: 'Malgun Gothic', sans-serif;
    text-shadow:
        0 0 10px gold,
        0 0 20px rgba(255, 215, 0, 0.5);
    letter-spacing: 2px;
}