/* ══════════════════════════════════════════════════════════
   레테의 샘 — style.css  (드롭인 교체본)
   · 게임 화면(#game-screen) 규칙은 기존과 동일하게 유지
   · 타이틀 화면 규칙은 css/title-shared.css 로 이동 (색은 아래 :root 의 --title-* 변수로 지정)
   ══════════════════════════════════════════════════════════ */

:root {
  --text: #e8d9b5;
  --accent: #7fe3d8;        /* 달빛 청록 (인게임과 통일) */
  --gold: #c8aa5a;          /* 각인의 샘 금빛 */
  --panel: rgba(10, 8, 25, 0.88);
  --border: rgba(170, 205, 220, 0.28);
  --hover: rgba(20, 40, 52, 0.8);
  --settings-label: #c9d8e2;
  --control-text: #eaf4f7;
  --muted-text: #c2d4dd;
  --soft-text: #8ba4b1;
  --faint-text: #7f97a4;
  --heading: #eef7f4;
  --heading-alt: #eaf4f7;
  --line-soft: rgba(170,205,220,.14);
  --pip-off: rgba(150,180,195,.18);
  --confirm-accent: var(--gold);
  --casting-result-accent: #cbb985;

  /* ── 타이틀 공유 CSS(css/title-shared.css)가 쓰는 색 ── */
  --title-accent-rgb: 127, 227, 216;
  --title-logo-glow-rgb: 90, 205, 205;
  --title-shade-rgb: 4, 8, 14;
  --title-panel-rgb: 9, 22, 29;
  --title-panel-hover-rgb: 18, 50, 56;
  --title-line-rgb: 170, 205, 220;
  --title-glow-a: rgba(40, 64, 92, .35);
  --title-glow-b: rgba(36, 74, 82, .28);
  --title-moon: rgba(150, 205, 235, .22);
  --title-spark: rgba(190, 235, 240, .9);
  --title-spark-glow: rgba(150, 220, 230, .9);
  --title-logo: #eaf6f4;
  --title-sub: #a9c6d2;
  --title-eyebrow: #8fb7c4;
  --title-tool-text: #dcecf1;
  --title-menu-text: #dfeaf0;
  --title-tool-border: rgba(127, 227, 216, .28);
  --title-primary-border: rgba(127, 227, 216, .58);
  --title-secondary-border: rgba(170, 205, 220, .3);
}

