@font-face {
    font-family: 'PixelFont';
    src: url('../font/upheavtt.woff') format('woff'),
         url('../font/upheavtt.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'KoreanYNMYTM';
    src: url('../font/KoreanYNMYTM_Bold.woff') format('woff'),
         url('../font/KoreanYNMYTM_Bold.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

:root {
    /* 1. 기본 상태 (375px 이상) */
    /* PC나 큰 모바일에서는 1rem = 16px로 고정 */
    font-size: 16px; 
}

/* 2. 375px 미만일 때 (아이폰 SE, 구형 폴더폰 등) */
@media (max-width: 374px) {
    :root {
        /* 화면이 줄어들면 폰트 사이즈도 같이 줄어듭니다. */
        /* 계산식: (16px / 375px) * 100 = 4.266...vw */
        /* 즉, 화면이 375px일 때 정확히 16px이 되고, 320px이면 약 13.6px로 줄어듭니다. */
        font-size: 4.2666vw; 
    }
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Noto Sans KR', sans-serif;
    /* 텍스트 선택 및 길게 누르기 완벽 방지 */
    -webkit-touch-callout: none; /* iOS Safari 화면 꾹 누를 때 뜨는 팝업 메뉴 방지 */
    -webkit-user-select: none;   /* iOS Safari 텍스트 드래그 선택 방지 */
    -khtml-user-select: none;    /* 구형 웹킷 브라우저 */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           /* 표준 문법 */
}
input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #111;
    overflow: hidden; /* 스크롤 방지 */
}
html, body small{font-size: 70%;}

body{
    background-color: rgba(0, 0, 0, 0.5);
}
body::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../assets/images/home-bg.png);
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    z-index: -1;
    transform: scale(1.05);
}

#app-container {
    position: relative;
    width: 100%;
    max-width: 30rem; /* 기준 디자인 너비 78rem 대응 */
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #3a413f;
    box-shadow: 0 10px 30px rgb(0 0 0 / 32%);
    font-size: 0;
}

/* =========================================
   Pixel Button Component
   ========================================= */
.pixelbtn {
    /* --- 1. Base Styles (Structure & Typography) --- */
    --pixelbtn-edge-width: 1.18rem;
    all: unset;
    display: block;
    cursor: pointer;
    position: relative;
    width: 100%;
    min-width: 6rem;
    max-width: 8rem;
    margin-inline: var(--pixelbtn-edge-width);
    height: 4rem;
    text-align: center;
    font-family: 'KoreanYNMYTM';
    font-size: 1.25rem;
    font-weight: 100;

    /* --- 2. Dynamic Styles (using CSS Variables) --- */
    color: var(--btn-text-color);
    background-image: var(--btn-body-img);
    background-size: 0.5rem 100%;
    background-repeat: repeat-x;
    background-position: center;
}
.pixelbtn .play-cost{
    bottom: -0.5rem;
}

