:root { --bg: #000; color-scheme: dark; }

/* ★ 게임 컨테이너: body 대신 .game_wrap 기준으로 전체 레이아웃 구성 */
.kiosk .game_wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--bg);
    overscroll-behavior: none;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.kiosk .game_wrap canvas {
    position: absolute; top: 0; left: 0;
    display: block; touch-action: none; outline: none;
}

/* ★ 팝업이 상단 HUD(홈·공유 버튼)와 겹치지 않도록 확보하는 여백
   = HUD 위 여백(16px) + 버튼 높이(72px) + 버튼과 팝업 사이 간격(16px) */
:root {
    --hud_safe_top: calc(16px + 72px + 16px);
    --popup_safe_bottom: 24px;
}

#hudBox { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; max-width: 576px; margin: 0 auto; }
.hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 16px 5% 0;
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: #fff; font-variant-numeric: tabular-nums;
}

/* ★ 상단 줄: 홈(좌) · 시간(가운데) · 다시하기(우) */
.hud .hud_top {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;            /* 시간 텍스트를 버튼 아이콘 세로 중앙에 맞춤 */
}
.hud .hud_btn {
    pointer-events: auto;           /* #hudBox가 pointer-events:none 이라 버튼만 클릭 허용 */
    width: var(--hud_btn_size, 72px); aspect-ratio: 1;
    padding: 0; border: none; border-radius: 50%;
    background: no-repeat center / contain;
    cursor: pointer;
    transition: transform .08s;
}
.hud .hud_btn:active { transform: scale(.92); }
.hud .btn_home  { box-shadow: 0 0 18px #9AD0FF; background-image: url(/img/kiosk/btn_home.png); }
.hud .btn_retry { box-shadow: 0 0 18px #9AD0FF; background-image: url(/img/kiosk/btn_retry.png); }

.hud .time_box {text-align: center;}
.hud .time_box > span { font-size: clamp(22px, 5vh, 30px); color: #FFF; font-family: "Noto Sans CJK KR", sans-serif; font-size: 30px; font-weight: 700; line-height: 150%; text-transform: uppercase; }

/* ★ 하트(목숨) */
.hud .hearts { display: flex; gap: 6px; margin-top: 0px; }
.hud .heart {
    width: 28px;
    aspect-ratio: 96/90;
    background: url(/img/kiosk/heart_on.png) no-repeat center / contain;
    filter: drop-shadow(0 0 20px #9AD0FF);
}
.hud .heart.is_empty { background-image: url(/img/kiosk/heart_off.png); }

/* ★ 다시하기 전환: 시간·하트만 페이드 (JS RESET_FADE_MS와 맞춤) */
.hud .time_box, .hud .hearts { transition: opacity .4s ease; }
#hudBox.is_resetting .time_box,
#hudBox.is_resetting .hearts { opacity: 0; }

/* ★ 하트가 줄어들 때: 커졌다가 깜빡인 뒤 빈 하트로 (길이는 JS HEART_BLINK_MS와 맞춤) */
.hud .heart.is_losing { animation: heart_blink .9s ease-in-out; }
@keyframes heart_blink {
    0%   { transform: scale(1);    opacity: 1; }
    12%  { transform: scale(1.35); opacity: 1; }
    25%  { transform: scale(1.1);  opacity: .15; }
    40%  { transform: scale(1);    opacity: 1; }
    55%  { opacity: .15; }
    70%  { opacity: 1; }
    85%  { opacity: .15; }
    100% { transform: scale(1);    opacity: 1; }
}

.pad {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4%;
    display: flex;
    justify-content: center;
    column-gap: 10%;
    padding: 0 9%;
    pointer-events: none;
}
.pad button {
    pointer-events: auto;
    width: clamp(80px, 14dvh, 120px);
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 30px 0 #9AD0FF;

    cursor: pointer;
    touch-action: none;
    padding: 0;
    transition: transform .08s;
}
.pad button#btnL {background: url(/img/kiosk/btn_left.png) no-repeat center / contain;}
.pad button#btnR {background: url(/img/kiosk/btn_right.png) no-repeat center / contain;}

.pad button.on {
  
    transform: scale(.94);
}

#loading {
    position: absolute;
    inset: 0;
    background: #10161d;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}
#loading .loading_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#loading .logo_wrapper {
    position: relative;
    width: 55px;
    height: auto;
}
#loading .logo_wrapper > img {
    display: block;
    width: 100%;
}
#loading .loading_circle {
    display: block;
    width: 50px;
}
#loading .error_message {
    display: none;
    margin-top: 30px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
}
#loading .error_message p { margin: 0; }

