/* ============================================
   The2nd - 모바일 버전 스타일
   새 레이아웃: 좌우 분할 + 큰 카운트다운 + 룰/편집
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    background-color: #0d0501;
    /* 하단 레터박스 흰색 방지 (필수) */
}

body {
    height: 100%;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    touch-action: none;
    font-family: 'Courier New', monospace;
    background: linear-gradient(180deg, #1a0a00 0%, #3d1a00 50%, #0d0501 100%);
    color: #e8d5b7;
}

/* 게임 컨테이너에도 터치 차단 적용 */
.game-container {
    touch-action: none;
}

/* ============================================
   메인 컨테이너
   ============================================ */
.game-container {
    width: 100%;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ============================================
   플레이어 영역 (상단/하단) - 좌우 분할
   ============================================ */
.player-section {
    flex: 0.8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    position: relative;
    min-height: 0;
    gap: 10px;
}

/* 상대 영역 - 180도 회전 */
.opponent-section {
    background: linear-gradient(180deg, rgba(139, 69, 19, 0.3) 0%, transparent 100%);
    transform: rotate(180deg);
}

/* 내 영역 */
.my-section {
    background: linear-gradient(0deg, rgba(139, 69, 19, 0.3) 0%, transparent 100%);
}

/* ============================================
   룰 버튼 (왼쪽 상단)
   ============================================ */
.rules-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ffd700;
    border-radius: 6px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.rules-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 룰 오버레이 */
.rules-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    border-radius: 5px;
}

.rules-overlay.show {
    display: flex;
}

.rules-content {
    text-align: center;
    padding: 15px;
}

.rules-content h2 {
    font-size: 1.3rem;
    color: #ffd700;
    margin-bottom: 10px;
}

.rules-content ul {
    list-style: none;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.6;
}

.rules-content li {
    margin-bottom: 5px;
}

.close-rules-btn {
    margin-top: 10px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    background: #ffd700;
    color: #333;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* ============================================
   플레이어 정보 (왼쪽)
   ============================================ */
.player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
}

.name-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.player-label {
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 1px;
}

.edit-btn {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    background: transparent;
    border: 1px solid #ffd700;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-btn.hidden {
    display: none;
}

.cowboy {
    font-size: 4rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.1s, filter 0.1s;
}

/* 총 쏜을 때 효과 */
.cowboy.shooting {
    animation: shootEffect 0.3s ease-out;
}

@keyframes shootEffect {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3) translateX(10px);
        filter: brightness(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* 맞았을 때 효과 */
.cowboy.hit {
    animation: hitEffect 0.5s ease-out;
}

@keyframes hitEffect {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    20% {
        transform: scale(0.8) rotate(-10deg);
        filter: brightness(2) hue-rotate(180deg);
    }

    40% {
        transform: scale(1.1) rotate(10deg);
        filter: brightness(0.5);
    }

    60% {
        transform: scale(0.9) rotate(-5deg);
    }

    100% {
        transform: scale(1) rotate(0);
        filter: brightness(1);
    }
}

/* HP 바 - 크게 */
.hp-bar {
    width: 100%;
    max-width: 140px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #8b4513;
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}

/* HP 바 - 더 크게 (이름 위) */
.hp-bar-large {
    max-width: 100%;
    width: 100%;
    height: 32px;
    border: 3px solid #ffd700;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.hp-bar-large .hp-text {
    font-size: 1.1rem;
    font-weight: 800;
}

.hp-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff6b35 0%, #ffd700 100%);
    transition: width 0.3s ease;
}

.hp-fill.low {
    background: linear-gradient(90deg, #ff0000 0%, #ff6b35 100%);
    animation: pulse 0.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: 1px 1px 2px black;
}

/* 총 이미지 스타일 */
.gun-image {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    margin-bottom: 3px;
}

/* 스턴 컨테이너 - 스턴시에만 표시 */
.stun-container {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.stun-container.show {
    display: flex;
}

.stun-indicator {
    font-size: 0.85rem;
    color: #ff6b35;
    font-weight: 700;
    animation: stunPulse 0.3s ease-in-out infinite;
}

@keyframes stunPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.stun-gauge {
    width: 90px;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.stun-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff6b35, #ff0000);
    transition: width 0.05s linear;
}

/* 발사/데미지 이펙트 */
.shot-indicator {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0;
    pointer-events: none;
}

.shot-indicator.clean {
    animation: shotClean 0.5s ease-out forwards;
}

.shot-indicator.dirty {
    animation: shotDirty 0.4s ease-out forwards;
}

@keyframes shotClean {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(3);
    }
}

@keyframes shotDirty {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(2) rotate(20deg);
    }
}

.damage-popup {
    position: absolute;
    font-size: 2rem;
    font-weight: 700;
    color: #ff0000;
    opacity: 0;
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 15px rgba(255, 0, 0, 0.7);
}

/* 클린샷 데미지 - 노란색 */
.damage-popup.clean {
    color: #ffd700;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 215, 0, 1);
}

/* 더티샷 데미지 - 주황색 */
.damage-popup.dirty {
    color: #ff6b35;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 107, 53, 0.8);
}

.damage-popup.show {
    animation: damageFloat 1.2s ease-out forwards;
}

@keyframes damageFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-20px) scale(1.5);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1);
    }
}

