/* =========================================================
   오디션 미니게임 화면 + 오디션별 시각 효과
   fx-vocal / fx-drama / fx-dance / fx-variety
   ========================================================= */

.stage { position: relative; }

.audition {
    --fx-a: var(--accent);
    --fx-b: var(--accent2);
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--fx-a) 28%, transparent), transparent 70%), var(--bg);
}
.audition.hidden { display: none; }

.audition-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.audition-fx span { position: absolute; display: block; }

/* 패널 */
.audition-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--fx-a);
    border-radius: 14px;
    background: rgba(20, 24, 36, 0.88);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 34px color-mix(in srgb, var(--fx-a) 35%, transparent);
}
.audition-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.audition-head b { font-size: 1.05rem; font-weight: 900; color: #fff; }
.audition-head span { flex-shrink: 0; font-size: 0.75rem; font-weight: 700; color: var(--fx-a); }

.audition-score { margin-bottom: 12px; font-size: 0.75rem; color: var(--dim); }
.audition-score-bar {
    height: 7px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--panel2);
}
.audition-score-bar i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--fx-a), var(--fx-b));
    transition: width 0.35s ease;
}
.audition-score-bar.is-rival i { background: var(--dim); }
.audition-score.hidden { display: none; }

.audition-prompt {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg2);
    font-size: 0.88rem;
    color: var(--text);
}
.audition-result {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: pre-wrap;
}
.audition-result.is-success { color: var(--good); }
.audition-result.is-fail { color: var(--bad); }

.audition-choices { display: flex; flex-direction: column; gap: 8px; }
.audition-choice {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.audition-choice:hover { border-color: var(--fx-a); transform: translateY(-1px); }
.audition-choice-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
}
.audition-choice-head b { font-weight: 800; color: #fff; }
.audition-choice-head em {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    color: var(--fx-a);
}
.audition-choice small {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--dim);
}

/* ---------- 보컬: 이퀄라이저 + 음파 링 ---------- */
.fx-vocal { --fx-a: var(--vo); --fx-b: #f472b6; }
.fx-vocal .audition-fx span {
    bottom: 0;
    left: calc(var(--i) * 4.1666%);
    width: 3.2%;
    height: 45%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(0deg, var(--fx-a), transparent);
    opacity: 0.55;
    transform-origin: bottom;
    animation: fx-eq 0.9s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.17s);
}
.fx-vocal .audition-fx::before,
.fx-vocal .audition-fx::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    border: 2px solid var(--fx-a);
    border-radius: 50%;
    animation: fx-ring 2.6s ease-out infinite;
}
.fx-vocal .audition-fx::after { animation-delay: -1.3s; }

@keyframes fx-eq {
    from { transform: scaleY(0.12); }
    to { transform: scaleY(1); }
}
@keyframes fx-ring {
    from { opacity: 0.6; transform: scale(0.4); }
    to { opacity: 0; transform: scale(3); }
}

/* ---------- 드라마: 시네마 바 + 스포트라이트 ---------- */
.fx-drama { --fx-a: #fbbf24; --fx-b: #f59e0b; background: #06070b; }
.fx-drama .audition-fx::before,
.fx-drama .audition-fx::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: 9%;
    background: #000;
    animation: fx-letterbox 0.8s ease-out both;
}
.fx-drama .audition-fx::before { top: 0; transform-origin: top; }
.fx-drama .audition-fx::after { bottom: 0; transform-origin: bottom; }
.fx-drama .audition-fx span { display: none; }
.fx-drama .audition-fx span:nth-child(-n+3) {
    display: block;
    top: -20%;
    left: calc(14% + var(--i) * 30%);
    width: 22%;
    height: 150%;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.4), transparent 78%);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    transform-origin: top center;
    animation: fx-spot 5s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -1.7s);
}