/* ★ 로딩 실패 상태 */
#loading.is_error .loading_circle { display: none; }
#loading.is_error .error_message { display: block; }
#loading.is_error .logo_wrapper { animation: infinite_pulse 2s ease-in-out infinite; }
@keyframes infinite_pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ★ 게임 시작 화면 */
#startScreen {
    display: none; position: absolute; inset: 0; z-index: 25;
    flex-direction: column; align-items: center; justify-content: space-between;
    padding: 6dvh 20px 4dvh; box-sizing: border-box;
    /* background: linear-gradient(180deg, rgba(8, 16, 28, 0.55) 0%, rgba(8, 16, 28, 0.25) 45%, rgba(8, 16, 28, 0.7) 100%); */
}
/* 홈으로 돌아올 때 시작 화면이 서서히 나타남 */
#startScreen { animation: start_fade_in .4s ease; }
@keyframes start_fade_in { from { opacity: 0; } to { opacity: 1; } }
#startScreen .start_logo {
    width: 136px; aspect-ratio: 68/13; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
#startScreen .start_char {
    width: 300px; aspect-ratio: 83/78;
    max-width: 80vw; max-height: 45dvh;   /* 작은 화면 대응 */
  
    display: flex; align-items: center; justify-content: center;
}
#startScreen img { width: 100%; height: 100%; object-fit: contain; display: block; }
#startTxt {
    flex-shrink: 0;
    width: 100%;
    max-width: 341px;
    transition: transform .1s, background .1s;
}
#startBtn {
    flex-shrink: 0;
    width: 100%;
    max-width: 375px;
    border: none;
    border-radius: 100px;
    background: #142446;
    padding: 22px 0;
    cursor: pointer;
    transition: transform .1s, background .1s;
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}
#startBtn:active { transform: scale(0.95); background: #142446; }

/* ★ 시작 화면 등장 애니메이션
   로고 → 문구 → 캐릭터 → 버튼 순서로 나타남 (시작 화면이 보일 때마다 자동 재생)
   fill-mode는 backwards만 사용 → 끝난 뒤에는 원래 스타일로 돌아가서 버튼 :active 눌림 효과가 그대로 동작 */
#startScreen .start_logo { animation: start_intro_down .6s cubic-bezier(.2, .7, .2, 1) backwards; }
#startScreen .start_txt  { animation: start_intro_text .7s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
#startScreen .start_char { animation: start_intro_char .9s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
#startBtn                { animation: start_intro_up .8s cubic-bezier(.2, .7, .2, 1) .6s backwards; }