.pixelbtn::before,
.pixelbtn::after {
    content: '';
    position: absolute;
    top: 0;
    width: var(--pixelbtn-edge-width);
    height: 100%;
    background-image: var(--btn-edge-img);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pixelbtn::before {
    left: calc(-1 * var(--pixelbtn-edge-width));
}

.pixelbtn::after {
    right: calc(-1 * var(--pixelbtn-edge-width));
    transform: scaleX(-1);
}

/* Pressed State */
.pixelbtn:active,
.pixelbtn.pressed {
    color: var(--btn-text-color-pressed);
    background-image: var(--btn-body-pressed-img);
}

.pixelbtn:active::before,
.pixelbtn.pressed::before,
.pixelbtn:active::after,
.pixelbtn.pressed::after {
    background-image: var(--btn-edge-pressed-img);
}

/* --- 3. Color Modifiers (Defines the variables) --- */

/* Primary (Blue) - for main confirmation actions */
.pixelbtn--primary {
    --btn-body-img: url(../assets/images/btn-blue-body.png);
    --btn-edge-img: url(../assets/images/btn-blue-edge.png);
    --btn-body-pressed-img: url(../assets/images/btn-blue-body_pressed.png);
    --btn-edge-pressed-img: url(../assets/images/btn-blue-edge_pressed.png);
    --btn-text-color: #d4fff9; /* A light blueish white */
    --btn-text-color-pressed: rgba(0, 0, 0, 0.6);
}

/* Danger (Red) - for destructive actions like logout, delete */
.pixelbtn--danger {
    --btn-body-img: url(../assets/images/btn-red-body.png);
    --btn-edge-img: url(../assets/images/btn-red-edge.png);
    --btn-body-pressed-img: url(../assets/images/btn-red-body_pressed.png);
    --btn-edge-pressed-img: url(../assets/images/btn-red-edge_pressed.png);
    --btn-text-color: #fbed80; /* Original color */
    --btn-text-color-pressed: rgba(0, 0, 0, 0.6);
}

/* Neutral (Gray) - for secondary actions like cancel */
.pixelbtn--neutral {
    --btn-body-img: url(../assets/images/btn-gray-body.png);
    --btn-edge-img: url(../assets/images/btn-gray-edge.png);
    --btn-body-pressed-img: url(../assets/images/btn-gray-body_pressed.png);
    --btn-edge-pressed-img: url(../assets/images/btn-gray-edge_pressed.png);
    --btn-text-color: #5c5c5c; /* A light gray */
    --btn-text-color-pressed: rgba(0, 0, 0, 0.6);
}
.pixelbtn--accent  {
    --btn-body-img: url(../assets/images/btn-coral-body.png);
    --btn-edge-img: url(../assets/images/btn-coral-edge.png);
    --btn-body-pressed-img: url(../assets/images/btn-coral-body_pressed.png);
    --btn-edge-pressed-img: url(../assets/images/btn-coral-edge_pressed.png);
    --btn-text-color: #fff7df; /* A light gray */
    --btn-text-color-pressed: rgba(0, 0, 0, 0.6);
}
.pixelbtn--warning  {
    --btn-body-img: url(../assets/images/btn-gold-body.png);
    --btn-edge-img: url(../assets/images/btn-gold-edge.png);
    --btn-body-pressed-img: url(../assets/images/btn-gold-body_pressed.png);
    --btn-edge-pressed-img: url(../assets/images/btn-gold-edge_pressed.png);
    --btn-text-color: #7d5105; /* A light gray */
    --btn-text-color-pressed: rgba(0, 0, 0, 0.6);
}
.pixelbtn--safety {
    --btn-body-img: url(../assets/images/btn-green-body.png);
    --btn-edge-img: url(../assets/images/btn-green-edge.png);
    --btn-body-pressed-img: url(../assets/images/btn-green-body_pressed.png);
    --btn-edge-pressed-img: url(../assets/images/btn-green-edge_pressed.png);
    --btn-text-color: #173d10; /* A light gray */
    --btn-text-color-pressed: rgba(0, 0, 0, 0.6);
}

/* =========================================
   1. 게임 영역 & UI 오버레이
   ========================================= */
#game-container {
    width: 100%;
    aspect-ratio: 1248 / 880; 
    background-color: transparent;
    position: relative;
    container-type: inline-size; /* 폰트 반응형 크기 조절용 */
}

#gameCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* HUD (점수판) */
.game-hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 3% 3%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    pointer-events: none;
    z-index: 10;
}

.hud-score, .hud-rank, .hud-level {
    font-family: 'PixelFont', sans-serif;
    font-size: 7.05cqw; 
    line-height: 1;
}

.hud-level {
    margin: 0.5rem 0.5rem 0 0;
    padding: 0.25rem 0.5rem;
    border-radius: 4rem;
    color: #ffffff;
    font-size: 0.75rem;
    background: black;
}

.hud-score {
    color: #ffffff;
    text-shadow: -0.125rem 0 #000000, 0 0.125rem #000000, 0.125rem 0 #000000, 0 -0.125rem #000000;
    display: flex;
    align-items: baseline;
}

.score-val {
    font-family: 'PixelFont', sans-serif;
    font-size: 9.05cqw;
}

.hud-score small { font-size: 0.5em; margin-left: 0.3rem; }

.hud-rank {
    color: #000000;
}

/* [신규] 공통 UI 아이콘 버튼 (멤버, 사운드, 일시정지 등) */
.ui-icon-btn {
    position: absolute;
    top: 1rem;
    display: block;
    background-color: transparent;
    border: none;
    padding: 0;
    width: 8cqw; /* 컨테이너 너비의 8%로 크기 통일 */
    max-width: 3rem;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 20;
}

/* --- 수식어(Modifier) 클래스 --- */

/* 멤버 버튼 */
.ui-icon-btn.--member {
    left: 4cqw;
    background-image: url('../assets/images/icon_member.png');
}

/* 사운드 버튼 */
.ui-icon-btn.--effect {
    right: 4cqw;
}
.ui-icon-btn.--effect.effect-on { background-image: url('../assets/images/icon_sound_on.png'); }
.ui-icon-btn.--effect.effect-off { background-image: url('../assets/images/icon_sound_off.png'); }

