/* ============================================================
   QUEST DAILY — the persistent daily-discipline screen
   Solo Leveling × Hunter. Core board: status HUD · streak · quests.
   Companion: quest-daily-history.css (recording sheet + heatmap).
   Reuses: dungeon-cleared.js (full-day) + .arise-* (level-up).
   Tokens from solo-leveling.css (--sl-*); inline fallbacks so the
   mockup renders standalone. Mobile-first PWA. v1 — 2026-06-20 FRIDAY.
   ============================================================ */

.qd-view {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 14px 96px;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  color: var(--sl-text, #e8efff);
}

/* ============ STATUS HUD — rank sigil · level · xp ============ */
.qd-status {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, rgba(0,246,255,0.08), rgba(123,45,255,0.05));
  border: 1px solid var(--sl-cyan-dim, rgba(0,246,255,0.4));
  border-left: 3px solid var(--sl-cyan, #00f6ff);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
}

/* Rank sigil — hex with letter E→S */
.qd-sigil {
  width: 58px; height: 64px;
  display: grid; place-items: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px; line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, rgba(0,246,255,0.22), rgba(123,45,255,0.14));
  border: 1px solid var(--sl-cyan, #00f6ff);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  text-shadow: 0 0 14px var(--sl-cyan-glow, rgba(0,246,255,0.6));
  box-shadow: 0 0 16px rgba(0,246,255,0.3), inset 0 0 10px rgba(0,246,255,0.12);
}
/* Rank colour ramp — escalates toward S */
.qd-sigil[data-rank="S"] { border-color: var(--sl-gold, #ffd700); color: var(--sl-gold, #ffd700); text-shadow: 0 0 18px var(--sl-gold-glow, rgba(255,215,0,0.6)); box-shadow: 0 0 22px rgba(255,215,0,0.45); }
.qd-sigil[data-rank="A"] { border-color: var(--sl-purple, #7b2dff); text-shadow: 0 0 16px var(--sl-purple-glow, rgba(123,45,255,0.55)); }

.qd-status-main { min-width: 0; }
.qd-level-row {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.qd-level {
  font-family: 'Orbitron', monospace;
  font-size: 22px; font-weight: 800; letter-spacing: 0.06em;
  color: #fff; text-shadow: 0 0 12px var(--sl-cyan-glow, rgba(0,246,255,0.6));
}
.qd-level small {
  font-size: 10px; letter-spacing: 0.28em; color: var(--sl-cyan, #00f6ff);
  margin-right: 4px; text-shadow: 0 0 6px var(--sl-cyan-glow, rgba(0,246,255,0.6));
}
.qd-rank-name {
  font-family: 'Orbitron', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sl-text-dim, #7a8fb8);
  margin-left: auto;
}

/* XP bar */
.qd-xp { position: relative; }
.qd-xp-bar {
  height: 8px;
  background: rgba(0,246,255,0.07);
  border: 1px solid var(--sl-line, rgba(0,246,255,0.12));
  overflow: hidden; position: relative;
  clip-path: polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.qd-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sl-cyan, #00f6ff), var(--sl-purple, #7b2dff));
  box-shadow: 0 0 10px var(--sl-cyan-glow, rgba(0,246,255,0.5));
  width: 0;
  transition: width 0.7s cubic-bezier(0.16,1,0.3,1);
}
.qd-xp-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: qd-shimmer 2.4s linear infinite;
}
.qd-xp-text {
  font-family: 'Orbitron', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--sl-text-dim, #7a8fb8);
  margin-top: 5px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.qd-xp-text b { color: var(--sl-cyan, #00f6ff); font-weight: 700; }

/* ============ STREAK STRIP — current · best · 7-day dots ============ */
.qd-streak {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--sl-bg-card, rgba(8,18,38,0.78));
  border: 1px solid var(--sl-line, rgba(0,246,255,0.12));
  clip-path: polygon(12px 0,100% 0,100% 100%,0 100%,0 12px);
}
.qd-streak-flame {
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,140,0,0.7));
}
.qd-streak.is-cold .qd-streak-flame { filter: grayscale(1) brightness(0.7); }
.qd-streak-now {
  font-family: 'Orbitron', monospace; line-height: 1;
}
.qd-streak-num {
  font-size: 28px; font-weight: 800; color: #fff;
  text-shadow: 0 0 12px rgba(255,140,0,0.6);
}
.qd-streak-cap {
  display: block; font-size: 8.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--sl-text-dim, #7a8fb8); margin-top: 3px;
}
.qd-streak-best {
  font-family: 'Orbitron', monospace; font-size: 10px;
  letter-spacing: 0.16em; color: var(--sl-gold, #ffd700);
  text-shadow: 0 0 6px var(--sl-gold-glow, rgba(255,215,0,0.5));
  text-align: right; align-self: start;
}
.qd-week { display: flex; gap: 6px; justify-self: end; }
.qd-dot {
  width: 16px; height: 16px;
  border: 1px solid var(--sl-line, rgba(0,246,255,0.18));
  background: rgba(2,6,17,0.6);
  transform: rotate(45deg);
}
.qd-dot.cleared {
  background: var(--sl-success, #00ffa3);
  border-color: var(--sl-success, #00ffa3);
  box-shadow: 0 0 8px rgba(0,255,163,0.6);
}
.qd-dot.missed { border-color: rgba(255,51,102,0.4); background: rgba(255,51,102,0.06); }
.qd-dot.today {
  border-color: var(--sl-cyan, #00f6ff);
  box-shadow: 0 0 10px var(--sl-cyan-glow, rgba(0,246,255,0.6));
  animation: qd-dot-pulse 1.8s ease-in-out infinite;
}

/* ============ SECTION LABEL ============ */
.qd-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--sl-cyan, #00f6ff);
  opacity: 0.85; margin: 22px 0 12px; padding-left: 14px; position: relative;
}
.qd-label::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; background: var(--sl-cyan, #00f6ff);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 10px var(--sl-cyan-glow, rgba(0,246,255,0.6));
}

/* ============ QUEST BOARD ============ */
.qd-board { display: flex; flex-direction: column; gap: 12px; }

.qd-quest {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--sl-bg-card, rgba(8,18,38,0.78));
  border: 1px solid var(--sl-line, rgba(0,246,255,0.12));
  border-left: 2px solid var(--sl-purple-dim, rgba(123,45,255,0.4));
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.qd-quest.is-cleared {
  border-left-color: var(--sl-success, #00ffa3);
  background: linear-gradient(135deg, rgba(0,255,163,0.07), rgba(0,246,255,0.03));
  box-shadow: 0 0 16px rgba(0,255,163,0.18);
}

/* Progress ring (SVG) — the centerpiece.
   Rotate ONLY the fill circle (around its own bbox centre) so the stroke
   starts at 12 o'clock; the % text stays upright. */
.qd-ring { width: 56px; height: 56px; }
.qd-ring-track { fill: none; stroke: rgba(0,246,255,0.1); stroke-width: 4; }
.qd-ring-fill {
  fill: none; stroke: url(#qdGrad); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 119.38;            /* 2π·19 */
  stroke-dashoffset: 119.38;           /* JS: C·(1−pct) */
  transform: rotate(-90deg);
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(0,246,255,0.6));
  transition: stroke-dashoffset 0.7s cubic-bezier(0.16,1,0.3,1);
}
.qd-quest.is-cleared .qd-ring-fill { stroke: var(--sl-success, #00ffa3); filter: drop-shadow(0 0 6px rgba(0,255,163,0.8)); }
.qd-ring-pct {
  font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 800;
  fill: #fff; text-anchor: middle; dominant-baseline: central;
}

.qd-quest-body { min-width: 0; }
.qd-quest-name {
  font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
}
.qd-quest-sub {
  font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--sl-text-dim, #7a8fb8);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.qd-quest-sub b { color: var(--sl-cyan, #00f6ff); }
.qd-quest.is-cleared .qd-quest-sub { color: var(--sl-success, #00ffa3); }
.qd-quest.is-cleared .qd-quest-sub b { color: var(--sl-success, #00ffa3); }

/* Quick-log +/- cluster */
.qd-log { display: flex; align-items: center; gap: 7px; }
.qd-log button {
  width: 38px; height: 38px;
  font-family: 'Orbitron', monospace; font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, rgba(0,246,255,0.14), rgba(123,45,255,0.08));
  border: 1px solid var(--sl-cyan-dim, rgba(0,246,255,0.5));
  color: var(--sl-cyan, #00f6ff); cursor: pointer;
  clip-path: polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform 0.12s, box-shadow 0.18s, background 0.18s, color 0.18s;
}
.qd-log button:hover, .qd-log button:focus-visible {
  background: linear-gradient(135deg, rgba(0,246,255,0.3), rgba(123,45,255,0.18));
  color: #fff; box-shadow: 0 0 16px var(--sl-cyan-glow, rgba(0,246,255,0.5)); outline: none;
}
.qd-log button:active { transform: scale(0.9); }
.qd-log .qd-log-minus { color: var(--sl-text-dim, #7a8fb8); border-color: var(--sl-text-muted, #4a5f87); background: rgba(8,18,38,0.5); }
.qd-log .qd-rec-open {
  width: auto; padding: 0 12px; font-size: 10px; letter-spacing: 0.16em;
  color: var(--sl-gold, #ffd700); border-color: rgba(255,215,0,0.45);
  background: rgba(255,215,0,0.07);
}

/* Floating "+25" particle (JS appends inside .qd-quest) */
.qd-float {
  position: absolute; left: 28px; top: 8px;
  font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 800;
  color: var(--sl-success, #00ffa3);
  text-shadow: 0 0 10px rgba(0,255,163,0.95);
  pointer-events: none; animation: qd-float-up 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
}
.qd-quest { position: relative; }

/* All-clear banner — shown when every quest is cleared */
.qd-allclear {
  margin-top: 14px; padding: 18px 16px; text-align: center;
  background: linear-gradient(135deg, rgba(0,255,163,0.1), rgba(0,246,255,0.05));
  border: 1px solid var(--sl-success, #00ffa3);
  box-shadow: 0 0 28px rgba(0,255,163,0.25);
  clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  animation: qd-allclear-in 0.6s cubic-bezier(0.16,1,0.3,1);
}
.qd-allclear-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.14em;
  color: var(--sl-success, #00ffa3); text-shadow: 0 0 16px rgba(0,255,163,0.7);
  text-transform: uppercase;
}
.qd-allclear-title::before { content: '⚔ '; }
.qd-allclear-sub {
  font-family: 'Orbitron', monospace; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--sl-text-dim, #7a8fb8); margin-top: 4px;
}

/* ============ ANIMATIONS ============ */
@keyframes qd-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes qd-dot-pulse { 0%,100% { box-shadow: 0 0 8px var(--sl-cyan-glow, rgba(0,246,255,0.5)); } 50% { box-shadow: 0 0 16px var(--sl-cyan-glow, rgba(0,246,255,0.9)); } }
@keyframes qd-float-up {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  20% { opacity: 1; transform: translateY(-10px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}
@keyframes qd-allclear-in { from { opacity: 0; transform: scale(0.9) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}