@keyframes start_intro_down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes start_intro_text {
    from { opacity: 0; transform: translateY(10px) scale(1.06); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes start_intro_char {
    from { opacity: 0; transform: translateY(24px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
@keyframes start_intro_up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #startScreen .start_logo, #startScreen .start_txt, #startScreen .start_char, #startBtn { animation: none; }
}

/* ★ GAME START 후 시작 화면이 사라짐 (JS INTRO 참고) */
#startScreen.is_leaving { opacity: 0; transition: opacity .3s ease; pointer-events: none; }

/* ★ 게임 시작 인트로: 상단 UI는 위에서, 좌우 버튼은 아래에서 등장
   (backwards 만 사용 → 끝난 뒤 원래 스타일로 돌아가 버튼 눌림 효과에 영향 없음) */
.game_wrap.is_intro .hud .hud_top { animation: intro_from_top .45s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
.game_wrap.is_intro .hud .hearts  { animation: intro_from_top .45s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
.game_wrap.is_intro .pad          { animation: intro_from_bottom .45s cubic-bezier(.2, .7, .2, 1) .4s backwards; }
/* → UI는 0.85초 안에 모두 등장, 이후 고양이가 마지막으로 나타나며 시작 (JS INTRO_CAT_DELAY) */
@keyframes intro_from_top    { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes intro_from_bottom { from { opacity: 0; transform: translateY(24px); }  to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .game_wrap.is_intro .hud .hud_top,
    .game_wrap.is_intro .hud .hearts,
    .game_wrap.is_intro .pad { animation: none; }
}

/* ★ 시작 전에는 HUD(시간·버튼) 숨김 (JS에서도 함께 제어) */
.kiosk .game_wrap:not(.playing) #hudBox { display: none; }

/* ★ 게임오버 팝업 */
#gameOverModal {
    display: none;
    position: absolute; inset: 0;
    z-index: 9;                         /* #hudBox(10) 아래 → 홈·공유 버튼이 팝업 위에 보임 */
    flex-direction: column;
    padding: var(--hud_safe_top) 20px var(--popup_safe_bottom);   /* ★ 상단 UI와 겹치지 않게 */
    box-sizing: border-box;
    overflow-y: auto;                   /* ★ 화면이 팝업보다 낮으면 스크롤 */
    -webkit-overflow-scrolling: touch;
    background: rgba(2, 13, 23, 0.80);
    backdrop-filter: blur(5px);
    animation: over_fade_in .3s ease;
}
@keyframes over_fade_in { from { opacity: 0; } to { opacity: 1; } }

#gameOverModal .over_card {
    width: 100%;
    max-width: 440px;
    padding: 36px 24px;
    box-sizing: border-box;
    margin: auto;                       /* ★ 여유가 있으면 가운데, 없으면 위 여백부터 시작 */
    flex-shrink: 0;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(154, 208, 255, 0.80);
    text-align: center;
    animation: over_pop .35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes over_pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* #startScreen {display: none !important;}
#gameOverModal {display: none;}
#rankingModal {display: flex;} */
#gameOverModal .over_title { margin: 0; color: #3F6DA8; font-size: 30px; font-weight: 850; line-height: 150%; text-transform: uppercase; }

#gameOverModal .over_record {
    margin-left: 6px; margin-right: 6px;
    margin-top: 27px;
    padding-bottom: 38px;
    border-bottom: 1px solid #E4E4E4;
}
#gameOverModal .record_label {
    margin: 0;
    color: #A3A3A3;
font-size: 15px;
font-weight: 500;
line-height: 150%;
text-transform: uppercase;
}
#gameOverModal .record_time {
    margin: 5px 0 0;
    color: #00122D;
font-size: 36px;
font-weight: 850;
line-height: 150%;
letter-spacing: -1.8px;
text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

#gameOverModal .over_form { margin-top: 33px; padding: 0 6px; }
#gameOverModal .form_label {
    display: block;
    color: #464646;
font-size: 18px;
font-weight: 500;
line-height: 160%;
text-transform: uppercase;
}
#gameOverModal .form_input {
    display: block;
    width: 100%;
    height: 56px;
    margin-top: 10px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #D5D5D5;
    background: #F5F5F5;
    color: #333;
font-size: 16px;
font-weight: 500;
line-height: 160%;
    text-align: center;
    outline: none;
}
#gameOverModal .form_input::placeholder { color: #888; }
#gameOverModal .form_input:focus { border-color: #3d6aa8; background: #fff; }
#gameOverModal .form_note {
    margin: 10px 0 0;
    color: #666;
font-family: "Noto Sans KR", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 160%;
}

#gameOverModal .over_btn {
    display: block;
    width: 100%;
    margin-top: 48px;
    padding: 15px 0;
    border: none;
    border-radius: 100px;
    background: #142446;
    color: #FFF;
font-size: 18px;
font-weight: 500;
line-height: 150%;
text-transform: uppercase;
    cursor: pointer;
    transition: transform .1s;
}
#gameOverModal .over_btn:active { transform: scale(.97); }

/* ★ 게임오버(랭킹 등록) 팝업: 홈·다시하기 버튼만 남기고 시간·하트·좌우 버튼 숨김 */
.hud .btn_share { display: none; box-shadow: 0 0 18px #9AD0FF; background-image: url(/img/kiosk/btn_share.png); }
.game_wrap.is_over .hud .time_box,
.game_wrap.is_over .hud .hearts,
.game_wrap.is_over .pad { visibility: hidden; }

/* ★ 랭킹 등록 후 랭킹 리스트: 우상단 다시하기 → 공유하기 */
.game_wrap.is_ranking .hud .btn_retry { display: none; }
.game_wrap.is_ranking .hud .btn_share { display: block; }

/* ★ 랭킹 팝업 */
#rankingModal {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 9;
    flex-direction: column;
    padding: var(--hud_safe_top) 20px var(--popup_safe_bottom);   /* ★ 상단 UI와 겹치지 않게 */
    box-sizing: border-box;
    overflow-y: auto;                   /* ★ 화면이 팝업보다 낮으면 스크롤 */
    -webkit-overflow-scrolling: touch;
    background: rgba(2, 13, 23, 0.80);
    backdrop-filter: blur(5px);
    animation: over_fade_in .3s ease;
}

