/* style250928.css — 驚安の殿堂 horse.coffee
   돈키호테 手書きPOP 스타일. 형광 색지 + 매직 잉크 + 다이컷 가격표.
   레이아웃 역학(flex, 캔버스 사이징, fixed 배치)은 기존 동작을 그대로 유지한다. */

:root {
    /* --- 색지와 잉크 --- */
    --donki-yellow: #FFE900;      /* 형광 POP 색지 */
    --gekiyasu-magenta: #E4007F;  /* 激安 핑크 색지 */
    --donki-navy: #10237B;        /* 로고 감청 */
    --maru-red: #E60012;          /* 大特価 도장 */
    --pop-green: #00A95C;         /* 형광 녹색지 */
    --marker-black: #000000;      /* 매직 잉크 — 틴티드 근검정 아님 */

    /* --- 서체: 두 역할만 --- */
    --pop-display: 'Black Han Sans', 'Dela Gothic One', 'Malgun Gothic', sans-serif;
    /* Black Han Sans는 아주 큰 크기 전용 디스플레이 서체다. 30px 이하에서 한글을 쓰면
       '꼴'처럼 자소가 촘촘한 글자의 획이 서로 붙어 뭉개진다. 그 크기대에서는 본문용으로
       설계된 Gothic A1 900을 쓴다 — 굵기는 POP에 맞게 유지하면서 획이 안 뭉친다. */
    --pop-display-mid: 'Gothic A1', 'Black Han Sans', 'Malgun Gothic', sans-serif;
    --pop-hand: 'Gamja Flower', 'Yusei Magic', 'Malgun Gothic', sans-serif;
    --pop-body: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;

    /* --- 매직으로 그린 태그의 공통 형태 --- */
    --ink: 4px solid var(--marker-black);
    --tag-drop: 6px 6px 0 var(--marker-black);

    /* 다이컷 톱니: 좌우 수직 엣지를 지지직 잘라낸 POP 가격표 */
    --diecut: polygon(
        0% 0%, 100% 0%,
        96% 12.5%, 100% 25%, 96% 37.5%, 100% 50%,
        96% 62.5%, 100% 75%, 96% 87.5%, 100% 100%,
        0% 100%,
        4% 87.5%, 0% 75%, 4% 62.5%, 0% 50%,
        4% 37.5%, 0% 25%, 4% 12.5%
    );

    /* 12각 별폭발 배지 */
    --burst: polygon(
        50% 0%, 58.3% 9.1%, 75% 6.7%, 72.6% 27.4%, 93.3% 25%, 80.9% 41.7%,
        100% 50%, 80.9% 58.3%, 93.3% 75%, 72.6% 72.6%, 75% 93.3%, 58.3% 90.9%,
        50% 100%, 41.7% 90.9%, 25% 93.3%, 27.4% 72.6%, 6.7% 75%, 19.1% 58.3%,
        0% 50%, 19.1% 41.7%, 6.7% 25%, 27.4% 27.4%, 25% 6.7%, 41.7% 9.1%
    );
}

/* 기본 리셋 및 body 스타일 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 게임 화면에서 스크롤 방지 */
    /* 모바일에서 당겨서 새로고침 / 끝에서 튕기는 고무줄 스크롤까지 막는다 */
    overscroll-behavior: none;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--pop-body);
    display: flex; /* 자식 요소(#game-area)가 높이를 채우도록 */
    flex-direction: column;
    background-color: var(--donki-navy);
    /* 모바일 브라우저에서 100vh는 '주소창이 숨은 상태'의 높이라 실제 보이는 영역보다 크다.
       그만큼 화면 밖으로 삐져나가 스크롤이 생기므로 dvh(실제 보이는 높이)를 쓴다.
       dvh를 모르는 구형 브라우저는 위의 100vh를 그대로 쓴다(기존 동작 유지). */
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- 게임 영역 스타일 (항상 표시) --- */
#game-area {
    position: relative; /* 내부 absolute/fixed 요소 기준 */
    width: 100%;
    height: 100vh; /* 전체 뷰포트 높이 (dvh 미지원 브라우저용 폴백) */
    height: 100dvh; /* 모바일 주소창을 뺀 실제 보이는 높이 — 해설 박스가 화면 밖으로 안 밀린다 */
    display: flex; /* 내부 요소(canvas, commentary) 정렬 */
    flex-direction: column;
    margin: 0;
    border: none;
    box-sizing: border-box;
    z-index: 1; /* 모달보다 아래에 있도록 */
}