.ui-icon-btn.--bgm {
    right: 13cqw;
}
.ui-icon-btn.--bgm.bgm-on { background-image: url('../assets/images/icon_bgm_on.png'); }
.ui-icon-btn.--bgm.bgm-off { background-image: url('../assets/images/icon_bgm_off.png'); }

/* 일시정지 버튼 */
.ui-icon-btn.--pause {
    right: 22cqw; /* 사운드 버튼 왼쪽에 위치 */
    background-image: url('../assets/images/icon_pause.png');
}
/* (참고) 일시정지 토글 기능 구현 시 사용할 수 있는 스타일 */
.ui-icon-btn.--pause.paused { background-image: url('../assets/images/icon_play.png'); }

/* =========================================
   2. 게임시작 & 게임 오버 화면
   ========================================= */
.game-overlay-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    background: linear-gradient(#283a48, #00000047);
    background: linear-gradient(#283a48, #2b3e4dcf, #00000047);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    color: white;
    z-index: 110; /* 컨트롤러(100)보다 위에 배치 */
    /* 등장/퇴장 애니메이션 */
    opacity: 1;
    transition: none;
    pointer-events: auto; /* 클릭 가능 */
}

.game-overlay-screen.hidden {
    display: flex !important; 
    opacity: 0;
    pointer-events: none; /* 숨겨지면 클릭 불가 */
    visibility: hidden; /* 완전히 숨김 처리하여 렌더링 최적화 */
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.game-overlay-screen h1 {
    font-size: 3.75rem;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
    color: #beff25;
    font-family: 'PixelFont', sans-serif;
    text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}

.game-overlay-screen h1 span{
    box-sizing: border-box;
    display: inline-block;
    width: 2.75rem;
    padding-left: 0.5rem;
    font-family: inherit;
    text-align: center;
}

.game-overlay-screen .message {
    font-size: 0.85rem;
    text-shadow: 0 0 2px black;    
}
.game-overlay-screen .time-message{
    border-radius: 2rem;
    border: solid 0.125rem #b43e3f;
    padding: 0.25rem 0.75rem 0.35rem 2rem;
    background-color: #c4393a;
    background-image: url(../assets/images/ico128-timmer.png);
    background-size: 0.875rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 0.45rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: white;
    font-size: 0.875rem;
}
.game-overlay-screen .btn-group{
    display: flex;
    gap: 2%;
}

#btn-restart {
    /* [필수 추가] 내용물이 없어도 박스 형태를 유지하도록 설정 */
    position: relative;
    display: block; 
    background-color: transparent;
    border: none;
    padding: 0;
    /* 너비와 비율 설정 */
    /*race start 버튼이 50% 일때*/
    /* width: 46.7%; */
    /*race start 버튼이 60% 일때*/
    width: 56.2%;
    aspect-ratio: 752 / 256; 
    /* 이미지 경로 (폴더 구조 확인 필수!) */
    /* style.css 파일이 'style' 폴더 안에 있다면 '..'로 밖으로 나가야 함 */
    background-image: url('../assets/images/btn-tryagain.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    
    /* [테스트용] 이미지가 안 나와도 버튼 위치가 어딘지 보이게 잠시 추가하세요 */
    /* border: 2px solid red; */
}

#btn-restart:active,
#btn-restart.pressed { 
    background-image: url('../assets/images/btn-tryagain_pressed.png');
    transform: none;
}

/* [수정] 모든 'HOME으로 가기' 버튼에 공통 스타일 적용 */
.btn-exit-to-home {
    all: unset;
    position: absolute;
    top: 1rem;
    left: 0.75rem;
    border-radius: 2rem;
    border: solid 0.125rem #2e4b5f;
    padding: 0.25rem 0.75rem 0.35rem 2rem;
    background-color: #244155;
    background-image: url(../assets/images/ico128-home.png);
    background-size: 0.875rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 0.45rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: white;
    font-size: 0.875rem;
}
.btn-close-to-home {
    all: unset;
    position: absolute;
    top: 1rem;
    left: 0.75rem;
    border-radius: 2rem;
    border: solid 0.125rem #3c1f23;
    padding: 0.25rem 0.75rem 0.35rem 1.5rem;
    background-color: #f4ba59;
    background-image: url(../assets/images/ico128-close-color.png);
    background-size: 0.65rem;
    background-repeat: no-repeat;
    background-position: 0.65rem 0.55rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: #621a1c;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: inset 0px 2px 0px 0px #f4e67d;
}
.btn-delete-from-list {
    all: unset;
    border-radius: 2rem;
    border: solid 0.125rem #ae2e45;
    padding: 0.25rem 0.75rem 0.35rem 2rem;
    background-color: #e4463b;
    background-image: url(../assets/images/ico128-trashcan.png);
    background-size: 0.875rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 0.45rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: white;
    font-size: 0.875rem;
}
.coin-stat {
    all: unset;
    position: absolute;
    top: 3.5cqw;
    right: 4cqw;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
    font-size: 1rem;
}
.coin-stat img{
    width: 2.25rem;
}


/* =========================================
   3. 컨트롤 영역 (핵심 수정됨)
   ========================================= */
#control-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* 비율 유지 */
    aspect-ratio: 78 / 20; 
    
    background: url('../assets/images/control_frame.png') no-repeat top/cover;
    z-index: 100;
    
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* 배경 클릭 통과 */

    /* [✨ 핵심] 부드러운 퇴장 애니메이션 */
    transition: transform 0.5s ease-in-out;
}

