/* 루프 가디언 — 화면 레이아웃. 캔버스는 900x540 내부 해상도, CSS 로 반응형 축소. */
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; height: 100%;
    background: #0b1222;
    font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    color: #eef2fb;
    overflow: hidden;
}
body { display: flex; flex-direction: column; align-items: center; justify-content: center; }

#stage {
    position: relative;
    width: min(96vw, 900px);
    max-height: calc(100vh - 76px);
    aspect-ratio: 900 / 540;
}
#game {
    display: block; width: 100%; height: 100%;
    background: #0f1830; border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
    touch-action: none;
}

/* 전투 조작 UI — 터치 목표 44 CSS px 이상.
   캔버스 안에 그리면 표시 배율(360px 기기에서 0.384)만큼 같이 줄어들므로 DOM 으로 뺐다. */
.hud-btn {
    position: absolute; top: 10px; right: 10px;
    min-width: 44px; min-height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; letter-spacing: 2px; font-family: inherit;
    color: #e7edf7; background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22); border-radius: 10px; cursor: pointer;
}
.hud-btn:active { background: rgba(255,255,255,0.3); }

.wave-btn {
    position: absolute; left: 50%; top: 23%; transform: translate(-50%, -50%);
    min-height: 46px; padding: 11px 26px; white-space: nowrap;
    font-size: 16px; font-weight: 700; font-family: inherit;
    color: #10233a; background: linear-gradient(180deg, #ffe08a, #ffc94d);
    border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 0 #c99a2e;
}
.wave-btn:active { box-shadow: 0 1px 0 #c99a2e; }

.unit-menu {
    position: absolute; transform: translate(-50%, -100%);
    padding: 9px; border-radius: 12px; text-align: center;
    background: rgba(20,28,46,0.96); border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.unit-menu.below { transform: translate(-50%, 0); }
.unit-menu__title { margin: 0 0 7px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.unit-menu__row { display: flex; gap: 8px; }
.unit-btn {
    min-width: 78px; min-height: 44px; padding: 6px 10px;
    font-size: 13px; font-weight: 700; font-family: inherit; line-height: 1.35;
    border: none; border-radius: 9px; cursor: pointer;
}
.unit-btn--up { color: #0d1a10; background: rgba(120,200,110,0.92); }
.unit-btn--up:disabled { background: rgba(130,130,130,0.45); color: rgba(255,255,255,0.65); cursor: default; }
.unit-btn--sell { color: #2a1c08; background: rgba(230,170,90,0.92); }

.btn-col { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 10px; }
.btn-col .btn-retro, .btn-col .btn-sub { min-width: 210px; min-height: 46px; margin-top: 0; }

.hud-btn.hidden, .wave-btn.hidden, .unit-menu.hidden { display: none; }

/* 오버레이 (타이틀 / 결과) */
.overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 10px; padding: 24px;
    background: rgba(10, 16, 34, 0.82);
    border-radius: 14px;
    backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }
.overlay__eyebrow { margin: 0; letter-spacing: 3px; font-size: 12px; color: #8ea2c8; }
.overlay__title { margin: 4px 0 0; font-size: clamp(32px, 6vw, 52px); font-weight: 800; }
.overlay__title .pop { color: #ffd76a; }
.overlay__sub { margin: 0; letter-spacing: 4px; color: #9fb0d4; font-size: 13px; }
.overlay__desc { margin: 10px 0 0; line-height: 1.6; color: #cdd7 ; color: #cdd7ee; max-width: 460px; font-size: 15px; }
.overlay__hint { margin: 4px 0 0; color: #8ea2c8; font-size: 13px; line-height: 1.6; }
.overlay__best { margin: 6px 0 0; color: #ffd76a; font-weight: 700; min-height: 20px; }

.overlay__gameover { margin: 0; font-size: clamp(26px, 5vw, 40px); font-weight: 800; }
.overlay__gameover-sub { margin: 2px 0 6px; color: #b9c4de; }
.overlay__cond { margin: 0 0 4px; color: #9fb0d4; font-size: 13px; line-height: 1.7; }
.overlay__cond .cond { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.overlay__cond .cond.on { background: rgba(124, 209, 124, 0.22); color: #8cdc78; }
.overlay__cond .cond.off { background: rgba(224, 106, 106, 0.20); color: #ff8a8a; }
.stars { display: flex; gap: 6px; font-size: 40px; }
.stars .star { color: rgba(255,255,255,0.18); }
.stars .star.on { color: #ffd76a; text-shadow: 0 0 14px rgba(255,215,106,0.6); }

.btn-retro {
    margin-top: 12px; padding: 13px 30px;
    font-size: 17px; font-weight: 700; font-family: inherit;
    color: #10233a; background: linear-gradient(180deg, #ffe08a, #ffc94d);
    border: none; border-radius: 10px; cursor: pointer;
    box-shadow: 0 6px 0 #c99a2e; transition: transform .05s, box-shadow .05s;
}
.btn-retro:active { transform: translateY(4px); box-shadow: 0 2px 0 #c99a2e; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.btn-sub {
    padding: 11px 20px; font-size: 15px; font-weight: 600; font-family: inherit;
    color: #eef2fb; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px; cursor: pointer;
}
.btn-sub:active { transform: translateY(2px); }
.overlay__backlink { margin: 10px 0 0; }
.overlay__backlink a { color: #9fb0d4; font-size: 14px; text-decoration: underline; }

/* 하단 배너 광고 바 — 슬롯 미설정이어도 공간은 확보 */
#ad-bar {
    margin-top: 14px; width: min(96vw, 900px); height: 62px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04); border-radius: 10px;
}
.ad-placeholder { color: rgba(255,255,255,0.25); font-size: 12px; letter-spacing: 2px; }
body.has-ad #ad-bar { background: transparent; }

/* ── 스테이지 선택 ────────────────────────────────────────────────────────
   **가로 폰이 기준이다.** 844x390 에서 스크롤 없이 들어가야 한다 — 납품 시안은
   세로 693px 이라 스크롤이 생겼다. 그래서 높이를 쓰는 값은 전부 vh/clamp 로 잡고,
   격자는 5열 고정(줄바꿈 2줄)으로 둔다. */
.overlay--select {
    display: flex; flex-direction: column; gap: 0;
    padding: clamp(6px, 1.6vh, 14px) clamp(8px, 2vw, 20px);
    justify-content: flex-start; align-items: stretch;
    background: #0b1524;
    background-size: cover; background-position: center;
    text-align: left;
}
.sel__bar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sel__home {
    background: rgba(255, 255, 255, .1); color: #dfe7f5; border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px; padding: 6px 12px; font: inherit; font-size: clamp(11px, 1.5vh, 14px); cursor: pointer;
}
.sel__tabs { display: flex; gap: 6px; margin: 0 auto; }
.sel__tab {
    background: rgba(255, 255, 255, .08); color: #b9c6dc; border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px; padding: 6px 14px; font: inherit; font-size: clamp(11px, 1.5vh, 14px); cursor: pointer;
}
.sel__tab[aria-pressed="true"] { background: rgba(140, 220, 120, .22); color: #fff; border-color: rgba(140, 220, 120, .7); }
.sel__tab[data-locked="1"] { opacity: .5; }
.sel__total { color: #ffd76a; font-size: clamp(11px, 1.6vh, 15px); margin: 0; white-space: nowrap; }

/* 본문을 화면 높이까지 늘이지 **않는다**. 늘이면 오른쪽 상세 패널만 홀로 길어지고,
   3성 조건 블록의 margin-top:auto 가 그 높이를 전부 빈칸으로 밀어낸다(900x620 에서 275px).
   0 1 auto 로 두면 패널 높이 = 왼쪽 칸 높이라서 출전 버튼이 격자 아래끝과 나란히 선다.
   남는 높이는 margin:auto 가 위아래로 반씩 나눠 배경 그림이 액자처럼 두르게 한다.
   자리가 모자라면 auto 는 0 으로 줄어드니 좁은 창에서 위쪽이 잘리지 않는다. */
.sel__body { display: flex; gap: clamp(8px, 1.6vw, 18px); flex: 0 1 auto; min-height: 0; margin: auto 0; padding-top: clamp(4px, 1vh, 10px); }
.sel__left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sel__chapter-no { color: #8fd8ff; font-size: clamp(9px, 1.3vh, 12px); letter-spacing: .12em; margin: 0; }
.sel__chapter-name { color: #fff; font-size: clamp(15px, 3vh, 26px); margin: 0 0 2px; }
.sel__chapter-note { color: rgba(223, 231, 245, .75); font-size: clamp(9px, 1.4vh, 13px); margin: 0 0 clamp(4px, 1vh, 10px); }

.sel__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(4px, 1vh, 10px); }
.sel__card {
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px; color: #dfe7f5; font: inherit; cursor: pointer;
    padding: clamp(4px, 1vh, 10px) 4px; text-align: center; min-height: clamp(52px, 13.5vh, 120px);
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.sel__card[aria-pressed="true"] { border-color: #ffd76a; background: rgba(255, 215, 106, .16); }
.sel__card[data-locked="1"] { opacity: .45; }
.sel__card-state { font-size: clamp(8px, 1.1vh, 11px); color: rgba(223, 231, 245, .75); }
.sel__card-id { font-size: clamp(13px, 2.2vh, 20px); font-weight: 700; color: #fff; }
.sel__card-stars { font-size: clamp(9px, 1.3vh, 13px); letter-spacing: 1px; }
.sel__legend { color: rgba(223, 231, 245, .55); font-size: clamp(8px, 1.2vh, 11px); margin: clamp(3px, .8vh, 8px) 0 0; }

.sel__detail {
    flex: 0 0 clamp(150px, 26vw, 260px); background: rgba(6, 16, 27, .78);
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
    padding: clamp(6px, 1.4vh, 14px); display: flex; flex-direction: column; gap: 2px; min-height: 0;
}
.sel__d-id { color: rgba(223, 231, 245, .6); font-size: clamp(8px, 1.2vh, 11px); margin: 0; }
.sel__d-name { color: #fff; font-size: clamp(13px, 2.2vh, 19px); margin: 0 0 2px; }
.sel__d-stars { font-size: clamp(11px, 1.7vh, 16px); letter-spacing: 2px; margin-bottom: 2px; }
.sel__d-line { color: rgba(223, 231, 245, .85); font-size: clamp(8px, 1.3vh, 12px); margin: 0; }
.sel__d-hint { color: #8fd8ff; font-size: clamp(8px, 1.3vh, 12px); margin: 2px 0; }
.sel__d-hint:empty { display: none; }
.sel__d-cond { margin-top: auto; padding-top: clamp(6px, 1.2vh, 12px); border-top: 1px solid rgba(255, 255, 255, .12); }
.sel__d-cond-title { color: #ffd76a; font-size: clamp(8px, 1.2vh, 12px); margin: 0 0 1px; font-weight: 700; }
.sel__play { margin-top: clamp(4px, 1vh, 10px); padding: clamp(6px, 1.4vh, 12px); font-size: clamp(11px, 1.8vh, 16px); }
.sel__play[disabled] { opacity: .45; cursor: not-allowed; }
.sel__lock { color: #ffb0b0; font-size: clamp(8px, 1.2vh, 11px); margin: 3px 0 0; min-height: 1em; }

/* 설계 기준(844x390)보다 더 낮은 창에서는 1~2px 차이로 넘친다. 패널이 화면 높이가
   아니라 제 내용만큼만 높아지게 바꾼 뒤로는 여유가 없어졌다. 납품 시안도 같은 지점에서
   덜어낸다 — 글자 크기는 그대로 두고 설명 한 줄과 안쪽 여백만 깎는다. */
@media (max-height: 360px) {
    .sel__chapter-note { display: none; }
    .sel__detail { gap: 1px; padding: 6px 8px; }
    .sel__d-cond { padding-top: 4px; }
}

/* 타이틀 키아트. 글자·버튼은 이미지에 굽지 않고 DOM 으로 얹는다 — 그래야 모바일에서
   다시 배치할 수 있고 번역도 된다(납품 패키지도 같은 원칙으로 만들어졌다). */
#ui-title {
    background-image: linear-gradient(rgba(6, 16, 27, .35), rgba(6, 16, 27, .78)),
        url('/games/loopguardian/assets/menu_title.webp');
    background-size: cover; background-position: center;
}