/* --- 모달 백드롭: 감청 바탕에 형광 경고 사선 --- */
#modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--donki-navy); /* 불투명 — 뒤 캔버스 텍스트가 비쳐 잡음이 된다 */
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 233, 0, 0.14) 0 22px,
        rgba(255, 233, 0, 0) 22px 44px,
        rgba(228, 0, 127, 0.16) 44px 66px,
        rgba(228, 0, 127, 0) 66px 88px
    );
    z-index: 10; /* 게임 영역 위, 모달 아래 */
    display: none; /* JS로 제어 */
}

/* --- 설정 영역: POP 간판 --- */
#setup-area {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 470px;
    background-color: var(--donki-navy);
    /* 상단 띠가 앉을 자리를 위해 위쪽 패딩 확보 */
    padding: 26px 26px 30px;
    border: var(--ink);
    border-radius: 0;
    /* 노랑-검정 이중 테두리 + 하드 오프셋 그림자 */
    box-shadow:
        0 0 0 5px var(--donki-yellow),
        0 0 0 9px var(--marker-black),
        16px 16px 0 rgba(0, 0, 0, 0.5);
    z-index: 20; /* 백드롭 위에 표시 */
    /* 첫 화면은 항상 이 모달이므로 기본값이 표시 상태다. 숨기는 것만 JS가 인라인
       display:none으로 하고, 다시 보일 때는 display=''로 인라인 선언을 지운다.
       JS가 'block'을 인라인으로 박으면 아래 가로 모드 2단 레이아웃(display:grid)이
       스타일시트에서 절대 이길 수 없다. */
    display: block;
    box-sizing: border-box;
    /* 노랑-검정 이중 테두리(9px)가 잘리지 않을 만큼만 남기고 최대한 넓게 쓴다.
       dvh를 쓰는 이유는 body와 같다 — 모바일 주소창이 보이는 상태의 높이에 맞춰야 한다.
       overflow-y:auto는 '절대 잘리지 않게' 하는 최후의 안전장치로 남긴다. 아래
       max-height 기반 미디어 쿼리들이 내용을 압축해서 이게 실제로 작동하지 않게 만든다. */
    max-height: 85vh;
    max-height: 90dvh;
    overflow-y: auto;
    overflow-x: hidden; /* 기울어진 띠의 모서리를 간판 폭에 맞춰 잘라낸다 */
}

/* --- 등장 연출: 한 번만 찍히는 스탬프 --- */
@keyframes pop-stamp {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(1.5) rotate(var(--pop-rot, 0deg));
    }
    55% {
        opacity: 1;
        transform: translateY(0) scale(0.93) rotate(var(--pop-rot, 0deg));
    }
    78% {
        transform: scale(1.04) rotate(var(--pop-rot, 0deg));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(var(--pop-rot, 0deg));
    }
}

#setup-tape,
#modal-main-title,
#horse-names-container,
.setup-buttons-container,
#horse-count-badge {
    animation: pop-stamp 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
#setup-tape { animation-delay: 0s; }
#modal-main-title { animation-delay: 0.09s; }
#horse-names-container { animation-delay: 0.18s; }
.setup-buttons-container { animation-delay: 0.27s; }
#horse-count-badge { animation-delay: 0.38s; }