/* ── 키프레임 ── */
@keyframes floatSpk { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes fadeUp { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes plateIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
@keyframes chevBob { 0%,100% { transform: translateY(0); opacity:.5; } 50% { transform: translateY(5px); opacity:1; } }
@keyframes ringSpin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes ringSpinR { from { transform: translate(-50%,-50%) rotate(360deg); } to { transform: translate(-50%,-50%) rotate(0); } }
@keyframes imprintRing { 0% { opacity:.7; transform: translate(-50%,-50%) scale(.3); } 100% { opacity:0; transform: translate(-50%,-50%) scale(2.4); } }
@keyframes imprintSpark { 0% { opacity:0; transform: translate(0,0) scale(.4); } 20% { opacity:1; } 100% { opacity:0; transform: translate(var(--dx), var(--dy)) scale(1); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(150,195,215,.28); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

body {
  background: #05080c;
  color: #e8d9b5;
  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── 모달 (설정 / 제작진) ── */
.modal-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,14,.72); backdrop-filter: blur(3px); animation: fadeIn .25s ease both; }
.modal-card { width: min(460px, 92vw); padding: 26px 30px 30px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,28,38,.94), rgba(9,18,26,.96));
  border: 1px solid rgba(170,205,220,.34); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 50px rgba(90,205,205,.14);
  animation: fadeUp .3s ease both; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.modal-title { font-family: 'Gowun Batang', serif; font-size: 22px; font-weight: 700; color: #eaf4f7; letter-spacing: .1em; }
.modal-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(170,205,220,.3);
  background: transparent; color: #9fb3c0; cursor: pointer; font-size: 15px; }
.setting-row { margin-bottom: 18px; }
.setting-row .sr-head { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 13px; color: var(--settings-label); letter-spacing: .04em; }
.setting-row .sr-val { color: var(--accent); font-variant-numeric: tabular-nums; }
.setting-row input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.modal-save { width: 100%; margin-top: 22px; padding: 12px; border-radius: 12px; border: 1px solid rgba(170,205,220,.4);
  background: rgba(20,40,52,.7); color: #eaf4f7; font-family: 'Noto Sans KR'; font-size: 14px; letter-spacing: .06em; cursor: pointer; }
.settings-actions { display: grid; gap: 10px; }
.settings-actions .modal-save { margin-top: 0; }
#casting-shortcut-message { margin: 0 0 18px; color: #c2d4dd; font-size: 13.5px; line-height: 1.8; }

/* ═══════════ 게임 화면 (기존 유지) ═══════════ */
#game-screen { position: fixed; inset: 0; overflow: hidden; background: #05080c; }
#bg-layer { position: absolute; inset: 0; background-position: center; background-size: cover;
  animation: kenburns 26s ease-in-out infinite alternate; transition: background-image .5s ease; }
.grade-moonlight { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(90% 70% at 50% 8%, rgba(120,190,220,.1), transparent 60%); }
.grade-bottom { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,14,22,.22) 0%, transparent 40%, rgba(5,10,18,.4) 84%, rgba(4,8,14,.62) 100%); }
.grade-inset { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px 18px rgba(3,7,14,.45); }
#portrait-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#affinity-hud { position: absolute; top: 16px; left: 18px; z-index: 11; pointer-events: none; }
.affinity-pip { display: inline-block; }
.affinity-pip.affinity-gain { animation: affinityPipGain .7s ease-out both; }
.aff-pip--gain { display: inline-block; animation: affinityPipGain .7s ease-out both; }
@keyframes affinityPipGain {
  0% { transform: scale(1); }
  38% { transform: scale(1.8); filter: brightness(1.5); }
  100% { transform: scale(1); }
}
/* 선택지(10) 위에는 호감도 HUD(11), 설정 모달(400) 아래에는 게임 내 버튼(9)을 둔다. */
#btn-ingame-settings, #btn-ingame-home { position: absolute; top: 16px; right: 18px; z-index: 9; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(12,24,34,.72); border: 1px solid rgba(170,205,220,.4);
  color: var(--accent); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: background .18s ease, box-shadow .18s ease; }
#btn-ingame-settings:hover, #btn-ingame-home:hover { background: rgba(22,44,56,.85); box-shadow: 0 0 18px rgba(120,210,205,.35); }
#btn-ingame-home { right: 64px; }
#btn-casting-shortcut { position: absolute; top: 16px; right: 110px; z-index: 9; height: 38px; padding: 0 13px;
  display: flex; align-items: center; gap: 7px; border-radius: 19px; border: 1px solid rgba(127,227,216,.5);
  background: rgba(12,24,34,.78); color: var(--accent); font-family: 'Noto Sans KR', sans-serif; font-size: 12px;
  cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
#btn-casting-shortcut:hover { background: rgba(22,44,56,.88); box-shadow: 0 0 18px rgba(120,210,205,.35); }
#btn-casting-shortcut svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 480px) {
  #btn-casting-shortcut { padding: 0 8px; font-size: 11px; }
}
#dialogue-wrap { position: absolute; left: 5%; right: 5%; bottom: 26px; z-index: 6; display: flex; flex-direction: column;
  align-items: flex-start; animation: fadeUp .35s ease both; pointer-events: none; }