/* [✨ 핵심] JS가 slide-out 클래스를 붙이면 아래로 내려감 */
#control-container.slide-out {
    transform: translateY(200%); 
}

.control-frame {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25%;
}

.game-btn {
    pointer-events: auto; /* 버튼만 클릭 가능 */
    width: 43.59%; 
    aspect-ratio: 34 / 17;
    
    position: relative;
    top: -0.25rem;
    background-color: transparent;
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 버튼 이미지 설정 */
#btn-boost { background-image: url('../assets/images/btn-boost.png'); }
#btn-jump { background-image: url('../assets/images/btn-jump.png'); }

/* 눌림 효과 (CSS active + JS pressed 클래스 공용) */
.game-btn:active,
.game-btn.pressed {
    transform: scale(0.95);
}

#btn-boost:active, #btn-boost.pressed { 
    background-image: url('../assets/images/btn-boost_pressed.png'); 
}

#btn-jump:active, #btn-jump.pressed { 
    background-image: url('../assets/images/btn-jump_pressed.png'); 
}

/* =========================================
   4. 목록 영역
   ========================================= */
/* [신규] 로비의 목록 컨테이너가 남은 공간을 모두 차지하고, 내부 스크롤이 가능하도록 설정합니다. */
#lobby-list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #3a413f;
    position: relative;
    /* [신규] 컨트롤러 높이에 맞춰 부드럽게 여백이 변경되도록 transition 추가 */
    transition: margin-bottom 0.5s ease-in-out;
    z-index: 10;
}

/* [신규] 게임 내 랭킹/기록 뷰가 부모(#list-container)의 전체 영역을 차지하도록 설정합니다. */
#view-multi-rank,
#view-single-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #3a413f;
}
.list-tabgroup{
    display: flex;
    flex-direction: row;
    border-top: solid 0.125rem #4d5351;
}
.list-tabgroup .tab{
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    flex-grow: 1;
    opacity: 0.4;
    cursor: pointer;
    user-select: none; /* 텍스트 드래그 방지 */
    background-color: #181b1a;
}
.list-tabgroup .tab.active{
    opacity: 1;
    background-color: #3a413f;
}
.list-tabgroup .tab .icon{
    width: 1.5rem;
    height: 1.5rem;
}
.list-tabgroup .tab .refresh{
    all: unset;
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    font-size: 0;
    background-image: url(../assets/images/ico128-refresh.png);
    background-size: cover;
    display: none; /* [신규] 기본적으로 숨김 */
    cursor: pointer; /* [신규] 클릭 가능하도록 커서 변경 */
}

/* [신규] 활성화된 탭의 새로고침 버튼만 표시 */
.list-tabgroup .tab.active .refresh {
    display: block;
}

.list-tabgroup .tab h3{
    margin: 0;
    padding: 0; 
    font-size: 1rem;
    font-weight: 100;
    color: #fff;
}
.list-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-top: solid 0.125rem #4d5351;
}
.list-title .icon{
    width: 1.5rem;
    height: auto;
}
.list-title h3{
    margin: 0;
    padding: 0; 
    font-size: 1rem;
    font-weight: 100;
    color: #fff;
}
.list-title span {
    font-size: 0.8rem;
    color: #bbb;
}

.list-scroll-area {
    flex: 1;
    overflow-y: auto;
}

