/* ========================================
   SUMMARY SCREEN — v5 rewrite
   
   Layout: flex column, no scroll.
   Hero (streak) gets flex:1 to absorb space.
   Log + bottom actions are fixed height.
   ======================================== */

#summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding:
    max(12px, var(--safe-top))
    max(16px, var(--safe-right))
    max(12px, var(--safe-bot))
    max(16px, var(--safe-left));
}

.summary-wrap {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ─────────────────────────────────
   ANIMATED BACKDROP
   ───────────────────────────────── */

.summary-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.summary-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(254, 232, 21, 0.12) 0%,
    rgba(254, 232, 21, 0.04) 40%,
    transparent 70%
  );
  animation: summaryGlowPulse 3s ease-in-out infinite;
}

@keyframes summaryGlowPulse {
  0%, 100% { transform: translate(-50%, -55%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -55%) scale(1.15); opacity: 0.7; }
}

.summary-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(254, 232, 21, 0.08);
  transform: translate(-50%, -55%);
  animation: summaryRingExpand 4s ease-out infinite;
}
.summary-ring:nth-child(2) { animation-delay: 1.3s; }
.summary-ring:nth-child(3) { animation-delay: 2.6s; }

@keyframes summaryRingExpand {
  0%   { width: 60px; height: 60px; opacity: 0.5; border-color: rgba(254, 232, 21, 0.15); }
  100% { width: 400px; height: 400px; opacity: 0; }
}

.summary-particle {
  position: absolute;
  border-radius: 50%;
  animation: summaryParticleFloat linear infinite;
}

@keyframes summaryParticleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-200px) scale(0.5); opacity: 0; }
}

.summary-teal-glow {
  position: absolute;
  bottom: -20%; left: 50%;
  width: 300px; height: 200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 93, 105, 0.2) 0%, transparent 70%);
  animation: summaryTealDrift 6s ease-in-out infinite;
}

@keyframes summaryTealDrift {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-20px); }
}

/* ─────────────────────────────────
   HERO — streak celebration
   ───────────────────────────────── */

.summary-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  min-height: 0;
  padding: 8px 0;
  position: relative;
  z-index: 1;

  animation: summaryHeroFadeIn 0.5s ease-out backwards;
}

@keyframes summaryHeroFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.summary-streak__fires {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 3px 10px rgba(254, 232, 21, 0.35));
  animation: summaryFirePulse 2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes summaryFirePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.summary-streak__number {
  font-size: clamp(72px, 20vw, 130px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--p-blazing-yellow);
  position: relative;
  z-index: 2;
  text-shadow:
    0 2px 0 rgba(0,0,0,.4),
    0 0 60px rgba(254, 232, 21, 0.35),
    0 0 120px rgba(254, 232, 21, 0.15);
}

.summary-streak__label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246,251,252,.55);
  margin-top: -2px;
  position: relative;
  z-index: 2;
}

/* ─── SNARK LINE — GLITCH ─── */

