body {
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow: hidden;
    font-family: Arial, sans-serif;
    /* 모바일 최적화 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* iPhone X 이상 노치 대응 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.ads-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.ad-position > iframe {
    pointer-events: auto;
    width: 100%;
    height: 100%;
}

/* .selection-top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7vh !important; 
} */

.selection-middle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.selection-left, .selection-right {
    width: 6vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selection-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    height: 7vh !important;
}
.selection-bottom > iframe {
    width: 70vw;
}

/* 인게임 UI 레이아웃 */
.in-game-ui {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
    flex-direction: column;
    color: white;
    font-size: 14px;
}

/* 상단 UI */
.ui-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 20px;
    pointer-events: none;
}

.ui-top-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.ui-top-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.ui-top-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* 중단 UI */
.ui-middle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* 하단 UI */
.ui-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: min(25px, 1.8vh) 20px min(30px, 2.3vh) 20px;
    pointer-events: none;
    gap: min(20px, 1.4vh);
}

#gameContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.rank-container {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 30px;
    opacity: 0.9;
}


#playerRanking {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    padding: 12px 15px;
    border-radius: 8px;
    border: 2px solid #444;
    font-weight: bold;
    width: 100%;
    font-size: 12px;
    max-height: 30vh;
    pointer-events: auto;
}

#playerRanking h4 {
    margin: 0 0 8px 0;
    color: #00ff88;
    font-size: 13px;
    text-align: center;
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 30vh;
    overflow-y: auto;
}

.ranking-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    padding: 2px 0;
}

.ranking-item:last-child {
    margin-bottom: 0;
}

.ranking-rank {
    color: #ffaa00;
    font-weight: bold;
    min-width: 20px;
}

.ranking-name {
    flex: 1;
    margin: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-element {
    font-size: 0.9em;
    min-width: 32px;
    text-align: center;
}

.ranking-level {
    color: #00ff88;
    font-weight: bold;
    min-width: 40px;
    text-align: right;
}

#myRanking {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 8px;
    padding: 5px 15px;
    border: 2px solid #444;
    font-weight: bold;
    width: 100%;
    font-size: 12px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    gap: 15px;
    align-items: center;
    pointer-events: auto;
}

#myRanking div {
    display: flex;
    gap: 5px;
    align-items: center;
}

#myRanking span {
    color: #00ff88;
}

#myRankingValue {
    color: #ffaa00 !important;
    font-weight: bold;
}

#controls {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    padding: 8px 20px;
    border-radius: 8px;
    border: 2px solid #444;
    font-weight: bold;
    text-align: center;
}

/* 스킬 UI 스타일 */
#skillUI {
    display: flex;
    gap: min(25px, 1.8vh);
    pointer-events: auto;
    touch-action: manipulation;
}

.skill-button {
    position: relative;
    width: min(85px, 7vh);
    height: min(85px, 7vh);
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: min(3px, 0.2vh) solid #444;
    border-radius: min(12px, 0.9vh);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    user-select: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-shadow: 0 min(4px, 0.25vh) min(15px, 1vh) rgba(0, 0, 0, 0.3);
}

.skill-button:hover {
    border-color: #666;
    transform: translateY(-2px);
}

.skill-button:active {
    transform: translateY(1px) scale(0.95);
    border-color: #888;
}

.skill-button.ready {
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.skill-button.on-cooldown {
    border-color: #888;
    cursor: not-allowed;
    opacity: 0.6;
}

.skill-key {
    font-size: min(28px, 2.1vh);
    font-weight: bold;
    margin-bottom: min(3px, 0.2vh);
}

.skill-damage {
    font-size: min(18px, 1.4vh);
    color: #ff6666;
    font-weight: bold;
}

/* 궤도가속 버튼 스타일 */
.orbit-boost-button {
    border-color: #ffaa00;
}

.orbit-boost-button.active {
    border-color: #ff6600;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
    background: linear-gradient(145deg, #3a2a1a, #2a1a0a);
}

.orbit-boost-button .skill-damage {
    font-size: min(12px, 1.5vh);
    color: #ffaa00;
}

.orbit-boost-button .skill-key {
    font-size: min(20px, 1.6vh);
}

.orbit-boost-button .orbit-boost-charge {
    font-size: min(18px, 1.4vh) !important;
    color: #ffaa00;
    font-weight: bold;
}

.orbit-boost-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 170, 0, 0.6) 0deg);
    border-radius: 10px;
    transition: background 0.1s ease;
    z-index: 1;
}