/* --- 상단 마젠타 띠: 이 게임이 하는 일을 그대로 적는다 --- */
#setup-tape {
    --pop-rot: -1.2deg;
    transform: rotate(var(--pop-rot));
    margin: 0 -34px 18px;
    padding: 7px 34px;
    background-color: var(--gekiyasu-magenta);
    border-top: 3px solid var(--marker-black);
    border-bottom: 3px solid var(--marker-black);
    /* 노랑 on 마젠타는 3.67:1로 본문 기준(4.5:1) 미달이었다.
       타이틀 카드와 같은 원칙("밝은 색지 위 어두운 잉크")으로 검정 글자로 뒤집으면 4.60:1.
       그림자는 노랑으로 넣어 POP 색감을 유지한다. */
    color: var(--marker-black);
    font-family: var(--pop-display-mid); /* 20.8px에서 Black Han Sans는 '꼴'이 뭉갠다 */
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.25;
    text-align: center;
    letter-spacing: 0.02em;
    /* 하드 오프셋 그림자는 한글 자소 사이 좁은 틈으로 파고들어 글자를 메운다 —
       이 크기에서는 넣지 않는다. */
}

/* --- 간판 헤드라인: 형광 색지 위 검정 매직 --- */
/* 감청 배경 위에 검정 테두리를 두르는 건 원리상 안 통한다 — 검정과 감청의 명암비가
   1.54:1이라 테두리가 배경에서 분리되질 않고, 글자만 두꺼워지면서 한글 자소 구멍만
   메운다(테두리를 키울수록 오히려 뭉개졌던 이유). 실제 돈키호테 POP처럼 배경을 뒤집어
   '형광 색지 위 검정 잉크'로 가면 검정이 제 역할을 하고 명암비도 16:1이 된다.
   그래서 타이틀 블록 자체를 노랑 POP 카드로 만들고, 글자 테두리는 전부 걷어냈다. */
#modal-main-title {
    display: block;
    margin: 0 0 22px;
    /* 좌우 패딩이 커지면 안쪽 폭이 줄어 영문 "Horse Race"가 한 줄에 안 들어간다 */
    padding: 13px 14px 15px;
    text-align: left;
    background-color: var(--donki-yellow);
    border: var(--ink);
    box-shadow: var(--tag-drop);
    color: var(--marker-black);
    transform: rotate(0.8deg); /* 손으로 붙인 간판처럼 살짝 기울인다 (아래 이름 카드와 반대 방향) */
}

#modal-main-title span {
    display: block;
}

/* 색은 노랑 색지 위에서 버티는 어두운 채도 높은 것만 고른다.
   감청 11:1, 마젠타 3.7:1(큰 활자 전용), 검정 16:1 — 가장 작은 글씨일수록 검정으로 간다. */
#modal-main-title .pop-brand {
    font-family: 'Dela Gothic One', var(--pop-display);
    font-size: 1rem;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
    color: var(--donki-navy);
}

#modal-main-title .pop-shout {
    /* Black Han Sans는 '게'의 ㄱ/ㅔ가 54px에서도 붙어 있다 — 크기를 키워도 해결되지 않는
       서체 자체의 자소 간격 문제라 본문용 고딕 900으로 바꾼다. */
    font-family: var(--pop-display-mid);
    font-weight: 900;
    /* 카드 안쪽 폭에 맞춘 크기 — 더 키우거나 vw 계수를 올리면 좁은 화면에서 영문
       "Horse Race"가 쪼개지면서 모달이 길어져 시작 버튼이 화면 밖으로 밀린다 */
    font-size: clamp(1.9rem, 9vw, 3.35rem);
    line-height: 0.95;
    letter-spacing: 0.09em; /* 한글 히어로는 자간을 넓게 — 자소가 촘촘해 붙어 보인다 */
    color: var(--gekiyasu-magenta); /* 노랑 색지 위 마젠타 = 激安 POP 조합 */
    /* 하드 오프셋 그림자 금지: 그림자 복사본이 '게'의 ㄱ/ㅔ 사이 좁은 틈 안으로 들어가
       글자를 통짜 덩어리로 메워버린다(자간을 벌려도 해결 안 됨 — 글자 '안쪽' 문제).
       POP 깊이감은 카드 자체의 box-shadow가 이미 담당한다. */
}
/* 영문은 "Crazy Horse Race"가 두 줄이라 한국어(한 줄)보다 모달이 그만큼 높아진다 —
   그대로 두면 특정 창 높이에서 영문에서만 스크롤이 생긴다. 영문 헤드라인을 조금 줄여
   두 줄 높이를 한국어 한 줄에 가깝게 맞춘다. */