#name-plate { align-self: flex-start; display: flex; align-items: baseline; gap: 10px; padding: 7px 22px;
  margin-bottom: -2px; margin-left: 10px; background: linear-gradient(180deg, rgba(18,34,44,.96), rgba(11,22,30,.96));
  border: 1px solid rgba(170,205,220,.45); border-bottom: none; border-radius: 13px 13px 4px 4px;
  animation: plateIn .35s ease both; box-shadow: 0 -3px 20px rgba(127,227,216,.18); }
#char-name { font-family: 'Gowun Batang', serif; font-weight: 700; font-size: 18px; letter-spacing: .06em; }
#char-role { font-size: 11px; color: #9fb3c0; letter-spacing: .08em; }
#dialogue-box { width: 100%; position: relative; pointer-events: auto; cursor: pointer; padding: 22px 30px 26px;
  background: linear-gradient(180deg, rgba(15,28,38,.82), rgba(9,18,26,.9)); border: 1px solid rgba(170,205,220,.4);
  border-radius: 18px; box-shadow: 0 0 0 1px rgba(120,225,215,.1) inset, 0 18px 50px rgba(0,0,0,.55), 0 0 44px rgba(90,205,205,.14);
  backdrop-filter: blur(9px); }
#dialogue-text { margin: 0; font-size: 18px; line-height: 1.9; color: #e6eef4; letter-spacing: .01em; min-height: 1.9em; }
#dialogue-text.narrator { font-style: italic; color: #b0c8d8; }
#btn-advance { position: absolute; bottom: 14px; right: 24px; background: transparent; border: none; color: var(--accent);
  font-size: 16px; cursor: pointer; animation: chevBob 1.4s ease-in-out infinite; }
#choice-box { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; background: radial-gradient(60% 60% at 50% 55%, rgba(5,10,18,.5), rgba(5,10,18,.72));
  animation: fadeUp .3s ease both; pointer-events: auto; }
#choice-prompt { font-family: 'Gowun Batang', serif; font-size: 16px; color: #c9d8e2; margin: 0 0 6px; letter-spacing: .03em;
  text-shadow: 0 2px 10px rgba(0,0,0,.6); white-space: pre-line; }
.choice-btn { display: flex; align-items: center; gap: 12px; width: 450px; padding: 14px 22px; background: rgba(12,24,34,.66);
  border: 1px solid rgba(170,205,220,.32); border-radius: 14px; color: #dfeaf0; font-family: 'Noto Sans KR', sans-serif;
  font-size: 15.5px; cursor: pointer; transition: all .18s ease; backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.3); text-align: left; }