.orbit-boost-button.on-cooldown {
    opacity: 0.4;
    cursor: not-allowed;
}

.orbit-boost-button.on-cooldown .orbit-boost-progress {
    background: conic-gradient(from 0deg, transparent 0deg, rgba(136, 136, 136, 0.8) 0deg) !important;
}

.orbit-boost-cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    z-index: 3;
}

.cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    border-radius: 7px;
    z-index: 2;
}

.cooldown-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, transparent 0deg, #00ff88 0deg);
    border-radius: 7px;
    transition: background 0.1s ease;
    z-index: 1;
}

/* 플레이어 스탯 UI 개선 */
#playerStats {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    padding: 20px;
    border-radius: 15px;
    border: 3px solid #444;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

#playerStats > div {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 250px;
}

#playerStats > div:first-child {
    margin-bottom: 15px;
}

#playerStats > div:first-child span {
    background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #555;
    font-weight: bold;
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
    font-size: 14px;
    margin-right: 8px;
    display: inline-block;
}

#playerStats > div:first-child span:nth-child(3),
#playerStats > div:first-child span:nth-child(4) {
    color: #ffaa00;
    text-shadow: 0 0 6px rgba(255, 170, 0, 0.4);
    margin-right: 0;
}

.health-bar, .exp-bar {
    height: min(25px, 1.8vh);
}

.health-bar {
    width: 100%;
    max-width: 300px;
    background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
    border: 3px solid #ff4444;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(255, 68, 68, 0.2);
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4444, #ff6666, #ff4444);
    transition: width 0.3s ease;
    border-radius: full;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.4);
}

.health-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: min(14px, 1.1vh);
    font-weight: bold;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        -1px -1px 2px rgba(0, 0, 0, 0.7),
        1px -1px 2px rgba(0, 0, 0, 0.7),
        -1px 1px 2px rgba(0, 0, 0, 0.7);
    z-index: 10;
    letter-spacing: 0.5px;
}

.exp-bar {
    width: 100%;
    max-width: 300px;
    background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
    border: 3px solid #44ff88;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(68, 255, 136, 0.2);
}

.exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #44ff88, #66ffaa, #44ff88);
    transition: width 0.3s ease;
    border-radius: full;
    box-shadow: 0 0 8px rgba(68, 255, 136, 0.4);
}

.exp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: min(14px, 1.1vh);
    font-weight: bold;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        -1px -1px 2px rgba(0, 0, 0, 0.7),
        1px -1px 2px rgba(0, 0, 0, 0.7),
        -1px 1px 2px rgba(0, 0, 0, 0.7);
    z-index: 10;
    letter-spacing: 0.5px;
}

#playerStats > div span:first-child {
    color: #ccc;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 하단 바 컨테이너 스타일 */
#bottomBars {
    display: flex;
    flex-direction: column;
    gap: min(8px, 1vh);
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* 플레이어 정보 (원소 + 레벨) */
.player-info {
    display: flex;
    gap: min(15px, 1.1vh);
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: min(14px, 1vh);
    margin-bottom: min(4px, 0.25vh);
}

/* 원소 컨테이너 스타일 */
#elementContainer {
    font-weight: bold;
    color: #ffaa00;
    text-shadow: 
        0 0 4px rgba(255, 170, 0, 0.4),
        0 0 8px rgba(255, 170, 0, 0.3);
    font-size: min(14px, 1vh);
    animation: elementGlow 2s ease-in-out infinite alternate;
}

/* 레벨 컨테이너 스타일 */
#levelContainer {
    font-weight: bold;
    color: #00ff88;
    text-shadow: 
        0 0 4px rgba(0, 255, 136, 0.4),
        0 0 8px rgba(0, 255, 136, 0.3);
    /* font-size: min(14px, 1vh); */
    animation: levelGlow 2s ease-in-out infinite alternate;
}