:lang(en) #modal-main-title .pop-shout {
    font-size: clamp(1.7rem, 7.6vw, 2.7rem);
    line-height: 0.88;
    letter-spacing: 0.01em; /* 라틴 문자는 원래 안 붙는다 — 넓히면 폭만 늘어 줄바꿈이 생긴다 */
}
:lang(en) #modal-main-title { padding-bottom: 10px; }
:lang(en) #modal-main-title .pop-ask { margin-top: 4px; }
:lang(en) #modal-main-title .pop-hand { margin-top: 5px; }

#modal-main-title .pop-ask {
    /* 30px대에서 Black Han Sans는 '꼴'의 ㄲ/ㄹ 획이 붙는다 — 본문용 고딕 900으로 간다 */
    font-family: var(--pop-display-mid);
    font-weight: 900;
    font-size: clamp(1.4rem, 6vw, 1.85rem);
    line-height: 1.15;
    margin-top: 8px;
    letter-spacing: 0.01em;
    color: var(--donki-navy);
}

#modal-main-title .pop-hand {
    font-family: var(--pop-hand);
    font-size: 1.15rem;
    line-height: 1.2;
    margin-top: 8px;
}

/* '경주 설정' — 입력 라벨이 이미 할 일을 말해주므로 화면에서는 감추고
   섹션 제목으로서의 역할만 보조기기에 남긴다 */
#setup-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- 이름 입력: 기울어진 노랑 POP 카드 --- */
#horse-names-container {
    --pop-rot: -1.5deg;
    transform: rotate(var(--pop-rot));
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 26px;
    padding: 14px 16px 16px;
    background-color: var(--donki-yellow);
    border: var(--ink);
    box-shadow: var(--tag-drop);
}

#horse-names-container label {
    margin-bottom: 8px;
    font-family: var(--pop-hand);
    font-size: 1.1rem;
    line-height: 1.25;
    color: var(--marker-black);
    text-align: left;
    min-width: unset;
}

#horse-names-field {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    border: 3px solid var(--marker-black);
    border-radius: 0;
    font-family: var(--pop-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--marker-black);
    resize: vertical;
    box-sizing: border-box;
}
#horse-names-field:focus {
    outline: 3px solid var(--gekiyasu-magenta);
    outline-offset: 2px;
}

/* --- 버튼 행: 좌측 작게, 우측 크게 --- */
.setup-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-top: 0;
    flex-wrap: wrap;
}

.setup-buttons-container button {
    margin: 0;
    cursor: pointer;
    font-family: var(--pop-display);
    flex-grow: 0;
}

/* 말 섞기: 조용한 감청 태그 */
#shuffle-button {
    padding: 11px 16px;
    font-size: 1rem;
    line-height: 1.1;
    background-color: var(--donki-navy);
    color: var(--donki-yellow);
    border: var(--ink);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--marker-black), 0 0 0 3px var(--donki-yellow) inset;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
#shuffle-button:hover {
    background-color: #17309e;
}
#shuffle-button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--marker-black), 0 0 0 3px var(--donki-yellow) inset;
}

/* --- 히어로: 손글씨 형광 POP 가격표 --- */
/* 배지를 버튼 위쪽에 흐름대로 놓고 음수 마진으로만 겹친다.
   절대 배치로 라벨 옆에 걸면 ko/en 라벨 길이 차이 때문에 글자를 덮어버린다. */