/* ============================================
   발사 버튼 (오른쪽, 크게)
   ============================================ */
.fire-button {
    flex: 1;
    height: 100%;
    font-size: 2.5rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;

    /* 기본: 비활성 */
    background: #444;
    color: #888;
    box-shadow: 0 5px 0 #222;
}

.fire-button.active {
    background: linear-gradient(180deg, #ff4444 0%, #cc0000 100%);
    color: white;
    box-shadow: 0 0 25px rgba(255, 68, 68, 0.8), 0 5px 0 #5c0a0a;
    animation: fireReady 0.4s ease-in-out infinite;
}

@keyframes fireReady {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.fire-button.active:active {
    transform: scale(0.95) translateY(3px);
    box-shadow: 0 2px 0 #5c0a0a;
    animation: none;
}

.fire-button.disabled {
    background: #333;
    color: #555;
    box-shadow: 0 3px 0 #222;
}

/* ============================================
   중앙 게임 정보 영역 (3분할)
   ============================================ */
.center-section {
    background: rgba(0, 0, 0, 0.9);
    border-top: 3px solid #ffd700;
    border-bottom: 3px solid #ffd700;
    padding: 12px 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    flex-shrink: 0;
    min-height: 140px;
}

/* 카운트다운 영역 (좌/우) */
.countdown-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

/* 상대방용 카운트다운 - 180도 회전 */
.opponent-countdown {
    transform: rotate(180deg);
}

/* 카운트다운 숫자 - 반응형 크기 */
.countdown {
    font-size: clamp(1.8rem, 10vw, 3rem);
    font-weight: 700;
    color: #e8d5b7;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.countdown.go {
    color: #ff0000;
    text-shadow: 0 0 35px rgba(255, 0, 0, 1);
    animation: goPulse 0.2s ease-in-out infinite;
}

@keyframes goPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.round-info {
    font-size: 0.7rem;
    color: #ffd700;
    letter-spacing: 1px;
}

/* 중앙 컨트롤 */
.center-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
}

.game-message {
    font-size: 0.75rem;
    color: #e8d5b7;
    text-align: center;
}

.game-message.damage {
    color: #ff6b35;
    font-weight: 700;
}

/* 시작 버튼 */
.start-button {
    padding: 12px 18px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: inherit;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
    border: none;
    border-radius: 10px;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 0 #8b4513, 0 0 15px rgba(255, 215, 0, 0.4);
    transition: all 0.15s;
    line-height: 1.2;
}

.start-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8b4513;
}

.start-button:disabled {
    background: #444;
    color: #888;
    box-shadow: 0 2px 0 #222;
    cursor: not-allowed;
    transform: none;
}

/* GO 타이머 */
.go-timer-container {
    display: none;
    width: 38px;
    height: 38px;
}

.go-timer-container.active {
    display: block;
}

.go-timer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.go-timer-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 8;
}

.go-timer-progress {
    fill: none;
    stroke: #ff0000;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.05s linear;
}

/* ============================================
   편집 모달
   ============================================ */
.edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.edit-modal.show {
    display: flex;
}

.edit-modal-content {
    background: #2a1a0a;
    border: 2px solid #ffd700;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    width: 85%;
    max-width: 300px;
}