#rankingModal .ranking_card {
    margin: auto;                       /* ★ 여유가 있으면 가운데, 없으면 위 여백부터 시작 */
    flex-shrink: 0;
    width: 100%;
    max-width: 440px;
    text-align: center;
    animation: over_pop .35s cubic-bezier(.2, .9, .3, 1.2);
}

/* 랭킹 목록 전체 */
#rankingModal .ranking_list {
    position: relative;
    padding: 66px 0 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    background: rgba(213, 229, 242, 0.80);
    box-shadow: 0 0 10px 0 rgba(154, 208, 255, 0.80), 0 0 30px 0 rgba(154, 208, 255, 0.80) inset;
}

/* RANKING 타이틀 */
#rankingModal .ranking_title {
    position: relative;
    z-index: 1;
    margin: 0 0 calc(-1.5em + -19px);
    padding-top: 20px;
    color: #FFF;
text-shadow: 0 0 10px rgba(41, 85, 120, 0.50);
font-size: 20px;
font-weight: 500;
line-height: 150%;
letter-spacing: 4px;
text-transform: uppercase;
}

/* 개별 랭킹
   ★ 등수는 absolute 로 프로필 왼쪽 위에 띄움 → 자릿수(1, 10, 100)가 달라져도 프로필·닉네임 위치가 고정됨 */
#rankingModal .ranking_item {
    --profile_size: 68px;           /* 프로필 크기 (등수 위치 계산에도 사용) */
    --rank_left: 27px;              /* 등수 시작 위치 */
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 110px;
    padding: 12px 20px 12px 52px;   /* 왼쪽 52px = 등수 자리 (등수 폭과 상관없이 고정) */
    box-sizing: border-box;
    text-align: left;
}

/* 내 랭킹 강조 */
#rankingModal .ranking_item.my_rank {
    --profile_size: 78px;
    --rank_left: 22px;
    z-index: 2;
    min-height: 130px;
    margin: 0 -7px;
    padding: 16px 20px 16px 42px;
    border-radius: 20px;
    border: 2px solid #FFF;
    background: #142446;
    box-shadow: 0 0 10px 0 rgba(154, 208, 255, 0.80), 0 0 6px 0 #9AD0FF, 0 4px 10px 0 rgba(154, 208, 255, 0.60) inset, -4px -4px 10px 0 rgba(154, 208, 255, 0.60) inset;
}

/* 순위 번호: 프로필 왼쪽 위
   ★ 숫자의 '오른쪽 끝'을 고정 → 자릿수가 늘면 왼쪽으로 늘어남 (프로필과 겹치지 않음)
     1자리일 때 시작 위치 = --rank_left, 오른쪽 끝 = --rank_left + 숫자 1개 폭(1ch) */
#rankingModal .rank_number {
    position: absolute;
    z-index: 1;
    --rank_scale: 1;                          /* ★ 자릿수별 축소 비율 (아래 data-len 규칙) */
    left: calc(var(--rank_left) + 1ch);       /* 1자리 숫자의 오른쪽 끝 위치 */
    transform: translateX(-100%) scale(var(--rank_scale));  /* 왼쪽으로 펼침 + 자릿수만큼 축소 */
    transform-origin: right top;              /* 오른쪽 위 기준으로 줄여서 위치가 틀어지지 않음 */
    text-align: right;
    top: calc(50% - var(--profile_size) / 2 - 0.3em);   /* 프로필 윗변보다 살짝 위 */
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ★ 자릿수별 등수 크기 (JS에서 data-len 부여)
   - 줄어든 만큼 왼쪽으로 덜 튀어나옴. 일반·내 랭킹·작은 화면 모두 같은 비율로 적용 */
#rankingModal .rank_number[data-len="2"] { --rank_scale: .8; }
#rankingModal .rank_number[data-len="3"] { --rank_scale: .62; }
#rankingModal .rank_number[data-len="4"] { --rank_scale: .5; }

/* 프로필 이미지 */
#rankingModal .rank_profile {
    flex-shrink: 0;
    width: var(--profile_size);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 24px;
    border: 2px solid #FFF;
    background: #FFF;
    box-sizing: border-box;
}

#rankingModal .rank_profile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 닉네임 */
#rankingModal .rank_nickname {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.8px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 기록 */
#rankingModal .rank_record {
    flex-shrink: 0;
    color: #0E2952;
    text-align: right;
    font-size: 20px;
    font-weight: 850;
    line-height: 150%;
    letter-spacing: -1px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* 내 랭킹 텍스트 */
