/* Space Labs visual language, tailored to the 20-day streak surface only. */
#streak-page.streak-game-ui {
  --streak-mint:#8ce0c5;
  --streak-lime:#d5f06e;
  --streak-muted:#91aaa9;
  --streak-line:rgba(167,207,193,.14);
  --streak-panel:linear-gradient(155deg,#162831,#0b141a 77%);
  align-items:center;
  justify-content:flex-start;
  padding:calc(env(safe-area-inset-top,0px) + 24px) 14px calc(30px + env(safe-area-inset-bottom,0px));
  color:#e7f1ed;
  background:radial-gradient(ellipse at 85% 0%,rgba(82,133,119,.17),transparent 31rem),#091218;
  font-family:Rajdhani,sans-serif;
  overflow-x:hidden;
}
#streak-page.streak-game-ui::before { opacity:.15; pointer-events:none; }
#streak-page.streak-game-ui *,
#streak-page.streak-game-ui *::before,
#streak-page.streak-game-ui *::after { box-sizing:border-box; }
#streak-page.streak-game-ui button { -webkit-tap-highlight-color:transparent; }
#streak-page.streak-game-ui button:focus-visible,
#streak-page.streak-game-ui [role="button"]:focus-visible {
  outline:2px solid var(--streak-lime);
  outline-offset:3px;
}
#streak-page.streak-game-ui svg { display:block; width:20px; height:20px; flex-shrink:0; }
#streak-page.streak-game-ui .streak-wrap {
  position:relative;
  z-index:1;
  width:min(560px,100%);
  max-width:100%;
  margin:0 auto;
  padding:0 0 18px;
  animation:streak-enter .26s ease-out both;
}
#streak-page.streak-game-ui .streak-header {
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 17px;
}
#streak-page.streak-game-ui .streak-back {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:48px;
  min-height:44px;
  padding:0 9px;
  border:1px solid var(--streak-line);
  border-radius:11px;
  color:var(--streak-mint);
  background:rgba(255,255,255,.025);
  font:700 8px/1 Orbitron,sans-serif;
  letter-spacing:.05em;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
#streak-page.streak-game-ui .streak-back svg { width:17px; height:17px; }
#streak-page.streak-game-ui .streak-back:hover { background:rgba(140,224,197,.08); border-color:rgba(140,224,197,.3); }
#streak-page.streak-game-ui .streak-back:active { transform:scale(.97); }
#streak-page.streak-game-ui .streak-brand { min-width:0; flex:1; }
#streak-page.streak-game-ui .streak-brand small {
  display:block;
  color:var(--streak-muted);
  font:700 7px/1.4 Orbitron,sans-serif;
  letter-spacing:.14em;
}
#streak-page.streak-game-ui .streak-brand h1 {
  margin:4px 0 0;
  font:900 clamp(17px,5vw,22px)/1.05 Orbitron,sans-serif;
  letter-spacing:.01em;
}
#streak-page.streak-game-ui .streak-brand h1 em { color:var(--streak-mint); font-style:normal; }
#streak-page.streak-game-ui .streak-brand p { margin:5px 0 0; color:var(--streak-muted); font-size:13px; line-height:1.25; }
#streak-page.streak-game-ui #streak-summary {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
  gap:8px !important;
  margin:0 0 10px !important;
}
#streak-page.streak-game-ui .streak-stat,
#streak-page.streak-game-ui .streak-claim-card {
  display:flex;
  min-width:0;
  min-height:112px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px 6px;
  border:1px solid var(--streak-line);
  border-radius:13px;
  background:var(--streak-panel);
  text-align:center;
}
#streak-page.streak-game-ui .streak-stat-current { border-color:rgba(255,174,121,.22); }
#streak-page.streak-game-ui .streak-stat-best { border-color:rgba(213,240,110,.18); }
#streak-page.streak-game-ui .streak-stat-icon,
#streak-page.streak-game-ui .streak-claim-icon {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:6px;
  border:1px solid rgba(140,224,197,.18);
  border-radius:9px;
  color:var(--streak-mint);
  background:rgba(140,224,197,.07);
}
#streak-page.streak-game-ui .streak-stat-current .streak-stat-icon { color:#ffae79; border-color:rgba(255,174,121,.23); background:rgba(255,174,121,.07); }
#streak-page.streak-game-ui .streak-stat-best .streak-stat-icon { color:var(--streak-lime); border-color:rgba(213,240,110,.2); background:rgba(213,240,110,.06); }
#streak-page.streak-game-ui .streak-stat-icon svg,
#streak-page.streak-game-ui .streak-claim-icon svg { width:17px; height:17px; }
#streak-page.streak-game-ui .streak-stat > strong {
  color:#e7f1ed;
  font:900 clamp(16px,4.8vw,21px)/1 Orbitron,sans-serif;
  font-variant-numeric:tabular-nums;
}
#streak-page.streak-game-ui .streak-stat-current > strong { color:#ffae79; }
#streak-page.streak-game-ui .streak-stat-best > strong { color:var(--streak-lime); }
#streak-page.streak-game-ui .streak-stat-label {
  display:block;
  margin-top:6px;
  color:var(--streak-muted);
  font:700 6px/1.25 Orbitron,sans-serif;
  letter-spacing:.06em;
}
#streak-page.streak-game-ui .streak-claim-card {
  position:relative;
  overflow:hidden;
  border-color:rgba(140,224,197,.38);
  color:var(--streak-mint);
  background:linear-gradient(150deg,rgba(140,224,197,.15),rgba(16,35,39,.97) 72%);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