.edit-modal-content h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.edit-modal-content label {
    display: block;
    font-size: 0.9rem;
    margin-top: 10px;
    margin-bottom: 5px;
}

.edit-modal-content input {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: #1a0a00;
    border: 1px solid #8b4513;
    border-radius: 5px;
    color: #e8d5b7;
    text-align: center;
}

.emoji-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.emoji-option {
    font-size: 1.8rem;
    padding: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
}

.emoji-option:hover,
.emoji-option.selected {
    background: rgba(255, 215, 0, 0.3);
}

.edit-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.edit-modal-buttons button {
    padding: 10px 25px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#edit-save {
    background: #ffd700;
    color: #333;
}

#edit-cancel {
    background: #666;
    color: #fff;
}

/* ============================================
   게임 오버 오버레이
   ============================================ */
.game-over-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.game-over-overlay.show {
    display: flex;
}

.game-over-content {
    text-align: center;
    animation: gameOverAppear 0.5s ease-out;
}

@keyframes gameOverAppear {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.game-over-content h1 {
    font-size: 2.5rem;
    color: #ffd700;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    margin-bottom: 10px;
}

.game-over-content p {
    font-size: 1.3rem;
    color: #e8d5b7;
    margin-bottom: 25px;
}

#restart-btn {
    padding: 15px 40px;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: inherit;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
    border: none;
    border-radius: 10px;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 0 #8b4513;
}

#restart-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8b4513;
}

/* ============================================
   화면 효과
   ============================================ */
.flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
}

.flash-overlay.flash-clean {
    animation: flashClean 0.15s ease-out;
}

.flash-overlay.flash-dirty {
    animation: flashDirty 0.12s ease-out;
}

@keyframes flashClean {
    0% {
        background: rgba(255, 255, 255, 0.9);
    }

    100% {
        background: transparent;
    }
}

@keyframes flashDirty {
    0% {
        background: rgba(255, 107, 53, 0.6);
    }

    100% {
        background: transparent;
    }
}

/* 화면 흔들림 */
.game-container.shake {
    animation: containerShake 0.5s ease-out;
}

@keyframes containerShake {

    0%,
    100% {
        transform: translateX(0) translateY(0);
    }

    10% {
        transform: translateX(-10px) translateY(-2px);
    }

    20% {
        transform: translateX(10px) translateY(2px);
    }

    30% {
        transform: translateX(-8px) translateY(-1px);
    }

    40% {
        transform: translateX(8px) translateY(1px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(5px);
    }
}

/* 플레이어 피격 */
.player-section.hit {
    animation: hitFlash 0.4s ease-out;
}

@keyframes hitFlash {
    0% {
        filter: brightness(1);
    }

    15% {
        filter: brightness(3) saturate(0);
    }

    30% {
        filter: brightness(0.8) saturate(1.5);
    }

    50% {
        filter: brightness(2) saturate(0.5);
    }

    100% {
        filter: brightness(1) saturate(1);
    }
}

/* 스턴 상태 - 화려한 효과 */
.player-section.stunned {
    animation: stunnedFlash 0.5s ease-in-out infinite;
}

@keyframes stunnedFlash {

    0%,
    100% {
        background: linear-gradient(0deg, rgba(255, 100, 50, 0.2) 0%, transparent 100%);
        filter: none;
    }

    50% {
        background: linear-gradient(0deg, rgba(255, 50, 0, 0.4) 0%, transparent 100%);
        filter: brightness(0.9) saturate(1.2);
    }
}

.opponent-section.stunned {
    animation: stunnedFlashOpponent 0.5s ease-in-out infinite;
}

@keyframes stunnedFlashOpponent {

    0%,
    100% {
        background: linear-gradient(180deg, rgba(255, 100, 50, 0.2) 0%, transparent 100%);
        filter: none;
    }

    50% {
        background: linear-gradient(180deg, rgba(255, 50, 0, 0.4) 0%, transparent 100%);
        filter: brightness(0.9) saturate(1.2);
    }
}

.player-section.stunned .cowboy {
    animation: stunShake 0.15s infinite;
}

@keyframes stunShake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    25% {
        transform: translateX(-5px) rotate(-5deg);
    }

    75% {
        transform: translateX(5px) rotate(5deg);
    }
}