#start-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#horse-count-badge {
    --pop-rot: -8deg;
    position: relative;
    margin-right: 18px;
    margin-bottom: -16px; /* 버튼 상단 모서리에만 걸친다 (라벨은 세로 중앙이라 안 닿는다) */
    z-index: 2;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    transform: rotate(var(--pop-rot));
    font-family: var(--pop-hand);
    font-size: 1.2rem;
    line-height: 1.1;
    text-align: center;
    white-space: pre-line; /* i18n 문구의 줄바꿈을 살린다 */
    color: #fff; /* 얇은 손글씨 획이라 마젠타 위에서는 흰색이어야 읽힌다 */
    pointer-events: none;
}
/* 배지의 텍스트는 JS가 textContent로 갈아끼우므로, 형태는 전부 의사요소로 만든다 */
#horse-count-badge::before {
    content: '';
    position: absolute;
    inset: -3px;
    background-color: var(--marker-black);
    clip-path: var(--burst);
    z-index: -2;
}
#horse-count-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--gekiyasu-magenta);
    clip-path: var(--burst);
    z-index: -1;
}

#start-button {
    --pop-rot: 1.6deg;
    position: relative;
    align-self: flex-end;
    padding: 20px 30px 20px 34px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: var(--marker-black);
    font-size: clamp(1.5rem, 7vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.01em;
    transform: rotate(var(--pop-rot));
    filter: drop-shadow(7px 7px 0 var(--marker-black));
    transition: transform 0.09s ease-out, filter 0.09s ease-out;
}
#start-button::before {
    content: '';
    position: absolute;
    inset: -4px;
    background-color: var(--marker-black);
    clip-path: var(--diecut);
    z-index: -2;
}
#start-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--donki-yellow);
    clip-path: var(--diecut);
    z-index: -1;
}
#start-button:hover::after {
    background-color: #fff33d;
}
#start-button:active {
    transform: rotate(var(--pop-rot)) translate(5px, 5px);
    filter: drop-shadow(2px 2px 0 var(--marker-black));
}
#start-button:disabled {
    cursor: not-allowed;
    filter: drop-shadow(7px 7px 0 var(--marker-black)) grayscale(0.75);
}

/* 키보드 초점은 항상 보이게 */
button:focus-visible,
#horse-names-field:focus-visible {
    outline: 4px solid var(--gekiyasu-magenta);
    outline-offset: 3px;
}
#start-button:focus-visible {
    outline: 4px solid var(--gekiyasu-magenta);
    outline-offset: 6px;
}

/* 경주 캔버스 */
#race-canvas {
    width: 100%;
    height: 0; /* flex-grow 계산 위해 */
    flex-grow: 1; /* 사용 가능한 모든 세로 공간 차지 */
    display: block;
    box-sizing: border-box;
    object-fit: contain;
    min-height: 150px;
    background-color: var(--donki-yellow); /* 로딩 중 배경도 POP 색지로 */
}

/* 정보 패널 (숨김) */
#info-panel {
    display: none;
}

/* --- 해설 박스: 하단 감청 안내 띠 --- */
#commentary-box {
    width: 100%;
    min-height: auto;
    background-color: var(--donki-navy);
    border-top: 4px solid var(--marker-black);
    box-shadow: inset 0 4px 0 var(--donki-yellow);
    padding: 8px 12px 6px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
}

#commentary-box p {
    margin: 1px 0;
    padding: 0;
    font-family: var(--pop-body);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--donki-yellow);

    /* 한 줄 처리 및 말줄임표 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 전체화면 / 언어 전환 버튼 --- */
#fullscreen-controls {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
}

#fullscreen-button,
#lang-button {
    padding: 6px 11px;
    font-family: var(--pop-display);
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
    background-color: var(--donki-yellow);
    color: var(--marker-black);
    border: 3px solid var(--marker-black);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--marker-black);
    white-space: nowrap;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
#fullscreen-button:hover,
#lang-button:hover {
    background-color: #fff33d;
}
#fullscreen-button:active,
#lang-button:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--marker-black);
}
#fullscreen-button:disabled,
#lang-button:disabled {
    background-color: #9a9a9a;
    box-shadow: 3px 3px 0 var(--marker-black);
    cursor: not-allowed;
}