/*
   [수정] 컨트롤러가 올라왔을 때 목록이 가려지지 않도록 여백 확보.
   - list-scroll-area에 padding을 주면 스크롤바가 가려지므로,
   - 부모인 list-container에 margin-bottom을 주어 컨테이너 자체의 높이를 줄입니다.
   - 이렇게 하면 스크롤바가 잘리지 않고 전체가 위로 올라갑니다.
*/
#scene-game:not(.controls-hidden) #list-container {
    margin-bottom: 26%;
}
.score-list li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    font-size: 1rem;
    color: #eee;
    border-top: 0.125rem solid #3e4644;
    border-bottom: 0.125rem solid #2d3332;
    list-style: none;
    text-align: left;
    background-color: #363d3b;
    cursor: pointer;
}

.score-list li.notice {
    justify-content: center;
    color: #939393;
    text-align: center;
    font-size: 0.9rem;
    padding: 1rem;
    border-bottom: 0.125rem solid #383838;
    background: #3a413f;
    cursor: default;
}

.score-list li:first-child {
    border-top: none;
}

.score-list li.disabled {
    cursor: not-allowed;
}

/* [신규] 입장 불가(마감) 방의 입장 버튼(chevron) 투명도 조절 */
.score-list li.disabled .stat .chevron {
    opacity: 0.1;
}

/* [신규] 레이스룸 목록에서 이미 참가한 방의 정보 영역을 흐리게 표시 */
.score-list li.already-joined .info {
    opacity: 0.4;
}

.score-list li.top {
    position: sticky;
    top: -1px;
    z-index: 10;;
    background-color: #3a413f;
}
.score-list li .info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-grow: 1;
}
.score-list li .info p.score-display {
    font-size: 1.25rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}


/* [신규] 디버깅용 임시 버튼 스타일 */
.debug-btn {
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.25rem;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.25rem;
    padding: 0;
}

.score-list li .info label {
    display: flex;
    align-items: center;
}
.score-list li .info label img.coin{
    width: 1.25rem;
}
.score-list li .info label img.agg{
    width: 1rem;
}
.score-list li .info label span{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    color: #000;
    background-color: #bdc3ca;
}
.score-list li .info label span.inprogress { color: #fff; background-color: #4e85c6; }
.score-list li .info label span.finished { color: #fff; background-color: #c64e4f; }

/* [신규] '참가중' 탭의 '진행중' 상태에 대한 별도 스타일 */
#content-my-rooms .score-list li .info label span.inprogress {
    color: #000000;
    background-color: #b1ee22;
}

.score-list li .info label span.game_info { color: #fff; background-color: transparent; padding: 0; }

.score-list li .stat{
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.score-list li .stat .chevron{
    width: 1.5rem;
    opacity: 0.5;
}
.score-list li img{
    width: 100%;
}
.score-list li img.lock{
    width: 1.75rem;
}
.score-list li img.top{
    width: 1.75rem;
}
.score-list li .more{
    font-size: 0.75rem;
    opacity: 0.75;
    text-align: right;
}
.score-list li .character{
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: #666666;
    display: flex;
    position: relative; /* [신규] 방장 아이콘 위치 기준점 */
}
.score-list li .character img{
    width: 100%;
    position: relative;
    bottom: -8px;
}
.score-list li .character img.master-key-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
}
.score-list li .character.active{
    background-color: #ffffff;
}
.score-list li .character.dead{
    background-color: #c6534e;
}
.score-list li .character.me{
    background-color: #ffd02d;
}

/* [신규] 멀티플레이 랭킹 방장 표시 아이콘 */

/* =========================================
   5. [신규] 씬(Scene) 관리 및 유틸리티
   ========================================= */
.hidden {
    display: none !important;
}

/* 각 장면은 화면 전체를 덮음 */
#scene-intro, #scene-game {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.home{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    aspect-ratio: 1248 / 880;
    position: relative;
    container-type: inline-size;
    background-image: url(../assets/images/home-bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: #0580b9;
}
.home .game_title{
    max-width: 14rem;
}
.home .btn_group {
    display: flex;
    flex-direction: row; /* 가로로 나란히 */
    justify-content: center;
    align-items: center;
    gap: 2%; /* 버튼 사이의 간격 */
    width: 100%;
}

/* 메인 버튼 공통 (528:240 비율 유지) */
.home-main-btn {
    display: block;
    background-color: transparent;
    border: none;
    padding: 0;
    width: 35%; 
    aspect-ratio: 528 / 240;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* --- 싱글플레이 버튼 --- */
#btn-login-single {
    background-image: url('../assets/images/btn-single.png');
}
#btn-login-single:active,
#btn-login-single.pressed {
    background-image: url('../assets/images/btn-single_pressed.png');
}

/* --- 방 만들기 버튼 --- */
#btn-create-room-open {
    background-image: url('../assets/images/btn-create.png');
}
#btn-create-room-open:active,
#btn-create-room-open.pressed {
    background-image: url('../assets/images/btn-create_pressed.png');
}