.choice-btn:hover { background: rgba(22,44,56,.82); border-color: var(--accent); color: #fff; box-shadow: 0 0 28px rgba(120,210,205,.3); transform: translateX(5px); }
.choice-orn { color: var(--accent); font-size: 12px; text-shadow: 0 0 8px var(--accent); flex-shrink: 0; }
#secret-box { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,14,.62); cursor: pointer; animation: fadeUp .3s ease both; }
.secret-inner { width: 560px; padding: 28px 34px; background: linear-gradient(180deg, rgba(14,22,32,.86), rgba(9,15,24,.92));
  border: 1px solid rgba(150,195,215,.34); border-radius: 18px; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 50px rgba(90,205,205,.18); }
.secret-label { font-size: 11px; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; }
#secret-text { font-family: 'Gowun Batang', serif; font-style: italic; font-size: 18px; line-height: 1.85; color: #e9e2f4; margin: 8px 0 0; }
.secret-close-hint { align-self: flex-end; margin-top: 12px; font-size: 12px; color: #9fb3c0; animation: chevBob 1.4s ease-in-out infinite; }

/* ═══════════ 캐스팅 화면 (신규 대시보드) ═══════════ */
#casting-screen { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: #05080c; overflow: hidden; animation: fadeIn .5s ease both; }
.casting-load-error { position: relative; z-index: 8; width: min(520px, 90vw); padding: 28px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 16px; background: rgba(8,18,26,.95); color: var(--heading-alt); }
.casting-load-error h2 { margin: 10px 0; }
.casting-load-error p { color: #b9cbd4; line-height: 1.7; }
.casting-error-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.casting-error-actions button { padding: 8px 13px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: #fff; cursor: pointer; }
.casting-error-box strong { color: #fff; }
.cast-bg { position: absolute; inset: 0; background-image: url('assets/lethe/backgrounds/casting_spring.png'); background-size: cover;
  background-position: center 60%; opacity: .5; }
.cast-ring { position: absolute; left: 50%; top: 56%; border-radius: 50%; pointer-events: none; }
.cast-ring.r1 { width: 760px; height: 760px; border: 1px solid rgba(200,170,90,.14); animation: ringSpin 90s linear infinite; }
.cast-ring.r2 { width: 560px; height: 560px; border: 1px dashed rgba(200,170,90,.12); animation: ringSpinR 60s linear infinite; }
.cast-grade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 100%, rgba(4,8,14,.35), rgba(4,8,14,.86)); }
.cast-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px 26px rgba(3,7,14,.6); }

.cast-back { border: 1px solid rgba(170,205,220,.28); background: rgba(9,17,25,.6); color: #b6c9d4; backdrop-filter: blur(6px); }
.cast-back:hover { background: rgba(20,40,52,.8); color: var(--heading-alt); }
.cast-title .ct-ko { font-family: 'Gowun Batang', serif; font-size: 24px; font-weight: 700; color: var(--heading); letter-spacing: .12em; text-shadow: 0 0 22px rgba(90,205,205,.3); }
.cast-title .ct-en { font-size: 12px; letter-spacing: .36em; color: var(--gold); text-transform: uppercase; }
.cast-subtitle { color: #9fb3c0; }
.cast-settings { background: rgba(12,24,34,.72); border: 1px solid rgba(170,205,220,.4); color: var(--accent); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.cast-settings:hover { background: rgba(22,44,56,.85); box-shadow: 0 0 18px rgba(120,210,205,.35); }
.cast-progress .cp-label { color: var(--soft-text); }
.cast-progress .cp-label b { color: var(--accent); }
.cast-pip { background: var(--pip-off); }
.cast-pip.done { background: linear-gradient(90deg, var(--pc, var(--accent)), var(--accent)); box-shadow: 0 0 8px var(--pc, var(--accent)); }


/* 로스터 */
.roster-kicker { color: var(--faint-text); }
.roster-card { border: 1px solid var(--line-soft); background: rgba(9,17,25,.4); }
.roster-card.active { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(90deg, rgba(18,36,46,.85), rgba(12,24,34,.6));
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 26px rgba(90,205,205,.1); }
.roster-avatar { background: #0b1420; border: 1.5px solid rgba(150,180,195,.25); }
.roster-card.active .roster-avatar { border-color: var(--cc); box-shadow: 0 0 14px var(--cc); }
.roster-name { color: var(--heading-alt); }
.roster-label { color: var(--cc); }
.roster-dot { background: rgba(150,180,195,.35); }
.roster-card.done .roster-dot { background: var(--cc); box-shadow: 0 0 8px var(--cc); }
.roster-status-text { color: var(--faint-text); }
.roster-card.done .roster-status-text { color: var(--cc); }
.cast-complete { border: 1px solid rgba(170,205,220,.16); background: rgba(9,17,25,.4); color: #5f7480; }
.cast-complete.ready { border-color: color-mix(in srgb, var(--confirm-accent) 60%, transparent); background: linear-gradient(180deg, rgba(48,40,20,.85), rgba(30,24,12,.85)); color: #f0e2b8; }
.cast-complete.ready:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--confirm-accent) 40%, transparent); }
.cast-complete-hint { color: var(--faint-text); }

/* 오디션 패널 */
.cast-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, rgba(12,24,33,.7), rgba(8,15,23,.78)); border: 1px solid rgba(170,205,220,.2);
  backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(90,205,205,.08); }
.persona-head { border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(16,30,40,.5), transparent); }
.persona-avatar { background: #0b1420; border: 1.5px solid var(--cc); box-shadow: 0 0 18px var(--cc); }
.persona-avatar .glyph { color: var(--cc); }
.persona-name { color: var(--heading); }
.persona-label { color: var(--cc); }
.persona-desc { color: var(--muted-text); }
.trait-chip { color: #dfeaf0; background: rgba(9,17,25,.6); border: 1px solid var(--cc); }
.persona-hint { color: var(--soft-text); }
.persona-hint b { color: var(--accent); }
.ref-line { border-bottom: 1px solid rgba(170,205,220,.1); }
.ref-tag { color: var(--soft-text); }
.ref-text { color: #dbe8ef; }

.cast-controls { border-bottom: 1px solid rgba(170,205,220,.1); }
.cast-tabs { background: rgba(9,17,25,.7); border: 1px solid rgba(170,205,220,.18); }
.cast-tab { border: none; background: transparent; color: #8ba0ad; }
.cast-tab.active { background: linear-gradient(180deg, rgba(30,56,64,.95), rgba(18,38,46,.95)); color: var(--heading-alt);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 33%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 20%, transparent); }
.gender-lock { color: var(--soft-text); background: rgba(9,17,25,.6); border: 1px solid var(--line-soft); }
.pace-chips { background: rgba(9,17,25,.7); border: 1px solid rgba(170,205,220,.16); }
.pace-chip { border: none; background: transparent; color: #8ba0ad; }
.pace-chip.active { background: rgba(30,56,64,.9); color: var(--heading-alt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 27%, transparent); }

.voice-sec-label.rec { color: var(--gold); }
.voice-sec-label.all { color: var(--soft-text); }
.voice-sec-label .sub { color: var(--faint-text); }
.voice-card { border: 1px solid rgba(170,205,220,.16); background: rgba(9,17,25,.5); }
.voice-card.expanded, .voice-card.playing { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: rgba(14,28,38,.7); }
.voice-default-badge { font-size: 10px; letter-spacing: .06em; color: #08181c; background: var(--accent); border-radius: 6px; padding: 2px 7px; font-weight: 700; }
.voice-playbtn { border: 1px solid rgba(170,205,220,.3); background: rgba(9,17,25,.7); color: #cfe0e8; }
.voice-card.playing .voice-playbtn { border-color: var(--accent); background: rgba(20,44,52,.9); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 33%, transparent); color: var(--accent); }
.voice-star { color: var(--gold); }
.voice-name { color: var(--heading); }
.voice-code { color: var(--faint-text); background: rgba(9,17,25,.7); border: 1px solid rgba(170,205,220,.12); }
.voice-meta { color: #9fb3c0; }
.voice-reason { color: var(--accent); }
.voice-tone { color: #9fb3c0; }
.voice-select { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: rgba(16,34,42,.7); color: #dff3f0; }
.voice-select:hover { background: linear-gradient(180deg, rgba(30,56,64,.95), rgba(18,38,46,.95)); border-color: var(--accent); color: #fff; box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 27%, transparent); }
.voice-detail-inner { background: rgba(6,12,18,.6); border: 1px solid rgba(170,205,220,.12); }
.detail-chip { color: #b6c9d4; background: rgba(9,17,25,.7); border: 1px solid rgba(170,205,220,.16); }
.voice-detail-desc { color: #b6c9d4; }
.voice-empty { color: var(--faint-text); }

/* 파형 */
.wave-bar { background: rgba(150,195,215,.3); }
.wave-bar.on { background: linear-gradient(180deg, #8ff0e6, #4bb6ad); }
.wave-status { color: var(--soft-text); }

/* 직접 디자인 */
.design-intro { color: var(--muted-text); }
.design-intro b { color: var(--accent); }
.design-hint { border: 1px dashed rgba(170,205,220,.3); background: rgba(9,17,25,.5); color: #a9c6d2; }
.design-hint:hover { border-color: var(--accent); color: var(--heading-alt); }
.design-textarea { background: rgba(6,12,18,.6); border: 1px solid rgba(170,205,220,.24); color: #e6eef4; }
.design-gen-btn { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(180deg, rgba(20,44,52,.85), rgba(14,30,40,.85)); color: #dff3f0; }
.design-gen-btn:hover { border-color: var(--accent); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 27%, transparent); }
.design-gen-btn:disabled { opacity: .7; }
.design-status { color: #9fb3c0; }
.design-preview { border: 1px solid rgba(200,170,90,.3); background: linear-gradient(180deg, rgba(16,30,40,.6), rgba(10,20,30,.7)); }
.design-preview-play { border: 1px solid rgba(200,170,90,.5); background: rgba(30,24,12,.7); color: #f0e2b8; }
.design-preview.playing .design-preview-play { border-color: var(--accent); background: rgba(20,44,52,.9); color: var(--accent); }
.design-preview-title { color: var(--heading); }
.design-preview-sub { color: var(--gold); }
.design-confirm { border: 1px solid color-mix(in srgb, var(--confirm-accent) 50%, transparent); background: linear-gradient(180deg, rgba(48,40,20,.8), rgba(30,24,12,.8)); color: #f0e2b8; }
.design-confirm:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--confirm-accent) 40%, transparent); }
.design-retry { border: 1px solid rgba(170,205,220,.3); background: rgba(12,24,34,.7); color: #dfeaf0; }
.design-retry:hover { border-color: var(--accent); }

/* 각인 스파클 fx */
.imprint-fx .fx-ring { border: 2px solid color-mix(in srgb, var(--confirm-accent) 70%, transparent); }
.imprint-fx .fx-spark { color: #e8cf87; text-shadow: 0 0 10px color-mix(in srgb, var(--confirm-accent) 80%, transparent); }

/* 완료 오버레이 */
.complete-overlay { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; background: radial-gradient(70% 70% at 50% 50%, rgba(5,10,18,.7), rgba(4,8,14,.92)); animation: fadeIn .5s ease both; }
.co-kicker { color: var(--gold); }
.co-title { color: var(--heading); text-shadow: 0 0 30px rgba(90,205,205,.35); }
.co-sub { color: var(--muted-text); }
.co-start { border: 1px solid color-mix(in srgb, var(--confirm-accent) 55%, transparent); background: linear-gradient(180deg, rgba(48,40,20,.8), rgba(30,24,12,.8)); color: #f0e2b8; }
.co-start:hover { box-shadow: 0 0 34px color-mix(in srgb, var(--confirm-accent) 45%, transparent); }
.co-back { border: 1px solid rgba(170,205,220,.4); background: rgba(12,24,34,.7); color: #dfeaf0; }

/* ── 공통 ── */
.btn { padding: .42rem 1rem; background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; font-size: .87rem; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--hover); }
.btn-primary { border-color: var(--accent); color: var(--accent); }
.btn-primary:hover { background: rgba(127,227,216,.12); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.hidden { display: none !important; }

/* ═══════════ 랜딩(게임 선택) — 히어로 + 라이브러리 레일 ═══════════ */
#select-screen { position: fixed; inset: 0; z-index: 30; overflow: hidden;
  background: radial-gradient(130% 120% at 50% -10%, #0e1420 0%, #04060a 68%);
  font-family: 'Noto Sans KR', sans-serif; display: flex; flex-direction: column; }

/* 브랜드바 내비 pill */
.ls-pill { padding: 8px 16px; border-radius: 10px; border: none; cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif; font-size: 12.5px; letter-spacing: .04em;
  background: transparent; color: #8ba0ad; transition: all .15s ease; }
.ls-pill:hover { color: #eaf4f7; }
.ls-pill.active { background: rgba(127,227,216,.14); color: #eaf4f7; box-shadow: inset 0 0 0 1px rgba(127,227,216,.4); }

/* 톱니 */
.ls-gear { width: 36px; height: 36px; margin-left: 6px; border-radius: 10px;
  border: 1px solid rgba(150,190,205,.18); background: rgba(12,20,30,.6); color: #a9c6d2;
  font-size: 15px; cursor: pointer; transition: all .15s ease; }
.ls-gear:hover { border-color: rgba(127,227,216,.6); color: #eaf4f7; }

/* 레일 카드 (accent는 인라인 --acc로 주입) */
.ls-card { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 14px;
  cursor: pointer; text-align: left; transition: all .18s ease; width: 100%; }
.ls-card:hover { border-color: var(--acc); transform: translateX(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 4px 0 0 var(--acc); }
.ls-card:disabled { cursor: default; }
.ls-card:disabled:hover { border-color: rgba(170,205,220,.12); transform: none; box-shadow: none; }
.ls-card-thumb { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 11px;
  overflow: hidden; background: #0a1320; border: 1px solid; }
.ls-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.ls-card-image[src$="/cafe.png"] { object-position: 20% 6%; transform: scale(1.55); transform-origin: 50% 30%; }
.ls-card-image[src$="/stella.png"] { object-position: 5% 6%; transform: scale(1.55); transform-origin: 50% 30%; }
.ls-card-image[src$="/yokai.png"] { object-position: 50% 6%; transform: scale(2); transform-origin: 50% 30%; }
.ls-card-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ls-card-glyph span { font-size: 26px; opacity: .9; }
.ls-card-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.ls-card-title { font-family: 'Gowun Batang', serif; font-size: 15px; font-weight: 700; color: #eaf4f7;
  letter-spacing: .03em; }
.ls-card-subtitle { font-size: 11px; color: #8ba4b1; letter-spacing: .02em; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 히어로 텍스트 단계별 표시: 마지막 단계는 0.24s + 0.35s에 완료 */
.ls-reveal { opacity: 0; transform: translateY(10px); animation: lsHeroReveal .35s ease-out both; }
.ls-reveal-title { animation-delay: 0s; }
.ls-reveal-info { animation-delay: .08s; }
.ls-reveal-description { animation-delay: .16s; }
.ls-reveal-actions { animation-delay: .24s; }
@keyframes lsHeroReveal { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .ls-reveal { opacity: 1; transform: none; animation: none; }
}

/* 히어로 버튼 (--acc 인라인 주입) */
.ls-btn-primary, .ls-btn-secondary, .ls-btn-back { cursor: pointer; font-family: 'Noto Sans KR', sans-serif; }
.ls-btn-primary:hover { box-shadow: 0 0 30px var(--acc); border-color: var(--acc); }
.ls-btn-secondary:hover, .ls-btn-back:hover { border-color: var(--acc); color: #fff; }

@keyframes charBreathe { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.012)} }
@keyframes wingGlow { 0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)} }
@keyframes wingBreath { 0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.82;transform:translate(-50%,-50%) scale(1.06)} }
@keyframes pollenUp { 0%{transform:translateY(0) scale(.5);opacity:0} 12%{opacity:.9} 82%{opacity:.55} 100%{transform:translateY(-200px) scale(1);opacity:0} }
@keyframes liveDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
@keyframes titleGlow { 0%,100%{text-shadow:0 0 22px rgba(127,227,216,.3)} 50%{text-shadow:0 0 34px rgba(127,227,216,.55)} }
/* ═══════════ 자동 캐스팅 ═══════════ */
.autocast-orb { background: #7fe3d8; box-shadow: 0 0 12px #7fe3d8; animation: acOrb 1s ease-in-out infinite; flex-shrink: 0; }
@keyframes acOrb { 0%,100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.ac-badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: #9ff0e4; background: rgba(20,60,55,.5); letter-spacing: .04em; flex-shrink: 0; }
.voice-card.ac-selected { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 15%, transparent); }