/* 언어 전환 버튼은 현재 언어의 '반대' 언어를 보여준다 (한국어 모드 -> English) */
#lang-button {
    min-width: 66px;
    text-align: center;
    /* 12.8px 작은 글씨라 마젠타 위 노랑(3.67:1)으로는 부족하다 — 감청 바탕에 노랑으로 10.92:1.
       옆의 전체화면 버튼(노랑 바탕 + 검정)과도 확실히 구분된다. */
    background-color: var(--donki-navy);
    color: var(--donki-yellow);
}
#lang-button:hover {
    background-color: #17309e;
}

/* --- 하단 버튼 컨테이너 (Flexbox) --- */
#bottom-button-container {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 98%;
    z-index: 1001;

    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* 컨테이너 자체는 클릭 이벤트 무시 */
}

/* 하단 버튼 공통: 작은 POP 태그 */
#bottom-button-container button {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    margin: 0;

    padding: 9px 13px;
    font-family: var(--pop-display);
    font-size: 0.9rem;
    line-height: 1.15;
    border: 3px solid var(--marker-black);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--marker-black);
    cursor: pointer;
    display: none; /* JS로 제어 (초기 숨김) */
    pointer-events: auto;
    flex-shrink: 0;
    white-space: nowrap;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
#bottom-button-container button:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--marker-black);
}

#restart-button { background-color: var(--donki-navy); color: var(--donki-yellow); order: 1; }
#restart-button:hover { background-color: #17309e; }

#share-button { background-color: var(--donki-yellow); color: var(--marker-black); order: 2; }
#share-button:hover { background-color: #fff33d; }

#share-rankings-button { background-color: var(--pop-green); color: #fff; order: 3; }
#share-rankings-button:hover { background-color: #00c268; }

#share-recording-button { background-color: var(--maru-red); color: var(--donki-yellow); order: 4; }
#share-recording-button:hover { background-color: #ff1a2c; }

/* 미디어 쿼리 (좁은 화면) */
@media (max-width: 700px) {
    #bottom-button-container {
        flex-direction: column;
        gap: 8px;
        bottom: 10px;
        width: 66%;
        max-width: 260px;
    }
    #bottom-button-container button {
        width: 100%;
        font-size: 0.9rem;
        padding: 10px 6px;
        white-space: normal;
        order: 0;
    }
     #restart-button { order: 4; }
     #share-button { order: 1; }
     #share-rankings-button { order: 2; }
     #share-recording-button { order: 3; }
}

@media (max-width: 600px) {
    #commentary-box p {
        font-size: 0.75rem;
        line-height: 1.25;
    }
}

@media (max-width: 430px) {
     #bottom-button-container {
          width: 74%;
     }
    #setup-area {
        padding: 22px 18px 26px;
        box-shadow:
            0 0 0 4px var(--donki-yellow),
            0 0 0 7px var(--marker-black),
            10px 10px 0 rgba(0, 0, 0, 0.5);
    }
    #modal-main-title {
        padding: 11px 11px 13px; /* 좁은 화면에서는 카드 안쪽 폭을 조금이라도 더 확보한다 */
        margin-bottom: 18px;
    }
    #setup-tape {
        margin: 0 -26px 16px;
        padding: 6px 26px;
        font-size: 1rem;
    }
    .setup-buttons-container {
        gap: 10px;
    }
    #shuffle-button {
        padding: 10px 13px;
        font-size: 0.95rem;
    }
    #horse-count-badge {
        width: 86px;
        height: 86px;
        margin-right: 12px;
        margin-bottom: -14px;
        font-size: 0.95rem;
    }
    #start-button {
        padding: 17px 22px 17px 26px;
    }
}

