.fishingGameStart {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-105%);
    display: block;
    z-index: 5;
    overflow: visible;
}
.fishingGameStart>.frame {display: inline-block; width: 50px; height: 50px;}
.fishingGameStart>.frame>img {display: block; width: 100%; height: 100%; object-fit: cover;}

.fishingGameStart::after {
    content: "낚시 하고 로즈 받아가세요!";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-30%, -140%);

    z-index: 5;

    white-space: nowrap;
    padding: 6px 10px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 13px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

/* 호버하면 나타남 */
.fishingGameStart:hover::after {
    opacity: 1;
}



#fishGamebody {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);

    width: 100%;
    height: 100%;
}

/* 드래그 방지 */
#fishGameZone {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#fishGameZone {
    margin-top: 40px;
    position: relative;
    width: 1400px;
    height: 760px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

    /* 반응형 */
    transform-origin: top center;
    transform: scale(var(--game-scale));
}

.bgVideoSec {position: relative; display: block; width: 100%; height: 100%;}
.bgVideoSec>.bgVideoCont {display: none; width: 100%; height: 100%;}
.bgVideoSec>#ocean_Bg {display: block;}

.bgVideoSec>.bgVideoCont>video {position: absolute; top:0; left:0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.5s ease-in-out;}
.bgVideoSec>.bgVideoCont>video.night {opacity: 0;}

#storeVideo {display: none; width: 100%; height: 100%;}
#storeVideo>video {position: absolute; top:0; left:0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.5s ease-in-out;}



/* 캔버스 (게임 오브젝트 표시용) */
#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


/* 게임 시작 화면 */
.startSec {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 10000;}
.startSec>.contBox {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; text-align: center;}
.startSec>.contBox>button {margin-bottom: 15px; padding: 15px 30px; display: block; width: 100%; font-weight: bold; font-size: 30px; color: #00203F; background-color: #ADEFD1; border: none; cursor: pointer; border-radius: 7px;}
.startSec>.contBox>button:last-child {margin-bottom: 0; color: #ADEFD1; background-color: #00203F; box-shadow: 0 0 2px #ADEFD1;}


/* 캐스팅 버튼 */
#castingBtn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; text-align: center; z-index: 10000;}
#castingBtn>button {padding: 15px 30px; display: block; width: 100%; font-weight: bold; font-size: 30px; color: #00203F; background-color: #ADEFD1; border: none; cursor: pointer; border-radius: 5px; box-shadow: 0 0 4px #000;}


/* 버튼 스타일 */
#contBtnsSec {position: absolute; bottom: 5px; right: 5px; padding: 10px; display: none; background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
#contBtnsSec>.btnType {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;}
#contBtnsSec>.btnType:last-child {margin-top: 10px;}
#contBtnsSec>.btnType>button {display: block; width: 65px; height: auto; background-color: transparent; border: none; border-radius: 10px; cursor: pointer; transition: 0.3s;}
#contBtnsSec>.btnType>button:first-child {margin-right: 10px;}
#contBtnsSec>.btnType>button.on {background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);}
#contBtnsSec>.btnType>button.locked {opacity: 0.3;pointer-events: none;filter: grayscale(100%);}
#contBtnsSec>.btnType>button>img {display: block; width: 100%; height: 100%; object-fit: cover;}


.exitBtnArea {position: absolute; top: 5px; right: 5px; display: block;}
.exitBtnArea>button {padding: 15px; display: block; font-weight: bold; font-size: 20px; background-color: #fff; border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}


/* 입질 이벤트 */
#biteEvent {position: absolute; top: 50px; left: 50%; transform: translateX(-50%); display: none;}
#biteEvent>.contBox {display: flex; flex-wrap: nowrap; align-items: center; flex-direction: row;}
#biteEvent>.contBox>.frame {margin-left: 30px; display: block; width: 120px; height: auto;
    animation: shakeFish 0.6s ease-in-out infinite;
    transform-origin: center center;
}
#biteEvent>.contBox>.frame>img {display: block; width: 100%; height: 100%; object-fit: contain;}
#biteEvent>.contBox>p {font-weight: bold; font-size: 30px; color: #fff; text-align: center; text-shadow: 0 0 4px #000;}

#biteEvent2 {position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); display: none;}
#biteEvent2>.contBox {display: flex; flex-wrap: nowrap; align-items: center; flex-direction: row;}
#biteEvent2>.contBox>.frame {margin-right: 30px; display: block; width: 75px; height: auto;
    animation: softBounce 0.6s ease-in-out infinite;
    transform-origin: center center;
}
#biteEvent2>.contBox>.frame>img {display: block; width: 100%; height: 100%; object-fit: contain;}
#biteEvent2>.contBox>p {font-weight: bold; font-size: 30px; color: #fff; text-align: center; text-shadow: 0 0 4px #000;}

/* 낚시중 */
#fishingImg {position: absolute; bottom: 5px; right: 5px; padding: 10px; display: none; background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
#fishingImg>p {margin-bottom: 10px; font-weight: bold; font-size: 20px; color: #000; text-align: center;}
#fishingImg>.frame {display: block; width: 120px; height: auto;
    animation: shakeFish 2.5s ease-in-out infinite;
    transform-origin: center center;
}
#fishingImg>.frame>img {display: block; width: 100%; height: 100%; object-fit: contain;}