#streak-page.streak-game-ui .streak-claim-card::after {
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 24%,rgba(255,255,255,.09) 50%,transparent 73%);
  content:"";
  opacity:0;
  transform:translateX(-55%);
  transition:opacity .2s ease,transform .35s ease;
  pointer-events:none;
}
#streak-page.streak-game-ui .streak-claim-card:hover { border-color:rgba(140,224,197,.68); background:linear-gradient(150deg,rgba(140,224,197,.22),rgba(16,35,39,.97) 72%); }
#streak-page.streak-game-ui .streak-claim-card:hover::after { opacity:1; transform:translateX(0); }
#streak-page.streak-game-ui .streak-claim-card:active { transform:scale(.975); }
#streak-page.streak-game-ui .streak-claim-card.is-claimed {
  border-color:rgba(167,207,193,.12);
  color:#91aaa9;
  background:linear-gradient(155deg,#14232a,#0b141a 78%);
  cursor:default;
}
#streak-page.streak-game-ui .streak-claim-card.is-claimed .streak-claim-icon { color:#91aaa9; border-color:var(--streak-line); background:rgba(255,255,255,.025); }
#streak-page.streak-game-ui .streak-claim-card > strong { font:800 8px/1.2 Orbitron,sans-serif; letter-spacing:.05em; }
#streak-page.streak-game-ui .streak-timer { min-height:14px; margin-top:5px; color:#abc0b9; font:600 10px/1.2 Rajdhani,sans-serif; }
#streak-page.streak-game-ui .streak-claim-card:not(.is-claimed) .streak-timer { color:var(--streak-muted); }
#streak-page.streak-game-ui #streak-freeze-indicator:empty { display:none; }
#streak-page.streak-game-ui .streak-freeze-card {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  margin:0 0 13px;
  padding:10px;
  border:1px solid rgba(167,207,193,.14);
  border-radius:12px;
  background:linear-gradient(120deg,rgba(140,224,197,.055),rgba(16,29,36,.9));
}
#streak-page.streak-game-ui .streak-freeze-card.is-protected { border-color:rgba(140,224,197,.27); }
#streak-page.streak-game-ui .streak-freeze-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid rgba(140,224,197,.23);
  border-radius:9px;
  color:var(--streak-mint);
  background:rgba(140,224,197,.08);
}
#streak-page.streak-game-ui .streak-freeze-copy { flex:1; min-width:0; }
#streak-page.streak-game-ui .streak-freeze-copy strong {
  display:block;
  color:var(--streak-mint);
  font:700 8px/1.35 Orbitron,sans-serif;
  letter-spacing:.035em;
  overflow-wrap:anywhere;
}
#streak-page.streak-game-ui .streak-freeze-copy span { display:block; margin-top:3px; color:var(--streak-muted); font-size:12px; line-height:1.2; overflow-wrap:anywhere; }
#streak-page.streak-game-ui .streak-freeze-use,
#streak-page.streak-game-ui .streak-retry {
  min-height:38px;
  flex:0 0 auto;
  padding:0 10px;
  border:1px solid rgba(140,224,197,.3);
  border-radius:8px;
  color:var(--streak-mint);
  background:rgba(140,224,197,.08);
  font:700 7px/1 Orbitron,sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease;
}
#streak-page.streak-game-ui .streak-freeze-use:hover,
#streak-page.streak-game-ui .streak-retry:hover { background:rgba(140,224,197,.16); }
#streak-page.streak-game-ui .streak-freeze-use:active,
#streak-page.streak-game-ui .streak-retry:active { transform:scale(.97); }
#streak-page.streak-game-ui #streak-grid-container {
  min-width:0;
  padding:12px 10px 10px;
  border:1px solid var(--streak-line);
  border-radius:14px;
  background:rgba(11,20,26,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#streak-page.streak-game-ui .streak-row-label {
  margin:1px 0 7px;
  color:var(--streak-muted);
  font:700 7px/1.3 Orbitron,sans-serif;
  letter-spacing:.11em;
}
#streak-page.streak-game-ui .streak-calendar-row {
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:clamp(3px,1.3vw,7px);
  margin-bottom:12px;
}
#streak-page.streak-game-ui .streak-day {
  position:relative;
  display:flex;
  min-width:0;
  aspect-ratio:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  overflow:hidden;
  border:1px solid rgba(167,207,193,.085);
  border-radius:clamp(6px,2vw,10px);
  color:#66807c;
  background:rgba(255,255,255,.018);
  font-family:Orbitron,sans-serif;
  font-variant-numeric:tabular-nums;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
