/* ═══════════════════════════════════════════════════════════
   VOLLEY — Timer Page Styles  (timer.css)
   FIX #10: Full post-session rating + coach's tip screen
   FIX #13: Session counter display
   ═══════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────── */
.page-timer {
  min-height: 100vh;
  padding-top: var(--nav-height);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-bottom: 48px;
  position: relative; overflow: hidden;
}

/* ── Background glow ─────────────────────────────────────── */
.timer-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.timer-bg-glow {
  position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 1000px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,241,53,0.08) 0%, rgba(200,241,53,0.03) 40%, transparent 70%);
  transition: background 0.8s;
  animation: float 4s ease-in-out infinite;
}
.timer-bg-glow.danger-glow {
  background: radial-gradient(circle, rgba(255,77,77,0.09) 0%, rgba(255,77,77,0.03) 40%, transparent 70%);
}

/* ── Timer section ───────────────────────────────────────── */
.timer-section {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 600px; padding: 0 24px; gap: 0;
}

/* ── Topic card ──────────────────────────────────────────── */
.topic-card {
  width: 100%; max-width: 520px;
  text-align: center; margin-bottom: 28px;
  padding: 16px 28px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); position: relative; overflow: hidden;
  transition: border-color 0.4s;
}
.topic-card.has-topic { border-color: rgba(200,241,53,0.12); }
.topic-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(200,241,53,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.topic-label {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 8px; display: block; opacity: 0.75;
}
.topic-text {
  font-family: var(--font-reel); font-style: italic;
  font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
  color: var(--ghost); line-height: 1.5; transition: opacity 0.3s;
}
.topic-text.empty { color: var(--ghost-2); }

/* ── Ring timer ──────────────────────────────────────────── */
.ring-wrap {
  position: relative; width: 280px; height: 280px; margin-bottom: 24px;
}
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.ring-arc {
  fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.5s ease;
  filter: drop-shadow(0 0 8px rgba(200,241,53,0.45));
}
.ring-arc.state-warn   { stroke: var(--warning); filter: drop-shadow(0 0 8px rgba(255,184,0,0.5)); }
.ring-arc.state-danger { stroke: var(--error);   filter: drop-shadow(0 0 8px rgba(255,77,77,0.5)); }

.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.ring-time {
  font-family: var(--font-display); font-size: 76px; font-weight: 700;
  line-height: 1; color: var(--ghost); letter-spacing: -0.03em; transition: color 0.4s;
}
.ring-time.state-warn   { color: var(--warning); }
.ring-time.state-danger { color: var(--error); }

.ring-adj { display: flex; gap: 7px; transition: opacity 0.25s, visibility 0.25s; }
.ring-adj.hidden { opacity: 0; visibility: hidden; }
.adj-btn {
  padding: 4px 13px; background: none; border: 1px solid var(--surface-4);
  border-radius: var(--r-pill); color: var(--grey);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500;
  cursor: pointer; transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.adj-btn:hover { border-color: var(--lime); color: var(--lime); background: var(--lime-muted); }

/* ── Controls ────────────────────────────────────────────── */
.timer-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 24px;
}
.ctrl {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; font-size: 18px;
  transition: transform 0.18s var(--ease-spring), box-shadow 0.2s;
}
.ctrl:hover  { transform: scale(1.08); }
.ctrl:active { transform: scale(0.94); }
.ctrl-reset  { background: var(--surface-3); border: 1px solid var(--surface-4); color: var(--grey); font-size: 16px; }
.ctrl-reset:hover { color: var(--ghost); border-color: var(--border-strong); background: var(--surface-4); }
.ctrl-play   { background: var(--lime); color: var(--obsidian); box-shadow: 0 0 28px rgba(200,241,53,0.32); }
.ctrl-play:hover   { box-shadow: 0 0 44px rgba(200,241,53,0.52); }
.ctrl-play.running { background: var(--ghost-2); color: var(--obsidian); box-shadow: none; }

/* ── Session status chip ─────────────────────────────────── */
.session-meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center; margin-bottom: 24px;
}
.meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 500;
  color: var(--ghost-2); letter-spacing: 0.05em;
}
.meta-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--grey); }
.meta-chip .dot.live { background: var(--lime); box-shadow: 0 0 6px rgba(200,241,53,0.6); animation: pulse 1.5s ease-in-out infinite; }
.meta-chip .dot.done { background: var(--error); }