/* 준비화면의 시작 버튼 (기존 btn-race-start) */
#btn-race-start,
#btn-resume-game {
    position: relative;
    display: block;
    background-color: transparent;
    border: none;
    width: 60%;
    aspect-ratio: 528 / 168;
    background-image: url('../assets/images/btn-racestart.png'); /* 시작 버튼 이미지 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.play-cost {
    color: black;
    background: white;
    border-radius: 5rem;
    padding: 0rem 0.25rem;
    position: absolute;
    top: auto;
    bottom: -0.15rem;
    right: 50%;
    margin-right: -1.3125rem;
    /* right: auto; */
    display: inline-block;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    border: solid 3px black;
}

.play-cost img {
    width: 1rem !important;
}

/* 오버레이가 사라질 때 코인 표시가 위로 올라가는 애니메이션 */
.game-overlay-screen.hidden .play-cost {
    bottom: -1.5rem;
    transition: bottom 0.5s ease;
}

#btn-race-start:active,
#btn-resume-game:active {
    transform: scale(0.95);
    background-image: url('../assets/images/btn-racestart_pressed.png');
}

#scene-create-room,
#scene-auth,
#scene-user-profile,
#scene-password-input,
#scene-exit-confirm,
#scene-delete-room-confirm,
#scene-coin-shortage {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    
    /* 💡 핵심: 가로/세로 배치를 바꾸어 가상 요소가 밀어주도록 만듭니다 */
    display: flex; 
    flex-direction: column; 
    align-items: center; /* 가로 중앙 정렬 */
    overflow-y: auto;
    z-index: 200;
}

#scene-create-room::before, #scene-create-room::after,
#scene-auth::before, #scene-auth::after,
#scene-user-profile::before, #scene-user-profile::after,
#scene-password-input::before, #scene-password-input::after,
#scene-exit-confirm::before, #scene-exit-confirm::after,
#scene-delete-room-confirm::before, #scene-delete-room-confirm::after,
#scene-coin-shortage::before, #scene-coin-shortage::after {
    content: '';
    flex: 1 1 auto;
}

/* 공통 모달 컨테이너 스타일 */
.modal-container {
    width: 100%;
    max-width: 22rem;
    background-color: #97cbe6;
    border: 0.25rem solid #e3f1f9;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
        flex-shrink: 0; /* 키보드가 올라와도 모달이 찌그러지지 않게 방어 */
    margin: 2rem 0; /* 키보드가 꽉 찼을 때 위아래 최소 2rem 여백 보장 */
}

/* 주황색 테마 모달 (방 만들기, 비밀번호 입력 등) */
.modal-container.modal-theme-orange {
    background-color: #efaf6f;
    border-color: #ffefdd;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.32);
}