.summary-streak__message {
  font-size: clamp(18px, 5.5vw, 24px);
  font-weight: 800;
  color: var(--p-satin-slipper, #E4A832);
  max-width: 32ch;
  line-height: 1.35;
  margin-top: 12px;
  padding: 0 8px;
  position: relative;
  z-index: 2;
  text-align: center;
  text-wrap: balance;

  text-shadow: 0 0 24px rgba(228, 168, 50, 0.35);

  animation:
    summaryGlitchIn 0.6s steps(1, end) 0.3s backwards,
    summaryGlitchIdle 4s steps(1, end) 1s infinite;
}

/* Entry: chaotic reveal */
@keyframes summaryGlitchIn {
  0%   { opacity: 0; transform: translateX(30px) skewX(-20deg); filter: blur(8px); clip-path: inset(40% 0 40% 0); }
  15%  { opacity: 1; transform: translateX(-15px) skewX(10deg); filter: blur(0); clip-path: inset(0 0 60% 0);
         text-shadow: -3px 0 #ff0040, 3px 0 #00ffff; }
  30%  { transform: translateX(8px) skewX(-5deg); clip-path: inset(30% 0 0 0);
         text-shadow: 2px 0 #ff0040, -2px 0 #00ffff; }
  45%  { transform: translateX(-4px) skewX(2deg); clip-path: inset(0 0 20% 0);
         text-shadow: -1px 0 #ff0040, 1px 0 #00ffff; }
  60%  { transform: translateX(2px) skewX(0); clip-path: inset(0);
         text-shadow: 0 0 24px rgba(228, 168, 50, 0.4); }
  100% { transform: translateX(0); clip-path: inset(0);
         text-shadow: 0 0 24px rgba(228, 168, 50, 0.35); }
}

/* Idle: subtle periodic glitch */
@keyframes summaryGlitchIdle {
  0%, 100% { transform: none; text-shadow: 0 0 24px rgba(228, 168, 50, 0.35); }

  47%   { transform: none; }
  47.5% { transform: translateX(-2px) skewX(-1deg);
          text-shadow: -2px 0 #ff0040, 2px 0 #00ffff, 0 0 24px rgba(228, 168, 50, 0.35); }
  48%   { transform: translateX(2px);
          text-shadow: 2px 0 #ff0040, -2px 0 #00ffff, 0 0 24px rgba(228, 168, 50, 0.35); }
  48.5% { transform: none;
          text-shadow: 0 0 24px rgba(228, 168, 50, 0.35); }

  72%   { transform: none; }
  72.3% { transform: translateX(3px) skewX(2deg);
          text-shadow: -3px 0 #ff0040, 3px 0 #00ffff; clip-path: inset(20% 0 60% 0); }
  72.6% { transform: translateX(-1px);
          text-shadow: 1px 0 #ff0040, -1px 0 #00ffff; clip-path: inset(0); }
  73%   { transform: none; text-shadow: 0 0 24px rgba(228, 168, 50, 0.35); clip-path: inset(0); }
}

/* Chromatic split pseudo-elements */
.summary-streak__message::before,
.summary-streak__message::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: hidden;
  pointer-events: none;
  padding: 0 8px;
  text-wrap: balance;
}

.summary-streak__message::before {
  color: #ff0040;
  animation: summaryGlitchTop 4s steps(1, end) 1s infinite;
  clip-path: inset(0 0 65% 0);
  opacity: 0;
}

.summary-streak__message::after {
  color: #00ffff;
  animation: summaryGlitchBottom 4s steps(1, end) 1s infinite;
  clip-path: inset(65% 0 0 0);
  opacity: 0;
}

@keyframes summaryGlitchTop {
  0%, 100% { opacity: 0; }
  47.5%    { opacity: 0.7; transform: translateX(-3px); }
  48%      { opacity: 0.7; transform: translateX(2px); }
  48.5%    { opacity: 0; }
  72.3%    { opacity: 0.8; transform: translateX(4px); }
  72.6%    { opacity: 0; }
}

@keyframes summaryGlitchBottom {
  0%, 100% { opacity: 0; }
  47.5%    { opacity: 0.7; transform: translateX(3px); }
  48%      { opacity: 0.7; transform: translateX(-2px); }
  48.5%    { opacity: 0; }
  72.3%    { opacity: 0.8; transform: translateX(-3px); }
  72.6%    { opacity: 0; }
}

/* ─── COMEBACK TAG ─── */

.summary-comeback {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--p-capri);
  background: color-mix(in srgb, var(--p-capri) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-capri) 25%, transparent);
  position: relative;
  z-index: 2;
  animation: summaryComeback 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards;
}

.summary-comeback.hidden { display: none; }

@keyframes summaryComeback {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.summary-time {
  margin-top: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(246,251,252,.45);
  position: relative;
  z-index: 2;
}

/* ─────────────────────────────────
   QUICK LOG — pushups + win
   ───────────────────────────────── */

.summary-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;

  animation: summaryLogSlideUp 0.4s ease-out 0.15s backwards;
}

@keyframes summaryLogSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.summary-log__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}

.summary-log__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.summary-log__input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  outline: none;
  transition: border-color .2s ease;
}

.summary-log__input::placeholder {
  color: rgba(246,251,252,.25);
  font-weight: 600;
}

.summary-log__input:focus {
  border-color: color-mix(in srgb, var(--p-capri) 50%, transparent);
}

.summary-log__input--text {
  font-size: 14px;
  font-weight: 600;
}

.summary-log__btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--p-capri) 45%, transparent),
    color-mix(in srgb, var(--p-capri) 30%, transparent)
  );
  color: rgba(246,251,252,.90);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    0 4px 12px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.08) inset;
  transition: all .15s ease;
}