@keyframes fx-letterbox {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes fx-spot {
    from { transform: rotate(-16deg); }
    to { transform: rotate(16deg); }
}

/* ---------- 댄스: 레이저 + 움직이는 바닥 그리드 ---------- */
.fx-dance { --fx-a: var(--da); --fx-b: #818cf8; }
.fx-dance .audition-fx::before {
    content: '';
    position: absolute;
    right: -30%;
    bottom: -8%;
    left: -30%;
    height: 48%;
    background-image:
        linear-gradient(var(--fx-a) 1px, transparent 1px),
        linear-gradient(90deg, var(--fx-a) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: 0.35;
    transform: perspective(320px) rotateX(62deg);
    transform-origin: bottom;
    animation: fx-floor 0.9s linear infinite;
}
.fx-dance .audition-fx span { display: none; }
.fx-dance .audition-fx span:nth-child(-n+8) {
    display: block;
    top: -10%;
    left: calc(6% + var(--i) * 12.5%);
    width: 3px;
    height: 130%;
    background: linear-gradient(180deg, var(--fx-a), transparent 85%);
    box-shadow: 0 0 12px var(--fx-a);
    opacity: 0.7;
    transform-origin: top center;
    animation: fx-laser 1.5s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.37s);
}

@keyframes fx-floor {
    from { background-position: 0 0; }
    to { background-position: 0 46px; }
}
@keyframes fx-laser {
    from { transform: rotate(-30deg); }
    to { transform: rotate(30deg); }
}

/* ---------- 예능: 색종이 + 스튜디오 조명 ---------- */
.fx-variety { --fx-a: #fb923c; --fx-b: #facc15; }
.fx-variety .audition-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(250, 204, 21, 0.3), transparent 26%),
        radial-gradient(circle at 82% 26%, rgba(236, 72, 153, 0.28), transparent 26%),
        radial-gradient(circle at 50% 82%, rgba(56, 189, 248, 0.22), transparent 30%);
    animation: fx-studio 2.2s ease-in-out infinite alternate;
}
.fx-variety .audition-fx span {
    top: -6%;
    left: calc(var(--i) * 4.1666% + 1%);
    width: 9px;
    height: 14px;
    border-radius: 2px;
    background: #facc15;
    animation: fx-confetti 4.2s linear infinite;
    animation-delay: calc(var(--i) * -0.61s);
}
.fx-variety .audition-fx span:nth-child(4n+1) { background: #fb7185; }
.fx-variety .audition-fx span:nth-child(4n+2) { background: #38bdf8; }
.fx-variety .audition-fx span:nth-child(4n+3) { background: #34d399; }

@keyframes fx-studio {
    from { opacity: 0.45; }
    to { opacity: 1; }
}
@keyframes fx-confetti {
    from { transform: translateY(0) rotate(0deg); opacity: 1; }
    to { transform: translateY(115vh) rotate(720deg); opacity: 0.2; }
}

/* ---------- 선택 결과 효과 ---------- */
.audition.hit-good .audition-panel { animation: fx-pop 0.35s ease; }
.audition.hit-great .audition-panel { animation: fx-pop 0.5s ease, fx-glow 0.7s ease; }
.audition.hit-bad .audition-panel { animation: fx-shake 0.42s ease; border-color: var(--bad); }
.audition.hit-bad .audition-fx { animation: fx-dim 0.6s ease; }

@keyframes fx-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.025); }
    100% { transform: scale(1); }
}
@keyframes fx-glow {
    0%, 100% { box-shadow: 0 0 34px color-mix(in srgb, var(--fx-a) 35%, transparent); }
    40% { box-shadow: 0 0 70px var(--fx-a); }
}
@keyframes fx-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}
@keyframes fx-dim {
    0%, 100% { opacity: 1; }
    35% { opacity: 0.15; }
}

/* ---------- 최종 결과 ---------- */
.audition.finale-pass .audition-panel {
    border-color: #facc15;
    animation: fx-pop 0.6s ease, fx-finale 1.8s ease-in-out infinite alternate;
}
.audition.finale-fail .audition-fx {
    filter: grayscale(1);
    opacity: 0.25;
    transition: opacity 0.6s ease, filter 0.6s ease;
}
.audition.finale-fail .audition-panel { border-color: var(--border); box-shadow: none; }

@keyframes fx-finale {
    from { box-shadow: 0 0 26px rgba(250, 204, 21, 0.35); }
    to { box-shadow: 0 0 70px rgba(250, 204, 21, 0.85); }
}

.ctl-right { display: flex; align-items: center; gap: 8px; }