.modal-header h3 { font-family: 'KoreanYNMYTM'; font-size: 1rem; font-weight: 100; color: rgba(0, 0, 0, 0.6); text-align: left; margin: 0; padding: 0; }
.modal-header button.close_modal {
    all: unset;
    width: 1rem;
    height: 1rem;
    font-size: 0;
    background: url(../assets/images/ico128-close.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    filter: brightness(0.2);
}

.modal-body { 
    display: flex; 
    flex-flow: column; 
    gap: 1rem; 
    padding: 1.5rem 1rem; 
    background-color: #71aac6; 
}

.modal-body .coin {
    width: 3rem;
    margin: auto;
}

.modal-body small { 
    font-size: 80%;
    color: #ad0000;
}

/* 주황색 테마 모달의 body 전용 색상 */
.modal-container.modal-theme-orange .modal-body {
    background-color: #df9a59;
}
.input-group { display: flex; flex-flow: column; gap: 0.5rem; }
.input-group.row { display: flex; flex-flow: row; align-items: center; gap: 0.5rem; }

.input-group.row .coin-count{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    flex: 1;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-family: 'KoreanYNMYTM';
    font-weight: 100;
    text-align: right;
}
.input-group.row .coin-count img{ width: 2.5rem;}

.input-group label{ display: flex; align-items: center; font-size: 1rem; font-family: 'KoreanYNMYTM'; font-weight: 100; color: rgba(0, 0, 0, 0.5);}
.input-group label span{ font-weight: bold;}
.input-group label span.coin-count{
    display: flex;
    align-items: center;
}
.input-group label span.coin-count img{
    width: 1.5rem; 
}
.input-group span.notice{
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    letter-spacing: -0.5px;
    color: #791919;
}
.input-group span.notice img.agg{
    width: 1rem;
}

.input-group input[type="text"], .input-group input[type="tel"], .input-group input[type="password"], .input-group select {
    width: 100%; padding: 0.75rem; border: none; color: #000000; font-size: 1rem;}

/* [수정] 주황색 테마 모달의 Range Input 커스텀 스타일 */
.modal-theme-orange .input-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.5rem; /* 핸들 높이에 맞춰 세로 영역 확보 */
    background: transparent;
    cursor: pointer;
}

/* Range Track (슬라이더 바) 스타일 */
.modal-theme-orange .input-group input[type="range"]::-webkit-slider-runnable-track {
    height: 0.75rem;
    background: #a46e3a;
    background: linear-gradient(to right, #f1625c var(--progress-percent, 0%), #a46e3a var(--progress-percent, 0%));
    border: 2px solid #754f29;
}
.modal-theme-orange .input-group input[type="range"]::-moz-range-track {
    height: 0.75rem;
    background: #a46e3a;
    background: linear-gradient(to right, #f1625c var(--progress-percent, 0%), #a46e3a var(--progress-percent, 0%));
    border: 2px solid #754f29;
}

/* Range Thumb (핸들) 스타일 - 픽셀 느낌을 위해 사각형으로 */
.modal-theme-orange .input-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -0.375rem; /* (트랙 높이 - 핸들 높이) / 2 로 중앙 정렬 */
    width: 1.75rem;
    height: 1.75rem;
    position: relative;
    top: -0.25rem;
    background: #FFFFFF;
    border: 2px solid #754f29;
    border-radius: 0;
}
.modal-theme-orange .input-group input[type="range"]::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    top: -0.25rem;
    background: #FFFFFF;
    border-radius: 50%;
    border: 2px solid #754f29;
    border-radius: 0; /* Firefox에서 사각형 핸들을 위해 */
}

/* 시도 횟수 토글 버튼 */
.btn-group-toggle { display: flex; gap: 0.5rem; }
.btn-group-toggle button { flex: 1; padding: 0.75rem; background: #ffffff; border: solid 2px #754f29; color: #2d3332; cursor: pointer; filter: brightness(0.5); opacity: 0.5; }
.btn-group-toggle button.active { font-weight: bold; filter: brightness(1); opacity: 1;}

.modal-footer { 
    display: flex; 
    justify-content: center; 
    gap: 0.75rem; 
    padding: 0.75rem;
}
.modal-footer-links {
    display: flex;
    justify-content: space-evenly;
    padding: 0.5rem;
    font-size: 0.8rem;
    background: #0000005c;
}
.modal-footer-links a{
    color: #e9e9e9;
    text-decoration: none;
    border: solid;
    border-width: 0 0 1px 0;
}
#scene-exit-confirm .modal-body {
    justify-content: center;
    align-items: center;
}

/* [신규] 회원가입/로그인 모달 메시지 */
.auth-message {
    display: none; /* 기본적으로 숨김 처리하여 여백 제거 */
    color: #a7001f;
    font-size: 0.875rem;
    text-align: center;
}
.auth-message::before {
    content: '※';
}

.modal-notice {
    color: #000;
    font-size: 1rem;
    text-align: center;
}
.modal-notice::before { content: '※ '; }

.sns-login-group {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.sns-btn {
    display: flex;
    flex: 1; /* auto에서 1로 변경하여 균등 배분 */
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0.75rem;
    border: 0 solid white;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 100;
    /* 부드러운 변신을 위한 transition */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    min-width: 120px;
}
.sns-login-group:has(.hide) {
    gap: 0;
}

/* [애니메이션] 클릭되지 않은 버튼이 사라질 때 */
.sns-btn.hide {
    opacity: 0;
    pointer-events: none;
    flex: 0;
    width: 0;
    min-width: 0 !important; /* 최소 너비 무시 */
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* gap이 사라지는 속도와 버튼이 줄어드는 속도를 맞춥니다 */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* [아이콘] 공통 스타일 */
.sns-btn::before {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.4s ease; /* 아이콘 크기 변화 애니메이션 */
}

.sns-btn.google { background-color: #FFFFFF; color: #191919; }
.sns-btn.google::before { background-image: url(../assets/images/sns-google.png); }

.sns-btn.apple { background-color: #000000; color: #fff; }
.sns-btn.apple::before { background-image: url(../assets/images/sns-ios.png); }

/* 내부 텍스트 스타일 */
.btn-text {
    text-align: center;
    line-height: 1.3;
}
.btn-text span {
    display: block;
    font-size: 0.8rem;
    font-weight: normal;
    margin-top: 5px;
    opacity: 0.8;
}

/* 내부 취소/다시시도 버튼 그룹 */
.inner-btn-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    opacity: 1;
    transition: opacity 0.3s;
}

.inner-btn-group.hidden {
    display: none !important;
    opacity: 0;
}

.inner-btn-group button {
    all: unset;
    min-width: 4rem;
    color: black;
    padding: 0.4rem 0.6rem;
    border: solid 1px #cecece;
    background: #f5f5f5;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    pointer-events: auto; 
    cursor: pointer;
}

.inner-btn-group button:active {
    background: #e0e0e0;
}

.sns-btn.google { background-color: #FFFFFF; color: #191919; }
.sns-btn.google::before { background-image: url(../assets/images/sns-google.png); }

.sns-btn.apple { background-color: #000000; color: #fff; }
.sns-btn.apple::before { background-image: url(../assets/images/sns-ios.png); }

.sns-btn .inner-btn-group button {
    all: unset;
    min-width: 4rem;
    color: black;
    padding: 0.25rem 0.5rem;
    border: solid 1px #cecece;
    text-align: center;
    background: #f5f5f5;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
}

/* [신규] 사용자 정보 모달 */
.input-group input[readonly] {
    background-color: #5a7a8a;
    color: #c0ddee;
    cursor: not-allowed;
}
.badge-display {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
}
.badge-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgb(0 0 0 / 22%);
}
.badge-item img {
    width: 3.5rem;
    height: 3.5rem;
}
.badge-item span {
    font-size: 1.2rem;
    font-family: 'KoreanYNMYTM';
    font-weight: 100;
    color: white;
    text-shadow: 1px 1px 0 #000;
}
.badge-item .btn-exchange{
    all: unset;
    font-size: 0.7rem;
    background-color: #f1625c;
    padding: 0.2rem 0.5rem 0.35rem 0.5rem;
    border-radius: 0.25rem;
    border: solid 1px #9d3e3f;
    color: #ffffff;
    font-weight: 600;
}
.btn-exchange:disabled {
    background-color: #9f6967;
    border: solid 1px #9c5b5b;
    color: #b4b4b4;
    cursor: not-allowed;      /* 금지 표시 커서 */
}

/* [신규] 프로필 모달 내 코인 충전 버튼 스타일 */
.input-group.row .coin-count button {
    all: unset;
    box-sizing: border-box;
    font-family: 'KoreanYNMYTM';
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    background: #f1625c;
    border: 2px solid #754f29;
    border-radius: 0.5rem;
    color: white;
    cursor: pointer;
}
.input-group.row .coin-count button:active {
    background: #a46e3a;
}

/* 부스트 단계별 점수 색상 */
.hud-score.green  { color: #77f17c; }
.hud-score.yellow { color: #FFC107; }
.hud-score.orange { color: #FF9800; }
.hud-score.red    { color: #ff6e64; }

.finished-label {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    background: #f44336;
    color: white;
    border-radius: 0.25rem;
}

/* [신규] 광고 시청 시뮬레이션 오버레이 */
#scene-ad-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* 배경을 더 어둡게 */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    z-index: 300; 
    color: white; 
    gap: 1rem;
}

/* [수정] 광고 로딩/완료 뷰의 공통 스타일 */
.ad-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    gap: 1rem;
}

#scene-ad-overlay .spinner {
    width: 3rem; height: 3rem;
    border: 0.3rem solid #fff; border-top: 0.3rem solid #f1625c; border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* [신규] 광고 진행 UI (상단 바) */
.ad-ui-container {
    position: absolute; top: 0; left: 0; width: 100%;
    padding: 0; display: flex; align-items: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
}
.ad-progress-bar-wrapper {
    flex-grow: 1; height: 0.5rem; background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0,0,0,0.5); border-radius: 0.25rem; overflow: hidden;
}
#ad-progress-bar {
    width: 0%; height: 100%; background-color: #ffd02d; transition: width 0.1s linear;
}

/* [수정] 광고 닫기(포기) 버튼 - 상단 우측 */
#btn-ad-close-video {
    all: unset; position: absolute; top: 1.25rem; right: 1rem;
    padding: 0.5rem 0.75rem; background-color: rgba(0, 0, 0, 0.6);
    color: #ccc; border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.25rem; font-size: 0.8rem; cursor: pointer; z-index: 310;
}
#btn-ad-close-video:active { background-color: rgba(255, 255, 255, 0.2); }