/* --- 세로가 짧은 화면: 첫 화면이 스크롤 없이 들어가도록 압축 ---
   첫 화면 내용 높이는 한국어 592px / English 655px인데, 640px 폰의 예산(90dvh)은 576px이다.
   그래서 여백과 보조 문구부터 줄인다. 폭 기준 미디어 쿼리(max-width:430px)가 좌우 패딩을
   이미 갖고 있으므로 여기서는 세로 값만 건드린다 — 단축 속성으로 쓰면 좁은 폰의 좌우
   패딩까지 덮어써서 내용 폭이 줄어든다.
   작은 폰만의 문제가 아니다: 768p 노트북의 브라우저 뷰포트도 640~670px이라 같이 해결된다.
   #horse-names-field의 font-size는 1rem(16px) 미만으로 내리지 않는다 — iOS Safari는
   16px 미만 입력에 초점이 가면 화면을 자동 확대해서 그 자체로 스크롤을 만든다. */
@media (max-height: 720px) {
    #setup-area {
        padding-top: 18px;
        padding-bottom: 20px;
    }
    #setup-tape {
        padding-top: 5px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        font-size: 0.95rem;
    }
    #modal-main-title {
        padding-top: 10px;
        padding-bottom: 11px;
        margin-bottom: 11px;
    }
    #modal-main-title .pop-brand { font-size: 0.85rem; margin-bottom: 2px; }
    #modal-main-title .pop-shout { font-size: clamp(1.6rem, 7.5vw, 2.4rem); }
    :lang(en) #modal-main-title .pop-shout { font-size: clamp(1.45rem, 6.4vw, 2rem); }
    #modal-main-title .pop-ask { font-size: clamp(1.15rem, 5vw, 1.5rem); margin-top: 5px; }
    #modal-main-title .pop-hand { font-size: 0.95rem; margin-top: 5px; }

    #horse-names-container {
        padding-top: 10px;
        padding-bottom: 12px;
        margin-bottom: 14px;
    }
    #horse-names-container label {
        margin-bottom: 5px;
        font-size: 0.95rem;
    }
    #horse-names-field {
        /* rows=3 대신 2줄 높이로 고정 (16px x 1.4 x 2줄 + 패딩 16 + 테두리 6) */
        height: 68px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    #horse-count-badge {
        width: 82px;
        height: 82px;
        margin-right: 14px;
        margin-bottom: -13px;
        font-size: 0.9rem;
    }
    #shuffle-button {
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 0.95rem;
    }
    #start-button {
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: clamp(1.3rem, 6vw, 1.75rem);
    }
}

/* --- 아주 좁은 폰(320px, iPhone SE 1세대) --- */
/* 이 폭에서는 English의 'Shuffle Horses'가 들어가지 못해 버튼 행이 두 줄로 줄바꿈되고
   (125px -> 171px) 그만큼 첫 화면이 넘친다. 줄바꿈을 막고 섞기 버튼을 양보하게 만든다. */
@media (max-width: 340px) {
    .setup-buttons-container {
        flex-wrap: nowrap;
        gap: 8px;
    }
    #shuffle-button {
        flex-shrink: 1;
        min-width: 0;
        padding: 8px 9px;
        font-size: 0.8rem;
        white-space: normal; /* 버튼 안에서 두 줄로 접히게 (행 자체가 접히는 것보다 낫다) */
    }
    #horse-names-container label {
        margin-bottom: 3px;
        font-size: 0.85rem;
    }
    #horse-count-badge {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        margin-bottom: -11px;
        font-size: 0.78rem;
    }
}

/* --- 가로로 누운 폰: 세로를 반으로 접어 2단으로 --- */
/* 가로 모드는 예산이 337px(375px 높이)뿐인데 내용은 675px이라, 압축만으로는 못 들어간다.
   글자를 더 줄이면 POP 간판의 힘이 죽으므로 활자 크기는 지키고 배치를 바꾼다:
   상단 띠는 전체 폭, 그 아래 왼쪽에 타이틀 / 오른쪽에 입력 + 버튼. */