/* 게임 결과 창 */
#resultGameSec {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; z-index: 10000;}
#resultGameSec>.contBox {padding: 30px; display: none; background-color: #fff; border-radius: 15px;}
#resultGameSec>.contBox>p {margin: 20px 0; font-weight: bold; font-size: 25px; color: #000; text-align: center;}
#resultGameSec>.contBox>button {padding: 10px 20px; display: block; width: 100%; font-weight: bold; font-size: 30px; color: #00203F; background-color: #ADEFD1; border: none; cursor: pointer; border-radius: 5px;}

#resultGameSec>.success>.frame {margin:0 auto; display: block; width: 320px; height: auto;
    animation: fishJumpWiggle 1.5s ease-in-out infinite;
    transform-origin: center center;
}
#resultGameSec>.fail>.frame {margin:0 auto; display: block; width: 200px; height: auto;
    animation: shakeFish 0.8s ease-in-out infinite;
    transform-origin: center center;
}

#resultGameSec>.contBox>.frame>img {display: block; width: 100%; height: 100%; object-fit: contain;}


/* 애니메이션 */
@keyframes shakeFish {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(10deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(7deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes softBounce {
    0%, 100% {transform: translateY(0);}
    30% {transform: translateY(-13px);}
    60% {transform: translateY(0);}
    80% {transform: translateY(-6px);}
}

@keyframes fishJumpWiggle {
    0% {transform: translateY(0) rotate(0deg);}
    12% {transform: translateY(-45px) rotate(12deg);}
    25% {transform: translateY(-80px) rotate(-18deg);}
    38% {transform: translateY(-55px) rotate(15deg);}
    50% {transform: translateY(0) rotate(-10deg);}
    65% {transform: translateY(-25px) rotate(7deg);}
    80% {transform: translateY(0) rotate(-5deg);}
    100% {transform: translateY(0) rotate(0deg);}
}




/* 텐션 게이지 프레임 */
#gaugeWrap {
    display: none;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 26px;
    background: linear-gradient(to right,
    rgb(58, 199, 255) 0%,
    rgb(0, 255, 136) 40%,
    rgb(255, 180, 0) 75%,
    rgb(255, 59, 59) 100%
    );
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(4px);
}

/* ✅ 안정 구간 (60~80%) */
#gaugeSafe {
    position: absolute;
    top: 0;
    left: 60%;
    width: 20%;
    height: 100%;
    background: rgba(255,255,255,0.4);
    border-left: 3.5px solid rgba(0, 0, 0, 0.5);
    border-right: 3.5px solid rgba(0, 0, 0, 0.5);
}

/* 🎯 포인터형 게이지 */
#gaugeFill {
    position: absolute;
    top: 0;
    left: 0%;
    width: 20px;
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    transition: left 0.1s linear;
}



/* 스코어 */
#scoreInfoSec {position: absolute; left: 5px; top: 5px; display: none; width: 250px; height: auto; border-radius: 15px;}
#scoreInfoSec>.totalScore {padding: 15px 10px; display: block; width: 100%; height: auto; background-color: #fff; border-radius: 15px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
#scoreInfoSec>.totalScore>p {font-weight: bold; font-size: 25px; color: #000; text-align: center;}

#storeBtnArea {position: absolute; bottom: 5px; right: 5px; padding: 20px; display: none; background-color: #fff; border-radius: 15px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
#storeBtnArea>p {font-weight: bold; font-size: 22px; color: #000; text-align: center;}
#storeBtnArea>button {margin-top: 25px; padding: 15px; display: none; width: 100%; font-weight: bold; font-size: 22px; color: #02343F; background-color: #F0EDCC; border: none; cursor: pointer; border-radius: 10px;}
#storeBtnArea>button>img {margin-right: 5px; display: inline-block; width: 25px; height: auto; vertical-align: middle;}
#storeBtnArea>button:disabled {
    opacity: 0.3;
    filter: grayscale(40%);
    cursor: not-allowed;
    pointer-events: none;
}

