.streak-chip {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:38px;
  padding:.45rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--text-secondary);
  font:inherit;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.streak-chip:hover {
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
}
.streak-chip.is-complete {
  border-color:color-mix(in srgb,var(--ok) 38%,var(--line));
  background:color-mix(in srgb,var(--ok) 9%,var(--surface));
}
.streak-chip strong {
  color:var(--text);
  font-size:.9rem;
}
.streak-chip-label {
  font-size:.75rem;
  font-weight:800;
}
.streak-dialog {
  width:min(760px,calc(100vw - 24px));
  max-height:min(880px,calc(100vh - 24px));
  padding:0;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.streak-dialog::backdrop {
  background:color-mix(in srgb,#020617 58%,transparent);
  backdrop-filter:blur(4px);
}
.streak-dialog-shell {
  max-height:inherit;
  overflow:auto;
  padding:clamp(1.15rem,3vw,2rem);
}
.streak-dialog-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1.5rem;
}
.streak-dialog-header h2 {
  margin:.15rem 0 .3rem;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:.95;
  letter-spacing:-.05em;
}
.streak-dialog-header p {
  max-width:560px;
  margin:0;
  color:var(--muted);
}
.streak-close {
  width:40px;
  height:40px;
  flex:none;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-soft);
  color:var(--text);
  font-size:1.35rem;
  cursor:pointer;
}
.streak-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  margin:1.5rem 0 .8rem;
}
.streak-summary-card {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:.6rem;
  align-items:center;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-soft);
}
.streak-summary-card > span {
  grid-row:1/3;
  font-size:1.35rem;
}
.streak-summary-card strong {
  font-size:1.55rem;
  line-height:1;
}
.streak-summary-card small {
  color:var(--text-subtle);
  font-weight:750;
}
.streak-today {
  display:flex;
  gap:.65rem;
  align-items:center;
  padding:.85rem 1rem;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:14px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
}
.streak-today.is-complete {
  border-color:color-mix(in srgb,var(--ok) 36%,var(--line));
  background:color-mix(in srgb,var(--ok) 8%,var(--surface));
}
.streak-calendar-card {
  margin-top:1.25rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-soft);
}
.streak-calendar-head {
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:.5rem;
  margin-bottom:.75rem;
}
.streak-calendar-head strong {
  text-align:center;
  text-transform:capitalize;
}
.streak-calendar-head button {
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
}
.streak-weekdays,
.streak-calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.35rem;
}
.streak-weekdays {
  margin-bottom:.35rem;
  color:var(--text-subtle);
  font-size:.72rem;
  font-weight:850;
  text-align:center;
}
.streak-weekdays span {
  padding:.3rem 0;
}
.streak-day {
  position:relative;
  aspect-ratio:1;
  min-height:42px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--surface);
  color:var(--text-secondary);
  font:inherit;
}
button.streak-day {
  cursor:pointer;
}
button.streak-day:hover:not(:disabled) {
  border-color:var(--line-strong);
}
.streak-day i {
  position:absolute;
  right:5px;
  bottom:4px;
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background:var(--ok);
  color:#fff;
  font-size:.62rem;
  font-style:normal;
  font-weight:900;
}
.streak-day.is-complete {
  border-color:color-mix(in srgb,var(--ok) 38%,var(--line));
  background:color-mix(in srgb,var(--ok) 11%,var(--surface));
  color:var(--text);
  font-weight:850;
}
.streak-day.is-today {
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent);
}
.streak-day.is-selected {
  outline:2px solid color-mix(in srgb,var(--accent) 58%,transparent);
  outline-offset:1px;
}
.streak-day.is-missed {
  color:var(--text-subtle);
  background:color-mix(in srgb,var(--surface2) 78%,var(--surface));
}
.streak-day.is-future {
  opacity:.34;
  cursor:default;
}
.streak-day.is-empty {
  background:transparent;
}
.streak-day-detail {
  margin-top:1rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:18px;
}
.streak-day-detail-head h3 {
  margin:.2rem 0 0;
  font-size:1.1rem;
}
.streak-day-empty {
  margin:.75rem 0 0;
  color:var(--muted);
}
.streak-game-list {
  display:grid;
  gap:.5rem;
  margin-top:.8rem;
}
.streak-game-row {
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.7rem .8rem;
  border-radius:12px;
  background:var(--surface-soft);
}
.streak-game-row > span {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:color-mix(in srgb,var(--ok) 16%,var(--surface));
  color:var(--ok);
  font-weight:900;
}
.streak-dialog-footer {
  display:flex;
  justify-content:flex-end;
  margin-top:1rem;
}
.streak-celebration {
  position:fixed;
  z-index:10000;
  right:20px;
  bottom:20px;
  max-width:min(360px,calc(100vw - 40px));
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.8rem;
  align-items:center;
  padding:1rem 1.1rem;
  border:1px solid color-mix(in srgb,var(--ok) 38%,var(--line));
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(14px) scale(.98);
  transition:opacity .2s ease,transform .2s ease;
}
.streak-celebration.is-visible {
  opacity:1;
  transform:none;
}
.streak-celebration-icon {
  font-size:2rem;
}
.streak-celebration div {
  display:flex;
  flex-direction:column;
  gap:.12rem;
}
.streak-celebration strong {
  font-size:1rem;
}
.streak-celebration div > span {
  font-size:.86rem;
  font-weight:800;
}
.streak-celebration small {
  color:var(--muted);
}
@media (max-width:720px) {
  .streak-chip-label {
    display:none;
  }
  .streak-summary {
    grid-template-columns:1fr;
  }
  .streak-dialog {
    width:calc(100vw - 12px);
    max-height:calc(100vh - 12px);
    border-radius:18px;
  }
  .streak-dialog-shell {
    padding:1rem;
  }
  .streak-day {
    min-height:38px;
    border-radius:9px;
  }
}
@media (max-width:480px) {
  .streak-calendar-card {
    padding:.7rem;
  }
  .streak-weekdays,
  .streak-calendar {
    gap:.2rem;
  }
  .streak-day {
    min-height:34px;
    font-size:.82rem;
  }
  .streak-day i {
    width:13px;
    height:13px;
    right:3px;
    bottom:3px;
    font-size:.52rem;
  }
  .streak-celebration {
    right:12px;
    bottom:12px;
    max-width:calc(100vw - 24px);
  }
}
@media (prefers-reduced-motion:reduce) {
  .streak-chip,
  .streak-celebration {
    transition:none;
  }
}