@media (orientation: landscape) and (max-height: 520px) {
    #setup-area {
        width: 94%;
        max-width: 700px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-areas:
            "tape  tape"
            "title form"
            "title buttons";
        column-gap: 20px;
        align-content: start;
    }
    #setup-tape { grid-area: tape; margin-bottom: 8px; }
    #modal-main-title {
        grid-area: title;
        margin-bottom: 0;
        align-self: start;
    }
    #horse-names-container {
        grid-area: form;
        margin-bottom: 10px;
    }
    .setup-buttons-container {
        grid-area: buttons;
        /* 오른쪽 단은 폭이 절반이라 English 라벨이 행을 두 줄로 밀어낸다 — 가장 큰 낭비다 */
        flex-wrap: nowrap;
        gap: 10px;
    }
    #shuffle-button {
        flex-shrink: 1;
        min-width: 0;
        padding: 7px 10px;
        font-size: 0.85rem;
        white-space: normal;
    }
    /* 세로가 없으니 히어로는 '넓고 낮게' 가져간다 — 폭은 그대로 쓰고 높이만 줄인다 */
    #horse-count-badge {
        width: 62px;
        height: 62px;
        margin-right: 8px;
        margin-bottom: -10px;
        font-size: 0.72rem;
    }
    #start-button {
        padding: 10px 18px 10px 22px;
        font-size: clamp(1.1rem, 3.4vw, 1.5rem);
    }
    #horse-names-container {
        padding-top: 8px;
        padding-bottom: 10px;
    }
    #horse-names-container label {
        margin-bottom: 3px;
        font-size: 0.85rem;
    }
    /* 보조 손글씨 줄은 가로 모드에서만 생략한다 (타이틀·질문·띠는 그대로 남는다) */
    #modal-main-title .pop-hand { display: none; }
}

/* 가로인데 높이까지 아주 낮은 구형 폰(568x320 등) — 한 단계 더 조인다 */
@media (orientation: landscape) and (max-height: 360px) {
    #setup-area {
        padding-top: 12px;
        padding-bottom: 14px;
    }
    #setup-tape {
        margin-bottom: 6px;
        font-size: 0.85rem;
    }
    #horse-count-badge {
        width: 54px;
        height: 54px;
        margin-bottom: -9px;
        font-size: 0.66rem;
    }
    #start-button {
        padding: 8px 14px 8px 18px;
        font-size: 1.15rem;
    }
    #modal-main-title .pop-brand { display: none; }
    /* 320px 높이 가로 모드는 예산이 288px뿐이다. 입력칸을 딱 한 줄로 줄여 여유를 만든다.
       46px처럼 어중간하게 두면 둘째 줄이 반쯤 잘려 보이니 한 줄에 정확히 맞춘다
       (16px x 1.4 + 패딩 12 + 테두리 6 = 41px). 글씨 크기는 16px 그대로 —
       그 아래로 내리면 iOS가 초점 시 화면을 확대해버린다. */
    #horse-names-field {
        height: 41px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* 모션을 줄이겠다고 한 사람에게는 진입 연출을 생략한다 */
@media (prefers-reduced-motion: reduce) {
    #setup-tape,
    #modal-main-title,
    #horse-names-container,
    .setup-buttons-container,
    #horse-count-badge {
        animation: none;
    }
    #shuffle-button,
    #start-button,
    #fullscreen-button,
    #lang-button,
    #bottom-button-container button {
        transition: none;
    }
}

/* --- 전체화면 시 적용될 스타일 --- */
#game-area:-webkit-full-screen { background-color: var(--donki-navy); width: 100% !important; height: 100% !important; max-width: none; max-height: none; margin: 0; border: none; }
#game-area:-moz-full-screen { background-color: var(--donki-navy); width: 100% !important; height: 100% !important; max-width: none; max-height: none; margin: 0; border: none; }
#game-area:-ms-fullscreen { background-color: var(--donki-navy); width: 100% !important; height: 100% !important; max-width: none; max-height: none; margin: 0; border: none; }

/* 루트 요소 전체화면 스타일 */
:root:fullscreen { background-color: var(--donki-navy); }
:root:-webkit-full-screen { background-color: var(--donki-navy); }
:root:-moz-full-screen { background-color: var(--donki-navy); }
:root:-ms-fullscreen { background-color: var(--donki-navy); }