/*
 * game-style.css
 * 황구 키우기 게임 전용 CSS 스타일시트
 */

/* 전체 드래그 방지 */
* {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* 표준 */
    -webkit-user-drag: none;   /* 이미지 드래그 방지 */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* 입력 필드는 선택 가능하게 */
input, textarea, .selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 기본 레이아웃 설정 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    touch-action: manipulation;
    -ms-touch-action: manipulation; /* IE용 */
}

/* 모달 z-index 조정 */
#petInfoModal .modal-dialog,
#myGuestbookModal .modal-dialog {
    z-index: 1056;
}

.modal-backdrop {
    z-index: 1050;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* game-area 내부 app-content와 panel이 공간을 꽉 채우도록 설정 */
#app {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 모든 nav-tabs에 동일한 스타일 적용 */
.panel-with-tabs .nav-tabs,
.nav-tabs.nav-tabs-inverse {
    height: 40px !important;
    font-size: 15px !important; /* em 대신 px로 고정 */
}

/* 탭 링크 스타일 통일 */
.panel-with-tabs .nav-tabs .nav-link,
.nav-tabs.nav-tabs-inverse .nav-link {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 20px !important;
    font-size: 15px !important; /* 절대값으로 고정 */
}

.panel .panel-heading {
    height: 40px !important;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

/* 탭 overflow 영역 고정 */
.tab-overflow {
    height: 40px !important;
    overflow: hidden !important;
}

/* 뷰포트 높이에 영향받지 않도록 */
.panel-inverse.panel-with-tabs {
    height: 100%;
}

.panel {
    border-radius: 0 !important;
    overflow: hidden !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.app-header-fixed {
    padding-top: 0;
}

/* 공통 스타일 */
.split {
    display: flex;
    width: 100%;
    height: 100vh;
}

.log-area {
    background: #222222;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15.6px !important;
    font-weight: 500;
    letter-spacing: -1px;
    overflow-y: auto;
    padding: 0px;
    box-sizing: border-box;
}

.game-area {
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 100%;
    image-rendering: pixelated;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 로그인 시 배경 이미지 위치 설정 */
.game-area.logged-out {
    position: relative;
}

.game-area img {
    max-width: 80vw;
    max-height: 40vh;
}

/* PC 스타일 (기본값) */
.panel-body {
    height: calc(100vh - 120px);  /* 상단 여백 고려하여 계산 */
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 100%;
}

.split {
    flex-direction: row;
}

/* 모바일 스타일 */
@media (max-width: 768px) {
    .app-content {
        overflow-y: auto;
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    .panel-body {
        max-height: none !important;
        height: auto !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS 대응 */
    }

    .split {
        flex-direction: column;
    }

    .game-area {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Gutter 스타일 */
.gutter {
    background-color: #444;
}

.gutter-col {
    cursor: col-resize;
    width: 8px;
}

.gutter-row {
    cursor: row-resize;
    height: 8px;
}

/* 로그인 컨테이너 */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.logo-img {
    margin-bottom: 30px;
    width: 320px;
}

/* 로그인 폼 - PC */
.login-form {
    width: 80vw;
    max-width: 370px;
}

/* 로그인 폼 - 모바일 */
@media (max-width: 768px) {
    .login-form {
        width: 65vw;
        max-width: 320px;
    }
}

/* 버튼 및 폼 컨트롤 */
.btn {
    border-radius: 0 !important;
}

.form-control {
    border-radius: 0 !important;
}

/* 탭 스타일 */
.tab-overflow .nav.nav-tabs.nav-tabs-inverse .next-button+li>a.active,
.tab-overflow .nav.nav-tabs.nav-tabs-inverse .prev-button+li>a.active {
    border-radius: 0px;
}

.nav-tabs .nav-link {
    border-radius: 0px;
}

/* 탭 영역 가운데 정렬 */
.tab-overflow > ul.nav-tabs {
    justify-content: center;
}

/* game-area에 position: relative 추가가 핵심 */
.game-area {
    position: relative; /* 중요: 비디오를 game-area 안에 가두기 위해 필요 */
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 100%;
    image-rendering: pixelated;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* 원래대로 0으로 유지 */
}

.game-area > *:not(video) {
    position: relative;
    z-index: 1;
}

/* 모달 스타일 */
.modal .modal-content,
.modal-content.bg-dark {
    background-color: #595959 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* 팝오버 블랙 반투명 스타일 */
.popover {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.popover-header {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.popover-body {
    color: #fff !important;
}

/* 팝오버 화살표 (상단 표시용) */
.popover .popover-arrow::after {
    border-top-color: rgba(0, 0, 0, 0.9) !important;
}

/* 팝오버 화살표 테두리 */
.popover .popover-arrow::before {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Popover 커스텀 스타일 */
.game-popover {
    --bs-popover-bg: #2b2b2b;
    --bs-popover-border-color: #444;
    --bs-popover-body-color: #fff;
}

.game-popover .popover-body {
    background-color: #2b2b2b;
    color: #fff;
}

/* 등급별 색상 */
.grade-poor { color: #6D6E70 !important; }
.grade-normal { color: #FFFFFF !important; }
.grade-advanced { color: #40BF40 !important; }
.grade-rare { color: #0081FF !important; }
.grade-hero { color: #C600FF !important; }
.grade-legend { color: #FF8000 !important; }
.grade-relic { color: #FF007D !important; }
.grade-artifact { color: #D2AA23 !important; }

/* 등급별 색상 - 팝오버 내부 (더 높은 우선순위) */
.popover-body .grade-poor { color: #6D6E70 !important; }
.popover-body .grade-normal { color: #FFFFFF !important; }
.popover-body .grade-advanced { color: #40BF40 !important; }
.popover-body .grade-rare { color: #0081FF !important; }
.popover-body .grade-hero { color: #C600FF !important; }
.popover-body .grade-legend { color: #FF8000 !important; }
.popover-body .grade-relic { color: #FF007D !important; }
.popover-body .grade-artifact { color: #D2AA23 !important; }

/* AFTER: 연타 표시용 스타일 추가 */
.combo-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 
        2px 2px 0 #ff6600,
        -2px -2px 0 #ff6600,
        2px -2px 0 #ff6600,
        -2px 2px 0 #ff6600,
        0 0 10px rgba(255, 102, 0, 0.8);
    animation: comboFlash 1s ease-out;
    z-index: 1000;
    pointer-events: none;
}

@keyframes comboFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(5deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* 기존 연타 스타일 유지 */
.combo-indicator {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  z-index: 1000;
  animation: combo-pulse 1s ease-out;
}

/* 스킬 인디케이터 공통 스타일 */
.skill-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  z-index: 1000;
  animation: skill-fade 1.5s ease-out;
}

/* 크리티컬 텍스트 스타일 */
.critical-text {
  color: #FF4500;
  font-size: 42px;
}

/* 회피 텍스트 스타일 */
.dodge-text {
  color: #00BFFF;
  font-size: 38px;
}

/* 애니메이션 정의 */
@keyframes combo-pulse {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@keyframes skill-fade {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pet-hp-overlay {
  position: absolute;
  bottom: -10px !important;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 150px;
}

.pet-hp-overlay .progress {
  height: 20px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
}

.pet-hp-overlay .progress-bar {
  font-size: 11px;
  line-height: 20px;
}

/* 기존 팝오버 스타일을 더 구체적으로 수정 */
body .popover,
.popover[role="tooltip"] {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .popover .popover-header,
.popover[role="tooltip"] .popover-header {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

body .popover .popover-body,
.popover[role="tooltip"] .popover-body {
    color: #fff !important;
    background-color: transparent !important;
}

/* 팝오버 화살표 (모든 방향) */
.bs-popover-top .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] .popover-arrow::after {
    border-top-color: rgba(0, 0, 0, 0.9) !important;
}

.bs-popover-bottom .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after {
    border-bottom-color: rgba(0, 0, 0, 0.9) !important;
}

.bs-popover-start .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] .popover-arrow::after {
    border-left-color: rgba(0, 0, 0, 0.9) !important;
}

.bs-popover-end .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] .popover-arrow::after {
    border-right-color: rgba(0, 0, 0, 0.9) !important;
}

/* 아이템 툴팁 공통 스타일 */
.tooltip .tooltip-inner {
    text-align: left !important;
    padding: 10px 14px;
    max-width: 280px;
}

.gear-tooltip {
    font-size: 13px;
    line-height: 1.4;
}

.gear-name {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
    color: #fff;
}

.gear-grade {
    font-size: 12px;
    margin-bottom: 6px;
    opacity: 0.85;
}

.gear-type {
    margin-bottom: 8px;
    font-size: 12px;
    color: #ccc;
}

/* 스탯 색상 */
.stat-phy-atk .value { color: #ff6b6b; }
.stat-phy-def .value { color: #f59f00; }
.stat-mag-atk .value { color: #339af0; }
.stat-mag-def .value { color: #4aa5ff; }
.stat-hp .value { color: #e03131; }
.stat-mp .value { color: #1971c2; }
.stat-weight { color: #fff; }
.stat-crit-rate .value { color: #ff6b6b; }
.stat-crit-dmg .value { color: #ffa94d; }
.stat-absorb .value { color: #51cf66; }

/* 등급별 색상 (정확한 RGB 값) */
.grade-하급 { color: rgb(109, 110, 112) !important; }  /* 회색 */
.grade-일반 { color: rgb(255, 255, 255) !important; }  /* 흰색 */
.grade-고급 { color: rgb(64, 191, 64) !important; }    /* 녹색 */
.grade-희귀 { color: rgb(0, 129, 255) !important; }    /* 파란색 */
.grade-영웅 { color: rgb(198, 0, 255) !important; }    /* 보라색 */
.grade-전설 { color: rgb(255, 128, 0) !important; }    /* 주황색 */
.grade-유물 { color: rgb(255, 0, 125) !important; }    /* 분홍색 */
.grade-성물 { color: rgb(210, 170, 35) !important; }   /* 금색 */

/* 툴팁 내 등급 이름 강조 */
.gear-tooltip .gear-name {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.gear-tooltip .gear-grade {
    font-size: 12px;
    margin-bottom: 6px;
    font-weight: 600;
}