.summary-log__btn:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--p-capri) 55%, transparent),
    color-mix(in srgb, var(--p-capri) 38%, transparent)
  );
  transform: translateY(-1px);
}

.summary-log__btn:active { transform: translateY(0); }

.summary-log__btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.summary-log__btn--done {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--p-capri) 55%, transparent),
    color-mix(in srgb, var(--p-capri) 40%, transparent)
  );
}

.summary-log__stats {
  font-size: 12px;
  font-weight: 700;
  color: rgba(246,251,252,.35);
  padding: 0 12px;
  margin-top: -4px;
}

.summary-log__stats strong {
  color: rgba(246,251,252,.60);
  font-weight: 900;
}

/* ─────────────────────────────────
   BOTTOM — share, tip, done
   ───────────────────────────────── */

.summary-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
  padding-bottom: 4px;

  animation: summaryBottomFadeIn 0.4s ease-out 0.3s backwards;
}

@keyframes summaryBottomFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Share button — warm gold, chunky */
.summary-share-btn {
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  background: linear-gradient(180deg,
    rgba(228, 168, 50, 0.75),
    rgba(200, 130, 20, 0.65)
  );
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.10) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s ease;
}

.summary-share-btn__icon { font-size: 18px; line-height: 1; }

.summary-share-btn__text {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(246,251,252,.92);
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}

.summary-share-btn:hover {
  background: linear-gradient(180deg, rgba(228,168,50,.85), rgba(200,130,20,.75));
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12) inset;
}

.summary-share-btn:active { transform: translateY(0); }

/* Tip jar */
.summary-tip {
  display: block;
  text-align: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  text-decoration: none;
  color: rgba(246,251,252,.30);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  transition: color .2s, background .2s;
}

.summary-tip:hover {
  background: rgba(255,255,255,.05);
  color: rgba(246,251,252,.50);
}

.summary-tip strong {
  color: rgba(246,251,252,.50);
  font-weight: 700;
}

/* Done button — teal, chunky, matches START */
.summary-done-btn {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--p-capri) 92%, transparent),
    color-mix(in srgb, var(--p-capri) 78%, rgba(42, 140, 155, 1))
  );
  color: rgba(246,251,252,.92);
  box-shadow:
    0 12px 34px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.10) inset;
  transition: all .2s ease;
}

.summary-done-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14) inset;
}

.summary-done-btn:active { transform: translateY(0); }

.summary-done-btn__sub {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 3px;
}

.summary-done-btn__main {
  display: block;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  white-space: nowrap;
}

/* ─────────────────────────────────
   RESPONSIVE — short viewports
   ───────────────────────────────── */

@media (max-height: 700px) {
  .summary-hero { gap: 4px; padding: 4px 0; }
  .summary-streak__fires { font-size: 22px; }
  .summary-streak__number { font-size: clamp(48px, 14vw, 80px); }
  .summary-streak__message { font-size: clamp(16px, 4.5vw, 20px); margin-top: 8px; }
  .summary-time { font-size: 12px; padding: 5px 12px; margin-top: 6px; }

  .summary-log { gap: 6px; padding: 8px 0; }
  .summary-log__row { padding: 8px 10px; }
  .summary-log__input { padding: 8px 10px; font-size: 14px; }
  .summary-log__btn { padding: 8px 14px; }

  .summary-bottom { gap: 8px; }
  .summary-share-btn { padding: 12px 16px; }
  .summary-done-btn { padding: 14px 20px; }
}

@media (max-height: 600px) {
  .summary-streak__fires { font-size: 18px; }
  .summary-streak__number { font-size: 48px; }
  .summary-streak__label { font-size: 12px; }
  .summary-streak__message { display: none; }
  .summary-comeback { display: none; }
  .summary-time { display: none; }
}

/* ─────────────────────────────────
   UTILITY (used by JS)
   ───────────────────────────────── */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}