#streak-page.streak-game-ui .streak-day strong { font-size:clamp(8px,2.5vw,11px); line-height:1; }
#streak-page.streak-game-ui .streak-day.is-milestone { color:#d7d39b; border-color:rgba(213,240,110,.23); background:rgba(213,240,110,.035); }
#streak-page.streak-game-ui .streak-day.is-claimed { color:var(--streak-mint); border-color:rgba(140,224,197,.31); background:rgba(140,224,197,.09); }
#streak-page.streak-game-ui .streak-day.is-claimed.is-milestone { border-color:rgba(213,240,110,.48); background:linear-gradient(145deg,rgba(140,224,197,.13),rgba(213,240,110,.075)); }
#streak-page.streak-game-ui .streak-day.is-today { color:#ffbd91; border-color:rgba(255,174,121,.75); background:rgba(255,174,121,.16); }
#streak-page.streak-game-ui .streak-day-bonus { color:var(--streak-lime); font:700 clamp(4px,1.25vw,6px)/1 Orbitron,sans-serif; letter-spacing:.03em; }
#streak-page.streak-game-ui .streak-day-mark { position:absolute; right:3px; top:3px; color:#ffae79; }
#streak-page.streak-game-ui .streak-day-mark svg { width:9px; height:9px; }
#streak-page.streak-game-ui .streak-rewards {
  margin-top:4px;
  padding:11px 0 0;
  border-top:1px solid var(--streak-line);
}
#streak-page.streak-game-ui .streak-section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  color:#d8e7df;
  font:700 7px/1.4 Orbitron,sans-serif;
  letter-spacing:.07em;
}
#streak-page.streak-game-ui .streak-section-heading span:last-child { color:var(--streak-muted); font-size:6px; white-space:nowrap; }
#streak-page.streak-game-ui .streak-daily-base {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 9px;
  min-height:39px;
  margin-bottom:8px;
  padding:7px 8px;
  border:1px solid rgba(140,224,197,.17);
  border-radius:9px;
  color:var(--streak-mint);
  background:rgba(140,224,197,.045);
  font:700 7px/1.25 Orbitron,sans-serif;
}
#streak-page.streak-game-ui .streak-reward-amount {
  display:inline-flex;
  align-items:center;
  gap:3px;
  min-width:0;
  color:#dbe8df;
  font:700 10px/1.2 Rajdhani,sans-serif;
  white-space:nowrap;
}
#streak-page.streak-game-ui .streak-reward-amount img,
#streak-page.streak-game-ui .streak-reward-amount svg { width:13px; height:13px; object-fit:contain; }
#streak-page.streak-game-ui .streak-reward-amount img { border-radius:50%; }
#streak-page.streak-game-ui .streak-reward-amount b { font-weight:700; }
#streak-page.streak-game-ui .streak-reward-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
#streak-page.streak-game-ui .streak-reward-item {
  min-width:0;
  padding:7px;
  border:1px solid rgba(167,207,193,.1);
  border-radius:8px;
  background:rgba(255,255,255,.018);
}
#streak-page.streak-game-ui .streak-reward-item.is-earned { border-color:rgba(140,224,197,.25); background:rgba(140,224,197,.045); }
#streak-page.streak-game-ui .streak-reward-title { display:flex; align-items:baseline; gap:5px; min-width:0; margin-bottom:5px; }
#streak-page.streak-game-ui .streak-reward-title strong { flex:0 0 auto; color:var(--streak-lime); font:700 7px/1.2 Orbitron,sans-serif; }
#streak-page.streak-game-ui .streak-reward-title span { min-width:0; color:#bdd0c7; font:600 11px/1.2 Rajdhani,sans-serif; overflow-wrap:anywhere; }
#streak-page.streak-game-ui .streak-reward-values { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; }
#streak-page.streak-game-ui .streak-item-reward {
  max-width:100%;
  padding:2px 5px;
  border:1px solid rgba(213,240,110,.16);
  border-radius:5px;
  color:#d5e4ba;
  background:rgba(213,240,110,.045);
  font:600 10px/1.25 Rajdhani,sans-serif;
  overflow-wrap:anywhere;
}
#streak-page.streak-game-ui .streak-rewards-feedback {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  color:var(--streak-muted);
  font-size:13px;
}
#streak-page.streak-game-ui .streak-rewards-feedback.is-error { color:#e7b5a2; }
@keyframes streak-enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:600px) {
  #streak-page.streak-game-ui { padding-right:20px; padding-left:20px; }
  #streak-page.streak-game-ui #streak-grid-container { padding:15px; }
  #streak-page.streak-game-ui .streak-day { border-radius:10px; }
  #streak-page.streak-game-ui .streak-reward-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:599px) {
  #streak-page.streak-game-ui .streak-calendar-row { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #streak-page.streak-game-ui .streak-day { aspect-ratio:1.25; }
  #streak-page.streak-game-ui .streak-day strong { font-size:12px; }
  #streak-page.streak-game-ui .streak-day-bonus { font-size:7px; }
}
@media(max-width:359px) {
  #streak-page.streak-game-ui { padding-right:10px; padding-left:10px; }
  #streak-page.streak-game-ui #streak-summary { gap:5px !important; }
  #streak-page.streak-game-ui .streak-stat,
  #streak-page.streak-game-ui .streak-claim-card { min-height:100px; padding:8px 3px; }
  #streak-page.streak-game-ui .streak-stat-label { font-size:5px; }
  #streak-page.streak-game-ui .streak-freeze-card { gap:6px; padding:8px; }
  #streak-page.streak-game-ui .streak-freeze-use { padding:0 7px; font-size:6px; }
  #streak-page.streak-game-ui #streak-grid-container { padding:9px 7px; }
  #streak-page.streak-game-ui .streak-reward-list { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  #streak-page.streak-game-ui *,
  #streak-page.streak-game-ui *::before,
  #streak-page.streak-game-ui *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Claim / freeze confirmations live on the stable page, outside rerendered panels. */
#streak-page.streak-game-ui .streak-feedback-toast {
  position:fixed;
  z-index:20;
  top:calc(env(safe-area-inset-top,0px) + 14px);
  left:50%;
  display:flex;
  align-items:center;
  gap:11px;
  width:max-content;
  max-width:min(520px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  padding:10px 14px 10px 10px;
  border:1px solid rgba(140,224,197,.34);
  border-radius:13px;
  color:#e7f1ed;
  background:linear-gradient(145deg,rgba(23,46,49,.98),rgba(11,20,26,.98));
  box-shadow:0 12px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035);
  pointer-events:none;
  transform:translate(-50%,0);
  animation:streak-feedback-arrive .24s ease-out both;
}
#streak-page.streak-game-ui .streak-feedback-mark {
  position:relative;
  display:grid;
  width:37px;
  height:37px;
  flex:0 0 37px;
  place-items:center;
  border:1px solid rgba(140,224,197,.35);
  border-radius:11px;
  color:var(--streak-mint);
  background:rgba(140,224,197,.09);
}
#streak-page.streak-game-ui .streak-feedback-mark svg { width:24px; height:24px; }
#streak-page.streak-game-ui .streak-feedback-copy { min-width:0; }
#streak-page.streak-game-ui .streak-feedback-title {
  display:block;
  color:var(--streak-lime);
  font:700 8px/1.35 Orbitron,sans-serif;
  letter-spacing:.08em;
}
#streak-page.streak-game-ui .streak-feedback-detail {
  display:block;
  margin-top:3px;
  color:#c8d9d0;
  font:600 13px/1.25 Rajdhani,sans-serif;
  overflow-wrap:anywhere;
}
#streak-page.streak-game-ui.streak-feedback-claim .streak-feedback-toast {
  border-color:rgba(213,240,110,.35);
}
#streak-page.streak-game-ui.streak-feedback-claim .streak-feedback-mark {
  border-color:rgba(213,240,110,.45);
  color:var(--streak-lime);
  background:linear-gradient(145deg,rgba(140,224,197,.15),rgba(213,240,110,.1));
  animation:streak-feedback-reward .64s ease-out both;
}
#streak-page.streak-game-ui.streak-feedback-freeze .streak-feedback-mark {
  border-color:rgba(167,207,229,.34);
  color:#b9d8e5;
  background:rgba(145,190,211,.09);
  animation:streak-feedback-ice .85s ease-out both;
}
#streak-page.streak-game-ui .streak-feedback-mark::after {
  position:absolute;
  inset:-5px;
  border:1px solid currentColor;
  border-radius:14px;
  content:"";
  opacity:0;
  transform:scale(.76);
  pointer-events:none;
}
#streak-page.streak-game-ui.streak-feedback-freeze .streak-feedback-mark::after {
  animation:streak-feedback-ripple .95s ease-out both;
}
#streak-page.streak-game-ui.streak-feedback-claim #streak-summary .streak-stat-current,
#streak-page.streak-game-ui.streak-feedback-claim #streak-summary .streak-claim-card {
  animation:streak-feedback-card .7s ease-out both;
}
#streak-page.streak-game-ui.streak-feedback-freeze .streak-freeze-card {
  animation:streak-feedback-shield .8s ease-out both;
}
@keyframes streak-feedback-arrive {
  from { opacity:0; transform:translate(-50%,-7px); }
  to { opacity:1; transform:translate(-50%,0); }
}
@keyframes streak-feedback-reward {
  0% { transform:scale(.86); }
  54% { transform:scale(1.08); }
  100% { transform:scale(1); }
}
@keyframes streak-feedback-ice {
  0% { transform:scale(.92); }
  45% { transform:scale(1.06); }
  100% { transform:scale(1); }
}
@keyframes streak-feedback-ripple {
  0% { opacity:.48; transform:scale(.8); }
  100% { opacity:0; transform:scale(1.24); }
}
@keyframes streak-feedback-card {
  0% { transform:scale(1); }
  45% { transform:scale(1.025); }
  100% { transform:scale(1); }
}
@keyframes streak-feedback-shield {
  0% { transform:scale(1); }
  35% { transform:scale(1.015); }
  100% { transform:scale(1); }
}
@media(max-width:359px) {
  #streak-page.streak-game-ui .streak-feedback-toast { gap:8px; padding:9px 10px 9px 8px; }
  #streak-page.streak-game-ui .streak-feedback-mark { width:33px; height:33px; flex-basis:33px; }
  #streak-page.streak-game-ui .streak-feedback-title { font-size:7px; }
  #streak-page.streak-game-ui .streak-feedback-detail { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  #streak-page.streak-game-ui .streak-feedback-toast,
  #streak-page.streak-game-ui .streak-feedback-mark,
  #streak-page.streak-game-ui .streak-feedback-mark::after,
  #streak-page.streak-game-ui.streak-feedback-claim #streak-summary .streak-stat-current,
  #streak-page.streak-game-ui.streak-feedback-claim #streak-summary .streak-claim-card,
  #streak-page.streak-game-ui.streak-feedback-freeze .streak-freeze-card {
    animation:none !important;
    transform:none;
  }
  #streak-page.streak-game-ui .streak-feedback-toast { transform:translate(-50%,0); }
}
