/* 업적 / 오늘의 도전 (js/goals.js) — title buttons, the two screens, the toast, the result-screen box. Classes: ach- / dl- / og- / gt- */
#screen-title { gap: 12px; }
.btn.daily { background: #b48cff; min-width: 200px; }
.title-row { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 360px; }
.title-row .btn { flex: 1 1 0; min-width: 0; padding: 10px 6px; }
.ach-badge { display: inline-block; min-width: 18px; padding: 0 4px; margin-left: 2px; font-size: 11px; line-height: 16px;
  color: var(--paper); background: var(--coral); border: 2px solid var(--ink); vertical-align: 1px; }

#screen-ach, #screen-daily {
  justify-content: flex-start; touch-action: pan-y;
  padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
}
#screen-ach { background: linear-gradient(180deg, #2a1e3a 0%, #1a1020 100%); }
#screen-daily { background: linear-gradient(180deg, #3d2c55 0%, #1a1020 100%); }

/* ---- 업적 list ---- */
.ach-wrap { margin: auto 0; width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ach-head { text-align: center; }
.ach-sum { margin-top: 4px; font-size: 13px; color: var(--sun); }
.ach-list { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.ach-cat { margin: 8px 0 0; font-size: 13px; color: #c9b8e0; border-bottom: 2px solid #4a3a60; padding-bottom: 3px; }
.ach-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 9px; background: var(--panel); border: 2px solid #4a3a60; }
.ach-row.done { border-color: var(--gold); background: #3a2c1a; }
.ach-row.new { box-shadow: 0 0 0 2px var(--coral); }
.ach-ic { font-size: 18px; color: #6a5a80; text-align: center; }
.ach-row.done .ach-ic { color: var(--gold); }
.ach-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-nm { font-size: 14px; font-weight: bold; color: var(--paper); }
.ach-nm em { font-style: normal; font-size: 10px; color: var(--ink); background: var(--coral); padding: 0 3px; margin-left: 4px; vertical-align: 1px; }
.ach-ds { font-size: 12px; color: #c9b8e0; line-height: 1.35; }
.ach-bar { position: relative; height: 12px; margin-top: 2px; background: #160d22; border: 1px solid #4a3a60; }
.ach-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sea); }
.ach-row.done .ach-bar i { background: var(--gold); }
.ach-bar b { position: absolute; right: 4px; top: -1px; font-size: 10px; color: var(--paper); text-shadow: 1px 1px 0 var(--ink); }
.ach-rw { font-size: 13px; font-weight: bold; color: var(--sun); text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.ach-rw s { text-decoration: none; opacity: .75; }
.ach-rw small { font-size: 10px; color: var(--ink); background: var(--gold); padding: 0 3px; margin-top: 2px; }
.ach-back { align-self: center; margin-top: 6px; }

/* ---- 오늘의 도전 ---- */
.dl-wrap { margin: auto 0; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dl-date { font-size: 13px; color: var(--sun); }
.dl-warn { font-size: 12px; color: var(--ink); background: var(--coral); padding: 3px 8px; border: 2px solid var(--ink); }
.dl-card { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--panel); border: 3px solid var(--paper); text-align: left; }
.dl-pick { display: flex; align-items: center; gap: 10px; }
.dl-ch canvas { width: 56px; height: 56px; image-rendering: pixelated; display: block; background: rgba(255,255,255,.08); }
.dl-st canvas { width: 112px; height: 28px; image-rendering: pixelated; display: block; border: 2px solid var(--ink); }
.dl-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dl-lab { font-size: 11px; color: #c9b8e0; }
.dl-tx b, .dl-rule b { font-size: 15px; color: var(--paper); }
.dl-tx small, .dl-rule small { font-size: 12px; color: var(--sun); line-height: 1.35; }
.dl-rule { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #4a2a6a; border: 2px solid #b48cff; }
.dl-stats { display: grid; grid-template-columns: auto auto; gap: 4px 18px; font-size: 14px; text-align: left; }
.dl-stats .k { color: #c9b8e0; }
.dl-stats .v { color: var(--sun); font-weight: bold; text-align: right; }
.dl-rws { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.dl-rw { display: flex; justify-content: space-between; align-items: center; padding: 5px 9px; font-size: 13px; background: #2a1e3a; border: 2px solid #4a3a60; }
.dl-rw b { font-size: 11px; }
.dl-rw.paid { border-color: var(--gold); color: #c9b8e0; }
.dl-rw.paid b { color: var(--ink); background: var(--gold); padding: 0 4px; }
.dl-note { font-size: 12px; color: #c9b8e0; line-height: 1.5; }

/* ---- toast (any screen, the game keeps running under it) ---- */
.goal-toast {
  position: absolute; left: 50%; top: calc(max(8px, var(--safe-top)) + 64px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: calc(100% - 32px);
  padding: 7px 14px; background: rgba(26, 16, 32, .9); border: 2px solid var(--gold); color: var(--paper);
  z-index: 30; pointer-events: none; text-align: center; transition: opacity .25s, transform .25s;
}
.goal-toast.off { opacity: 0; transform: translateX(-50%) translateY(-8px); }
.gt-h { font-size: 12px; color: var(--sun); }
.gt-l { font-size: 14px; font-weight: bold; }
.gt-s { font-size: 11px; color: #c9b8e0; }

/* ---- result screen box ---- */
.over-goals { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; }
.og-daily, .og-ach { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 2px solid #b48cff; background: rgba(74, 42, 106, .6); font-size: 13px; }
.og-ach { border-color: var(--gold); background: rgba(58, 44, 26, .7); }
.og-h { font-size: 13px; color: var(--sun); }
.og-a i { font-style: normal; color: var(--sun); }
.og-share { font-size: 11px; color: #c9b8e0; line-height: 1.4; }

/* ---- 숨 돌리기 / 적이 몰려온다 (2.2, stages.js callout): a short line under the HUD, the run goes on ---- */
.run-call {
  position: absolute; left: 50%; top: calc(max(8px, var(--safe-top)) + 168px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: calc(100% - 32px);
  padding: 6px 14px; background: rgba(16, 44, 40, .88); border: 2px solid #5ef0c8; color: var(--paper);
  z-index: 29; pointer-events: none; text-align: center; transition: opacity .25s, transform .25s;
}
.run-call b { font-size: 15px; color: #8fffe0; }
.run-call span { font-size: 11px; color: #d6f5ec; }
.run-call.rush { background: rgba(60, 14, 14, .88); border-color: #ff6a4a; }
.run-call.rush b { color: #ffb08a; }
.run-call.escape { background: rgba(20, 16, 60, .9); border-color: #5ae0ff; }   /* 탈출 모드: 출구가 열렸다 / 탈출 성공 */
.run-call.escape b { font-size: 17px; color: #8ff0ff; }
.run-call.off { opacity: 0; transform: translateX(-50%) translateY(-8px); }

/* ---- 큰 보스 규칙 (stages.js conquer): '스테이지 정복!' big in the middle, the run goes on under it ---- */
#conquer-call {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6);
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 22px; background: rgba(40, 22, 6, .9); border: 3px solid var(--sun, #ffd23a); color: var(--paper, #fff);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .55), 0 0 28px rgba(255, 210, 58, .55);
  z-index: 31; pointer-events: none; text-align: center; opacity: 0; transition: opacity .3s, transform .3s;
}
#conquer-call b { font-size: 30px; line-height: 1.1; color: #ffe066; text-shadow: 2px 2px 0 #7a3a00, -1px -1px 0 #000; letter-spacing: 1px; }
#conquer-call span { font-size: 13px; color: #ffe9b8; }
#conquer-call em { font-style: normal; font-size: 16px; color: #8fffe0; margin-top: 2px; }
#conquer-call.small b { font-size: 24px; }
#conquer-call.pop { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: conquer-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
#conquer-call.off { opacity: 0; transform: translate(-50%, -60%) scale(.9); }
@keyframes conquer-pop { 0% { transform: translate(-50%, -50%) scale(.4); } 100% { transform: translate(-50%, -50%) scale(1); } }
#over-stats .v.boss { color: #ffe066; }