/* ── ECG decoration ──────────────────────────────────────── */
.timer-ecg { width: 100%; max-width: 440px; opacity: 0.12; pointer-events: none; overflow: hidden; margin-top: 12px; }
.timer-ecg svg { width: 100%; height: 30px; display: block; }

/* ── Back link ───────────────────────────────────────────── */
.page-back {
  position: absolute; top: calc(var(--nav-height) + 14px); left: 20px;
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; color: var(--grey);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
  cursor: pointer; padding: 7px 11px; border-radius: var(--r-sm);
  transition: color 0.18s, background 0.18s; text-decoration: none; z-index: 10;
}
.page-back:hover { color: var(--ghost); background: var(--surface-2); }

/* ══════════════════════════════════════════════════════════
   FIX #10: DONE / POST-SESSION SCREEN
   Full-page overlay with rating + coach's tip
   Matches image 4 reference design
   ══════════════════════════════════════════════════════════ */
.done-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 14, 10, 0.96);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 24px 48px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s, visibility 0.45s;
  overflow-y: auto;
}
.done-overlay.show { opacity: 1; visibility: visible; }

/* Inner card */
.done-card {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  animation: fadeInUp 0.5s both;
}

/* FIX #10: "SESSION COMPLETE" pill at top */
.done-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 18px;
  background: var(--lime-muted); border: 1px solid var(--lime-border);
  border-radius: var(--r-pill); color: var(--lime);
  font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 28px;
  animation: fadeInDown 0.45s 0.1s both;
}

/* Headline */
.done-headline {
  font-family: var(--font-reel);
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 400; font-style: normal;
  color: var(--ghost); text-align: center;
  line-height: 1.1; margin-bottom: 14px;
  animation: fadeInUp 0.45s 0.15s both;
}

/* Topic echo */
.done-topic-echo {
  font-family: var(--font-reel); font-style: italic;
  font-size: var(--text-base); color: var(--ghost-2);
  text-align: center; margin-bottom: 32px;
  max-width: 380px; line-height: 1.5;
  animation: fadeInUp 0.45s 0.2s both;
}

/* FIX #10: Star rating row */
.star-row {
  display: flex; gap: 10px;
  margin-bottom: 32px;
  animation: fadeInUp 0.45s 0.25s both;
}
.star-btn {
  background: none; border: none; cursor: pointer;
  font-size: 32px; line-height: 1;
  color: var(--surface-4);
  transition: color 0.15s, transform 0.2s var(--ease-spring);
  padding: 4px;
}
.star-btn:hover          { color: var(--warning); transform: scale(1.18); }
.star-btn.selected       { color: var(--warning); }
.star-btn.selected.pop   { animation: starPop 0.35s var(--ease-spring) both; }

/* FIX #10: Coach's tip card */
.coach-tip-card {
  width: 100%;
  background: var(--surface-2); border: 1px solid var(--surface-4);
  border-left: 3px solid var(--lime);
  border-radius: var(--r-md); padding: 20px 22px;
  margin-bottom: 28px;
  animation: fadeInUp 0.45s 0.3s both;
}
.coach-tip-label {
  font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 10px; display: block;
}
.coach-tip-text {
  font-size: var(--text-base); color: var(--ghost-2);
  font-weight: 300; line-height: 1.65;
}

/* FIX #13: Session number */
.done-session-num {
  font-size: var(--text-xs); color: var(--grey);
  font-weight: 500; letter-spacing: 0.08em;
  margin-bottom: 24px;
  animation: fadeIn 0.45s 0.35s both;
}

/* Done actions */
.done-actions {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
  animation: fadeInUp 0.45s 0.4s both;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .ring-wrap      { width: 240px; height: 240px; }
  .ring-time      { font-size: 62px; }
  .topic-card     { padding: 14px 20px; }
  .done-headline  { font-size: 28px; }
  .star-btn       { font-size: 28px; }
}