/* 원소 글로우 애니메이션 */
@keyframes elementGlow {
    from {
        text-shadow: 
            0 0 4px rgba(255, 170, 0, 0.4),
            0 0 8px rgba(255, 170, 0, 0.3);
    }
    to {
        text-shadow: 
            0 0 6px rgba(255, 170, 0, 0.6),
            0 0 12px rgba(255, 170, 0, 0.5);
    }
}

/* 레벨 글로우 애니메이션 */
@keyframes levelGlow {
    from {
        text-shadow: 
            0 0 4px rgba(0, 255, 136, 0.4),
            0 0 8px rgba(0, 255, 136, 0.3);
    }
    to {
        text-shadow: 
            0 0 6px rgba(0, 255, 136, 0.6),
            0 0 12px rgba(0, 255, 136, 0.5);
    }
}
#elementSelection {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    color: white;
    font-family: Arial, sans-serif;
}
#elementSelection h1 {
    margin-bottom: 1vh;
    font-size: 3vh;
    text-align: center;
}
.element-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
    max-width: 50vw;
    margin-bottom: 5px;
}
.element-card {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: 0.15vw solid #444;
    border-radius: 1vw;
    padding: 2vh 0.5vw;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 14vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.element-card:hover {
    border-color: #666;
    transform: translateY(-0.5vh);
    box-shadow: 0 1vh 2.5vh rgba(255, 255, 255, 0.1);
}
.element-card.selected {
    border-color: #00ff88;
    box-shadow: 0 0 2vh rgba(0, 255, 136, 0.3);
}
.element-icon {
    font-size: 3vh;
    margin-bottom: 1vh;
}
.element-name {
    font-size: 1.5vh;
    font-weight: bold;
    margin-bottom: 0.8vh;
}
.element-stats {
    font-size: 1.2vh;
    color: #ddd;
    line-height: 1.5;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6vh;
    padding: 0 0.3vw;
    gap: 0.4vw;
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-label {
    font-weight: bold;
    color: #fff;
    width: fit-content;
}

.stat-stars {
    color: #ffaa00;
    font-size: 1.3vh;
    text-shadow: 0 0 0.3vh rgba(255, 170, 0, 0.5);
    letter-spacing: 0.08vw;
}

.stat-stars .empty-star {
    color: #444;
    text-shadow: none;
}
.start-button {
    margin-top: 0px;
    padding: 1vh 2.5vw;
    background: #00ff88;
    color: #000;
    border: none;
    border-radius: 0.6vh;
    font-size: 1.6vh;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}
.start-button:hover {
    background: #00cc6a;
}

.start-button:active {
    background: #00aa55;
    transform: translateY(1px) scale(0.98);
}
.start-button:disabled {
    background: #666;
    cursor: not-allowed;
}

/* 닉네임 입력 스타일 */
.nickname-section {
    margin-top: 0.3vh;
    margin-bottom: 0.8vh;
    text-align: center;
}

.nickname-section label {
    display: block;
    margin-bottom: 0.6vh;
    color: #ccc;
    font-size: 1.4vh;
    font-weight: bold;
}

.nickname-section input {
    width: 18vw;
    max-width: 60%;
    min-width: 8rem;
    padding: 0.8vh 1.2vw;
    font-size: 1.4vh;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: 0.15vh solid #444;
    border-radius: 0.6vh;
    color: white;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease;
}

.nickname-section input:focus {
    border-color: #00ff88;
    box-shadow: 0 0 1vh rgba(0, 255, 136, 0.3);
}

.nickname-section input::placeholder {
    color: #888;
}

/* 사망 화면 스타일 */
#deathScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    color: white;
    font-family: Arial, sans-serif;
}

.death-title {
    font-size: 3em;
    color: #ff4444;
    margin-bottom: 20px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    font-weight: bold;
}

.death-subtitle {
    font-size: 1.2em;
    color: #ccc;
    margin-bottom: 30px;
    text-align: center;
}

.death-stats {
    margin-bottom: 30px;
    text-align: center;
}

.death-level {
    font-size: 1.4em;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.death-buttons {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}

.share-button {
    padding: 12px 30px;
    background: linear-gradient(145deg, #4488ff, #3366cc);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(68, 136, 255, 0.3);
}

.share-button:hover {
    background: linear-gradient(145deg, #5599ff, #4477dd);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(68, 136, 255, 0.4);
}

.share-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(68, 136, 255, 0.3);
}

.respawn-button {
    padding: 15px 40px;
    background: linear-gradient(145deg, #ff4444, #cc3333);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

.respawn-button:hover {
    background: linear-gradient(145deg, #ff6666, #ff4444);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

.respawn-button:active {
    background: linear-gradient(145deg, #dd3333, #bb2222);
    transform: translateY(1px) scale(0.98);
}

/* 스킬 설명 보기 버튼 */
.skill-info-button {
    margin-top: 0.8vh;
    margin-bottom: 2vh;
    padding: 0.6vh 1.5vw;
    background: linear-gradient(145deg, #444, #333);
    color: white;
    border: 0.15vh solid #666;
    border-radius: 0.6vh;
    font-size: 1.3vh;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.skill-info-button:hover {
    background: linear-gradient(145deg, #555, #444);
    border-color: #777;
    transform: translateY(-0.1vh);
}

.skill-info-button:active {
    background: linear-gradient(145deg, #333, #222);
    transform: translateY(0.1vh) scale(0.98);
}

/* 디스코드 링크 스타일 */
.discord-link-container {
    margin: 1.5vh 0;
    text-align: center;
}

.discord-link-container.top-left {
    position: absolute;
    top: 2vh;
    left: 2vw;
    margin: 0;
    z-index: 1000;
}

.discord-link-container.top-left .discord-link {
    padding: 0.5vh 1.2vw;
    font-size: 1.1vh;
    border-radius: 0.5vh;
    gap: 0.3vw;
}

.discord-link-container.top-left .discord-icon {
    font-size: 1.3vh;
}

.discord-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5vw;
    padding: 0.8vh 2vw;
    background: linear-gradient(145deg, #5865f2, #4752c4);
    color: white;
    text-decoration: none;
    border-radius: 0.8vh;
    font-size: 1.4vh;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 0.15vh solid #4752c4;
}

.discord-link:hover {
    background: linear-gradient(145deg, #6b73ff, #5865f2);
    border-color: #5865f2;
    transform: translateY(-0.1vh);
    box-shadow: 0 0.4vh 0.8vh rgba(88, 101, 242, 0.3);
}

.discord-link:active {
    background: linear-gradient(145deg, #4752c4, #3c45a5);
    transform: translateY(0.1vh) scale(0.98);
}

.discord-icon {
    font-size: 1.6vh;
}

/* Chrome 브라우저 추천 메시지 */
.browser-recommendation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8vh;
    margin-bottom: 2vh;
    padding: 0.8vh 1.5vw;
    background: linear-gradient(145deg, #333, #222);
    color: #fff;
    border: 0.1vh solid #555;
    border-radius: 0.8vh;
    font-size: 1.2vh;
    font-weight: bold;
    opacity: 0.8;
    max-width: 400px;
}

.browser-icon {
    font-size: 1.4vh;
}


/* 스킬 설명 모달 */
#skillInfoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    color: white;
    font-family: Arial, sans-serif;
}

.modal-content {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: 3px solid #444;
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #444;
    padding-bottom: 20px;
}

.modal-title {
    font-size: 2.5em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.element-description {
    font-size: 1.1em;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 30px;
}

.skills-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.skill-card {
    background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
    border: 2px solid #555;
    border-radius: 15px;
    padding: 25px;
}

.skill-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 1.3em;
    font-weight: bold;
}

.skill-key-badge {
    background: linear-gradient(145deg, #555, #444);
    border: 2px solid #666;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.skill-name {
    color: #00ff88;
}

.skill-stats {
    margin-bottom: 15px;
    font-size: 0.95em;
}

.skill-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.skill-stat-label {
    color: #aaa;
}

.skill-stat-value {
    color: #fff;
    font-weight: bold;
}

.skill-description {
    color: #ddd;
    line-height: 1.5;
    font-size: 0.95em;
}

.passive-section {
    background: linear-gradient(145deg, #3a2a2a, #2a1a1a);
    border: 2px solid #664444;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
}

.passive-header {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffaa66;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.passive-description {
    color: #ddd;
    line-height: 1.5;
}

.close-modal-btn {
    display: block;
    margin: 0 auto;
    padding: 15px 40px;
    background: linear-gradient(145deg, #666, #555);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-modal-btn:hover {
    background: linear-gradient(145deg, #777, #666);
    transform: translateY(-2px);
}

.close-modal-btn:active {
    background: linear-gradient(145deg, #444, #333);
    transform: translateY(1px) scale(0.98);
}


/* 모바일 대응 */
@media (max-width: 768px) {
    /* 양 사이드 광고 조정 */
    .ads-container.selection-ads .selection-left,
    .ads-container.selection-ads .selection-right {
        display: none;
    }
    /* 모바일 UI 크기 조정 */
    .in-game-ui {
        font-size: 12px;
    }
    
    .ui-top {
        padding: 5px 10px;
    }
    

    .rank-container {
        width: 120px;
        opacity: 0.7;
    }
    
    #playerRanking {
        padding: 6px 8px;
        font-size: 10px;
    }
    
    #myRanking {
        padding: 6px 8px;
        font-size: 10px;
    }
    
    #myRanking h4 {
        font-size: 12px;
    }
    
    #myRankingValue {
        font-size: 13px;
    }
    
    .ranking-list {
        max-height: 25vh;
    }
    
    #controls {
        padding: 6px 15px;
        font-size: 12px;
    }
    
    /* 플레이어 스탯 UI 모바일 최적화 */
    #playerStats {
        padding: 15px;
        margin-top: 8px;
    }
    
    #playerStats > div {
        min-width: 200px;
        margin-bottom: 8px;
    }
    
    #playerStats > div:first-child span {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .health-bar, .exp-bar {
        width: 100%;
        max-width: min(250px, 60vw);
    }
    
    .health-bar,
    .exp-bar {
        height: min(20px, 2.5vh);
    }
    
    .health-text, .exp-text {
        font-size: min(13px, 1.6vh);
        font-weight: 800;
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.9),
            -1px -1px 2px rgba(0, 0, 0, 0.7),
            1px -1px 2px rgba(0, 0, 0, 0.7),
            -1px 1px 2px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.5px;
    }
    
    .player-info {
        gap: min(12px, 1.5vh);
        font-size: min(13px, 1.6vh);
    }
    
    /* 스킬 UI 모바일 최적화 */
    #skillUI {
        gap: min(15px, 2vh);
    }
    
    .ui-bottom {
        padding: min(15px, 2.5vh) 10px min(25px, 4vh) 10px;
        gap: min(15px, 2vh);
        margin-bottom: 70px; /* 모바일 광고 공간 확보 */
    }
    
    .skill-button {
        width: min(75px, 10vh);
        height: min(75px, 10vh);
    }
    
    .skill-key {
        font-size: min(24px, 3vh);
        margin-bottom: min(2px, 0.3vh);
    }
    
    .skill-damage {
        font-size: min(16px, 2vh);
    }
    
    .orbit-boost-button .skill-key {
        font-size: min(18px, 2.3vh);
    }
    
    .orbit-boost-button .orbit-boost-charge {
        font-size: min(16px, 2vh) !important;
    }
    
    /* 버튼들 모바일 최적화 */
    .skill-info-button {
        margin-top: 0px;
        margin-bottom: 1vh;
        padding: 1vh 1.5vw;
        font-size: 1.4vh;
    }
    
    .start-button {
        padding: 0.9vh 1.7vw;
        font-size: 1.6vh;
    }
    
    /* 사망 화면 모바일 최적화 */
    .death-title {
        font-size: 2.5em;
        margin-bottom: 15px;
    }
    
    .death-subtitle {
        font-size: 1.1em;
        margin-bottom: 25px;
    }
    
    .death-stats {
        margin-bottom: 25px;
    }
    
    .death-level {
        font-size: 1.3em;
    }
    
    .death-buttons {
        gap: 15px;
        width: 90%;
        max-width: 300px;
    }
    
    .respawn-button, .share-button {
        padding: 15px 25px;
        font-size: 1.1em;
        width: 100%;
    }
    
    .share-button {
        padding: 12px 25px;
        font-size: 1.0em;
    }
    
    /* 모달 모바일 최적화 */
    .modal-content {
        padding: 20px;
        margin: 15px;
        max-width: 95vw;
        max-height: 85vh;
    }
    
    .skills-section {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 25px;
    }
    
    .modal-title {
        font-size: 2em;
        gap: 10px;
    }
    
    .element-description {
        font-size: 1em;
        margin-bottom: 25px;
    }
    
    .skill-card {
        padding: 20px;
    }
    
    .skill-header {
        font-size: 1.2em;
        margin-bottom: 12px;
    }
    
    .passive-section {
        padding: 20px;
        margin-bottom: 25px;
    }
    
    .close-modal-btn {
        padding: 12px 30px;
        font-size: 1.1em;
    }
}

/* 세로 길이가 짧은 화면 대응 (600px 이하) */
@media (max-height: 600px) {
    .ui-bottom {
        padding: min(10px, 1.5vh) 15px min(12px, 2vh) 15px;
        gap: min(10px, 1.2vh);
    }
    
    .skill-button {
        width: min(60px, 6vh);
        height: min(60px, 6vh);
        border-radius: min(6px, 0.8vh);
    }
    
    .skill-key {
        font-size: min(18px, 1.9vh);
        margin-bottom: min(1px, 0.1vh);
    }
    
    .skill-damage {
        font-size: min(12px, 1.3vh);
    }
    
    .orbit-boost-button .skill-key {
        font-size: min(14px, 1.5vh);
    }
    
    .orbit-boost-button .orbit-boost-charge {
        font-size: min(12px, 1.3vh) !important;
    }
    
    .health-bar, .exp-bar {
        height: min(15px, 1.6vh);
    }
    
    .health-text {
        font-size: min(10px, 1.1vh);
        text-shadow: 
            1px 1px 3px rgba(0, 0, 0, 0.9),
            -1px -1px 1px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.3px;
    }
    
    .exp-text {
        font-size: min(10px, 1.1vh);
        text-shadow: 
            1px 1px 3px rgba(0, 0, 0, 0.9),
            -1px -1px 1px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.3px;
    }
    
    .player-info {
        font-size: min(10px, 1vh);
        gap: min(8px, 1vh);
        margin-bottom: min(1px, 0.2vh);
    }
    
    #elementContainer, #levelContainer {
        /* font-size: min(10px, 1vh); */
    }
    
    #bottomBars {
        gap: min(4px, 0.4vh);
    }
    
    #skillUI {
        gap: min(12px, 1.4vh);
    }
}

/* 매우 짧은 화면 대응 (500px 이하) */
@media (max-height: 500px) {
    .ui-bottom {
        padding: min(6px, 1.2vh) 10px min(8px, 1.5vh) 10px;
        gap: min(6px, 0.9vh);
    }
    
    .skill-button {
        width: min(50px, 5.5vh);
        height: min(50px, 5.5vh);
        border-radius: min(5px, 0.6vh);
    }
    
    .skill-key {
        font-size: min(14px, 1.6vh);
        margin-bottom: min(0px, 0.05vh);
    }
    
    .skill-damage {
        font-size: min(10px, 1.1vh);
    }
    
    .orbit-boost-button .skill-key {
        font-size: min(12px, 1.3vh);
    }
    
    .orbit-boost-button .orbit-boost-charge {
        font-size: min(10px, 1.1vh) !important;
    }
    
    .health-bar, .exp-bar {
        height: min(12px, 1.3vh);
    }
    
    .health-text {
        font-size: min(9px, 0.9vh);
        text-shadow: 
            1px 1px 2px rgba(0, 0, 0, 0.9),
            -1px -1px 1px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.2px;
    }
    
    .exp-text {
        font-size: min(9px, 0.9vh);
        text-shadow: 
            1px 1px 2px rgba(0, 0, 0, 0.9),
            -1px -1px 1px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.2px;
    }
    
    .player-info {
        font-size: min(8px, 0.8vh);
        gap: min(6px, 0.7vh);
        margin-bottom: min(1px, 0.1vh);
    }
    
    #elementContainer, #levelContainer {
        /* font-size: min(8px, 0.8vh); */
    }
    
    #bottomBars {
        gap: min(2px, 0.3vh);
    }
    
    #skillUI {
        gap: min(10px, 1.2vh);
    }
}

/* 더 작은 모바일 화면 (480px 이하) */
@media (max-width: 480px) {
    /* 원소 선택 페이지 모바일 최적화 */

    #bottomBars {
        gap: min(6px, 0.8vh);
        max-width: 90vw;
    }

    #elementContainer, #levelContainer {
        /* font-size: min(10px, 1.3vh); */
    }
    
    .player-info {
        gap: min(10px, 1.3vh);
        font-size: min(12px, 1.5vh);
        margin-bottom: min(2px, 0.3vh);
    }
    
    .health-bar, .exp-bar {
        height: min(16px, 2vh);
        width: 100%;
        max-width: min(70vw, 200px);
        border-width: 1px;
        border-radius: 5px;
    }
    
    .health-text, .exp-text {
        font-size: min(11px, 1.4vh);
        font-weight: 800;
        text-shadow: 
            1px 1px 3px rgba(0, 0, 0, 0.9),
            -1px -1px 1px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.3px;
    }
    
    /* 스킬 UI 위치 조정 */
    #skillUI {
        gap: min(12px, 1.6vh);
    }
    
    .ui-bottom {
        margin-bottom: 50px;
        gap: min(12px, 1.6vh);
    }
    
    .skill-button {
        width: min(65px, 8.5vh);
        height: min(65px, 8.5vh);
    }
    
    .skill-key {
        font-size: min(20px, 2.5vh);
    }
    
    .skill-damage {
        font-size: min(14px, 1.8vh);
    }
    
    /* UI 요소들 더 컴팩트하게 */
    #playerStats {
        padding: 6px;
        border-radius: 8px;
        border: 1px solid #444;
        font-size: 9px;
    }
    
    #playerStats > div {
        min-width: 120px;
        margin-bottom: 2px;
        font-size: 9px;
    }
    
    #playerStats > div:first-child {
        margin-bottom: 5px;
    }
    
    #playerStats > div:first-child span {
        padding: 2px 4px;
        font-size: 8px;
        margin-right: 3px;
    }
    
    #playerStats > div span:first-child {
        font-size: 8px;
    }
    
    /* 레벨 순위 UI 크기 조정 */
    .rank-container {
        width: 100px;
        padding: 0 6px;
        gap: 3px;
        opacity: 0.65;
    }

    #playerRanking {
        padding: 4px 6px;
        font-size: 0.75em;
        border-radius: 3px;
        border: 1px solid #444;
    }
    
    #myRanking {
        padding: 4px 6px;
        border-radius: 3px;
        border: 1px solid #444;
    }

    #myRanking div {
        display: flex;
        gap: 0.2em;
    }

    #myRanking span {
        font-size: 0.75em;
    }
    
    #playerRanking h4 {
        margin: 0 0 3px 0;
        font-size: 1em;
    }
    
    .ranking-list {
        max-height: 15vh;
    }
    
    .ranking-item {
        margin-bottom: 0px;
        padding: 0;
    }
    
    .ranking-rank {
        min-width: 10px;
        font-size: 0.8em;
    }
    
    .ranking-name {
        margin: 0 2px;
        font-size: 0.8em;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .ranking-element {
        font-size: 0.7em;
        min-width: 18px;
        text-align: center;
    }
    
    .ranking-level {
        font-size: 0.8em;
        min-width: 24px;
        text-align: right;
    }
    
    /* 모달 더 컴팩트하게 */
    .modal-content {
        padding: 15px;
        margin: 10px;
    }
    
    .modal-title {
        font-size: 1.8em;
    }
    
    .skill-card {
        padding: 15px;
    }
}