/* 리워드 종료 */
.popupOverlay {display: none; position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); z-index: 100000;}
.popupOverlay>.popupBox {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); padding: 25px; display: block; background-color: #fff; border-radius: 12px;}
.popupOverlay>.popupBox>.frame {margin:0 auto 15px; display: block; width: 200px; height: auto;}
.popupOverlay>.popupBox>.frame>img {display: block; width: 100%; height: 100%;}
.popupOverlay>.popupBox>p {margin-bottom: 15px; font-size: 25px; color: #000; text-align: center;}
.popupOverlay>.popupBox>button {padding: 15px; display: block; width: 100%; font-weight: bold; font-size: 25px; color: #00203F; background-color: #ADEFD1; border: none; cursor: pointer; border-radius: 10px;}



#ExchangeSecPop {position: absolute; top: 8%; left: 54%; padding: 25px; display: none; background-color: #fff; border-radius: 12px; z-index: 1;}
#ExchangeSecPop>p {font-weight: bold; font-size: 22px; color: #000; text-align: center;}
#ExchangeSecPop>p>span {font-size: 28px; color: #e877ae;}
#ExchangeSecPop>p#exchangeErrorMsg {margin-top: 10px; display: none; font-size: 20px; color: #f00;}
#ExchangeSecPop>p#exchangeOkMsg {margin-top: 10px; display: none; font-size: 20px; color: #2db400;}
#ExchangeSecPop>.exchangeBtns {margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#ExchangeSecPop>.exchangeBtns>button {padding: 10px; display: block; width: 48%; font-weight: bold; font-size: 23px; color: #00203F; border: none; cursor: pointer; border-radius: 10px;}
#ExchangeSecPop>.exchangeBtns>#changeCalc {background-color: #ADEFD1;}
#ExchangeSecPop>.exchangeBtns>#onExchangeFn {background-color: #ffb400;}
#ExchangeSecPop>.exchangeBtns>button:disabled {
    opacity: 0.3;
    filter: grayscale(40%);
    cursor: not-allowed;
    pointer-events: none;
}





#moveObjCont {display: block;}
#moveObjCont .frame>img {display: block; width: 100%; height: 100%; object-fit: contain;}

.moveObjCont1 {position: absolute; bottom: 4%; left:0;}
.moveObjCont1>.frame {display: block; width: 80px; height: auto;}
.moveObjCont2 {position: absolute; top: 43%; right:0;}
.moveObjCont2>.frame {display: block; width: 50px; height: auto;}

.moveObjCont3 {position: absolute; top: 45%; left:3%;}
.moveObjCont3>.frame {display: block; width: 100px; height: auto;}


/* 좌측 → 우측으로 천천히 이동 */
.moveObjCont1 {
    animation: moveRight 120s linear infinite;
}

/* 우측 → 좌측으로 천천히 이동 */
.moveObjCont2 {
    animation: moveLeft 600s linear infinite;
}

.moveObjCont3 {
    animation: floatingWave 3.5s ease-in-out infinite;
    transform-origin: center bottom;
}




/* 왼쪽 배 → 오른쪽 끝까지 이동 */
@keyframes moveRight {
    0%   { transform: translateX(0); }
    100% { transform: translateX(1500px); } /* 이동 거리 조절 가능 */
}

/* 오른쪽 배 → 왼쪽 끝까지 이동 */
@keyframes moveLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-1500px); } /* 이동 거리 조절 가능 */
}

@keyframes floatingWave {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-4px) rotate(0.5deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    75% {
        transform: translateY(4px) rotate(-0.5deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}








/*===============================
모든 비디오 오버레이 완전 제거
(Edge / Chrome / Safari / Whale 대응)
================================*/

/* 1) 비디오 컨트롤 기본 제거 */
video::-webkit-media-controls-enclosure {
    display: none !important;
}
video::-webkit-media-controls {
    display: none !important;
}
video::-webkit-media-controls-panel {
    display: none !important;
}

/* 2) Picture-in-Picture 아이콘 제거 */
video::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
}

/* 3) 새 Edge / Chrome 오버레이 버튼 제거 */
video::-internal-media-controls-overlay-cast-button {
    display: none !important;
}

/* 4) 크롬·엣지 overlay controls 완전 차단 */
video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

/* 5) 비디오 요소 클릭 이벤트 자체 차단 (오버레이 완전 방지) */
video {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}