#rankingModal .my_rank .rank_record {
    color: #FFF;
    font-size: 24px;
    letter-spacing: -1.2px;
}
#rankingModal .my_rank .rank_nickname {
    font-size: 20px;
    letter-spacing: -1px;
}
#rankingModal .my_rank .rank_number {
    font-size: 26px;
}

/* 다시 도전하기 버튼 */
#rankingModal .ranking_retry_btn {
    display: block;
    width: 100%;
    height: 74px;
    margin-top: 40px;
    border-radius: 100px;
    border: 3px solid #FFF;
    background: rgba(54, 93, 133, 0.30);
    box-shadow: 0 0 20px 0 rgba(154, 208, 255, 0.80) inset, 0 0 10px 0 rgba(154, 208, 255, 0.80);
    color: #FFF;
font-size: 20px;
font-weight: 500;
line-height: 150%;
text-transform: uppercase;
    cursor: pointer;
    transition: transform .1s;
}

#rankingModal .ranking_retry_btn:active {
    transform: scale(.97);
}



/* ★ 화면 높이 650px 미만: HUD 버튼 + 랭킹 팝업을 화면 높이에 비례해 축소 → 한 화면에 들어오게
   (값은 650px 높이에서 기존 크기의 약 85%가 되도록 dvh로 계산) */
@media (max-height: 800px) {
    :root {
        --hud_btn_size: 8.6dvh;                                   /* 650px 기준 약 56px */
        --hud_safe_top: calc(12px + var(--hud_btn_size) + 10px);
        --popup_safe_bottom: 16px;
    }

    /* 상단 HUD 버튼 */
    .hud { padding-top: 12px; }
    .hud .hud_btn { width: var(--hud_btn_size); }
    .hud .time_box > span { font-size: 4.2dvh; }
    .hud .heart { width: 4.2dvh; }

    /* 랭킹 팝업 */
    #rankingModal .ranking_title {
        padding-top: 3dvh;
        font-size: 2.6dvh;
        margin-bottom: calc(-1.5em - 3dvh);
    }
    #rankingModal .ranking_list { padding: 10dvh 0 1.5dvh; }

    /* ★ 좌우 여백·등수 위치도 높이에 비례해 축소 (800px 높이에서 기존 px 값과 같아지도록 계산) */
    #rankingModal .ranking_item {
        --profile_size: 9.5dvh;
        --rank_left: 2.5dvh;                    /* 800px 기준 27px */
        min-height: 13.5dvh;
        gap: 1.5dvh;                            /* 800px 기준 12px */
        padding: 1.2dvh 2.5dvh 1.2dvh 5.5dvh;   /* 800px 기준 좌 52px · 우 20px */
    }
    #rankingModal .ranking_item.my_rank {
        --profile_size: 10dvh;
        --rank_left: 3dvh;                    /* 800px 기준 17px */
        min-height: 16.5dvh;
        padding: 1.2dvh 2.5dvh 1.2dvh 5.25dvh;  /* 800px 기준 좌 42px · 우 20px */
    }
    #rankingModal .rank_profile { border-radius: 3.4dvh; }

    #rankingModal .rank_number          { font-size: 2.6dvh; }
    #rankingModal .my_rank .rank_number { font-size: 2.8dvh; }
    #rankingModal .rank_nickname          { font-size: 2.2dvh; }
    #rankingModal .my_rank .rank_nickname { font-size: 2.6dvh; }
    #rankingModal .rank_record          { font-size: 2.7dvh; }
    #rankingModal .my_rank .rank_record { font-size: 3dvh; }

    #rankingModal .ranking_retry_btn {
        height: 10dvh;
        margin-top: 3dvh;
        font-size: 2.4dvh;
    }
}

/* 랭킹 공유용 이미지 */
#kioskShareCapture {
    width: 800px;
    height: 880px;
    position: fixed;
    left: -9999px;

    background: url('/img/kiosk_share_img.png') center / cover no-repeat;
}

#kioskShareCapture .ranking_box {
    position: absolute;
    bottom: 91px;
    left: 50%;
    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: max-content;
    padding: 14px 50px;
    white-space: nowrap;

    border: 3px solid #fff;
    border-radius: 100px;
    background: rgba(54, 93, 133, 0.6);
    box-shadow: 0 0 20px rgba(154, 204, 255, 0.8);

    color: #fff;
    font-size: 26px;
}