/* 아이돌 테마: 색상 변수는 applyIdolTheme이 설정, 아래는 고정 색상 클래스를 테마에 맞춤 */
html[data-idol-theme] .text-pink-400 { color: var(--accent); }
html[data-idol-theme] .border-pink-500 { border-color: var(--accent); }
html[data-idol-theme] .border-pink-500\/40 { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
html[data-idol-theme] .bg-pink-500\/20 { background-color: color-mix(in srgb, var(--accent) 20%, transparent); }
html[data-idol-theme] .bg-\[\#0e111a\] { background-color: var(--bg2); }
html[data-idol-theme] .bg-\[\#090b10\] { background-color: var(--bg); }
html[data-idol-theme] .bg-\[\#141824\] { background-color: var(--panel); }
html[data-idol-theme] .border-slate-700,
html[data-idol-theme] .border-slate-800 { border-color: var(--border); }

/* 스케줄 창: 5칸이어도 글자가 세로로 깨지지 않게 함 */
#modalSelectedSlots > div { padding-left: 2px; padding-right: 2px; font-size: 0.68rem; word-break: keep-all; }
#scheduleModal .ui-btn-secondary { flex-shrink: 0; white-space: nowrap; }

/* 글씨 크기 설정: rem 기준 전체 비율을 조정 */
html[data-font-size="small"] { font-size: 87.5%; }
html[data-font-size="normal"] { font-size: 100%; }
html[data-font-size="large"] { font-size: 112.5%; }

/* 업적 목록 */
.achievement-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.achievement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg2);
}
.achievement-item.is-unlocked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); }
.achievement-icon { flex-shrink: 0; font-size: 1.6rem; line-height: 1; }
.achievement-item:not(.is-unlocked) .achievement-icon { opacity: 0.55; }
.achievement-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.achievement-body b { font-size: 0.88rem; font-weight: 800; color: #fff; }
.achievement-item:not(.is-unlocked) .achievement-body b { color: var(--dim); }
.achievement-body small { font-size: 0.72rem; color: var(--dim); }
.achievement-item.is-unlocked .achievement-status { color: var(--accent); font-weight: 700; }

.achievement-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 60;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--panel);
    box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 50%, transparent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: fx-toast 0.35s ease;
}
.achievement-toast.hidden { display: none; }

@keyframes fx-toast {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* 라이벌 박스 */
.rival-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: default;
}
.rival-title { font-size: 0.78rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.rival-summary { display: none; min-width: 0; overflow: hidden; font-size: 0.72rem; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.rival-chevron { display: none; margin-left: auto; font-size: 0.7rem; color: var(--dim); transition: transform 0.2s ease; }
.rival-body { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rival-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rival-info b { font-size: 0.9rem; font-weight: 800; color: #fff; }
.rival-info small { font-size: 0.72rem; color: var(--dim); }
.rival-info .rival-remain { color: var(--accent); font-weight: 700; }
#rivalCardAvatar { font-size: 1.2rem; color: var(--dim); }

/* 좁은 화면: 기본은 한 줄 요약, 눌러서 펼침 */
@media (max-width: 820px) {
    .rival-card { padding-top: 6px; border-top: 1px solid var(--border); border-radius: 0; }
    .rival-head { min-height: 28px; cursor: pointer; }
    .rival-summary { display: block; }
    .rival-chevron { display: block; }
    .rival-body { display: none; margin-top: 6px; }
    .rival-card.is-open .rival-body { display: flex; }
    .rival-card.is-open .rival-chevron { transform: rotate(180deg); }
    .rival-card.is-open .rival-summary { display: none; }
}

/* 메뉴·설정 창 */
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-item { width: 100%; padding-top: 0.7rem; padding-bottom: 0.7rem; text-align: left; }
.font-size-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.font-size-btn { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.font-size-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; }

/* 상단바: 주차·시간과 개월 표시가 좁은 화면에서 세로로 깨지지 않게 함 */
.age { white-space: nowrap; }

/* ---------- 모바일 ---------- */
@media (max-width: 520px) {
    .topbar {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "age bar"
            "controls controls"
            "hint hint";
    }
    /* 일시정지 왼쪽, 배속 가운데, 저장·다시하기 오른쪽 */
    .topbar .controls {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 4px;
    }
    .ctl-actions .btn-pause { justify-self: start; }
    .ctl-actions .ctl-right { justify-self: end; gap: 4px; }
    .ctl-actions .ui-btn-secondary { padding: 6px 9px; }
    .ctl-actions .speeds button { padding: 5px 4px; }
}

/* 상단 버튼 글자가 줄바꿈되지 않게 함 */
.ctl-actions .ui-btn-secondary { white-space: nowrap; }

/* 창이 줄어들면 상단 버튼은 아이콘만 표시 */
@media (max-width: 1100px) {
    .ctl-actions .bt { display: none; }
    .ctl-actions .bs { display: inline; }
}

@media (max-width: 820px) {
    .audition { padding: 8px; }
    .audition-panel { padding: 12px; }
    .audition-prompt { margin-bottom: 8px; padding: 9px; font-size: 0.8rem; }
    .audition-choices { gap: 6px; }
    .audition-choice { padding: 8px 10px; }
}

/* 움직임 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .audition-fx span,
    .audition-fx::before,
    .audition-fx::after,
    .audition .audition-panel,
    .audition .audition-fx {
        animation: none !important;
    }
}