/* Infin8-EcoSphere Rewards panel content (rewards-panel.js). The popout shell
 * (popout-shell.css) owns the sheet geometry, safe insets and rail; this file
 * styles the pass, calendar, challenges and caps with Infin8 Neon UI tokens only.
 * Text never drops below 13 px and targets stay >= 44 px. */
.ecosphere-rewards { --rw-gap: var(--i8-s3); }
.ecosphere-rewards__wallet { display: flex; flex-wrap: wrap; gap: var(--i8-s2); margin: var(--i8-s1) 0 0; }
.ecosphere-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--i8-s3); border: 1px solid var(--i8-line-soft); border-radius: var(--i8-r-pill);
  background: rgba(9, 12, 24, .72); color: var(--i8-text); font: 800 var(--i8-fs-sm)/1 var(--i8-font); }
.ecosphere-chip--tier { border-color: rgba(127, 240, 255, .5); color: var(--i8-cyan-bright); }
.ecosphere-rewards h3 { margin: 0; font: 800 var(--i8-fs-lg)/1.2 var(--i8-font-display); color: var(--i8-text); }
.ecosphere-rewards p { margin: 0; color: var(--i8-text-soft); font-size: var(--i8-fs-sm); line-height: 1.45; }
.ecosphere-rewards .i8-eyebrow { color: var(--i8-cyan-bright); font: 800 var(--i8-fs-xs)/1.2 var(--i8-font); letter-spacing: var(--i8-track-wide); }
.ecosphere-rewards .i8-muted { color: var(--i8-muted); }
.ecosphere-warn { color: var(--i8-warning) !important; font-weight: 700; }
.ecosphere-rewards__sync { flex: 1 1 100%; color: var(--i8-muted) !important; font-size: var(--i8-fs-xs) !important; }
.ecosphere-claim { justify-self: start; }
.ecosphere-pass__summary, .ecosphere-daily__summary { display: grid; gap: var(--i8-s2); padding: var(--i8-s3); border: 1px solid var(--i8-line-soft); border-radius: var(--i8-r-control);
  background: rgba(21, 26, 42, .86); }
.ecosphere-pass__timer { color: var(--i8-warning) !important; font-weight: 700; }
.ecosphere-pass__xp { font-weight: 800; color: var(--i8-text) !important; }
.ecosphere-pass__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--i8-s2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ecosphere-tier { width: 100%; min-height: 96px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num icon" "name name" "state state"; gap: 4px var(--i8-s2);
  padding: var(--i8-s2) var(--i8-s3); border: 1px solid var(--i8-line); border-radius: var(--i8-r-control); background: rgba(17, 21, 34, .9); color: var(--i8-text);
  font: 700 var(--i8-fs-sm)/1.25 var(--i8-font); text-align: left; cursor: pointer; }
.ecosphere-tier__num { grid-area: num; font: 900 var(--i8-fs-lg)/1 var(--i8-font-display); color: var(--i8-cyan-bright); }
.ecosphere-tier__icon { grid-area: icon; justify-self: end; font-size: 20px; }
.ecosphere-tier__name { grid-area: name; }
.ecosphere-tier__state { grid-area: state; color: var(--i8-muted); font-size: var(--i8-fs-xs); font-weight: 800; letter-spacing: var(--i8-track); text-transform: uppercase; }
.ecosphere-tier[data-state="ready"] { border-color: var(--i8-cyan); box-shadow: var(--i8-glow-1); }
.ecosphere-tier[data-state="ready"] .ecosphere-tier__state { color: var(--i8-cyan-bright); }
.ecosphere-tier[data-state="claimed"] { border-color: rgba(92, 230, 165, .5); }
.ecosphere-tier[data-state="claimed"] .ecosphere-tier__state { color: var(--i8-success); }
.ecosphere-tier[data-state="locked"] { cursor: default; opacity: .78; }
.ecosphere-tier:focus-visible, .ecosphere-tier.gp-focus { outline: 3px solid var(--i8-cyan); outline-offset: 2px; }
.ecosphere-daily__calendar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--i8-s2); grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ecosphere-day { display: grid; gap: 4px; justify-items: center; min-height: 108px; padding: var(--i8-s2) 4px; border: 1px solid var(--i8-line); border-radius: var(--i8-r-control);
  background: rgba(17, 21, 34, .9); text-align: center; font-size: var(--i8-fs-sm); }
.ecosphere-day strong { font: 800 var(--i8-fs-sm)/1.1 var(--i8-font); color: var(--i8-text); }
.ecosphere-day__coins { font-weight: 800; color: var(--i8-warning); }
.ecosphere-day__extra { color: var(--i8-muted); font-size: var(--i8-fs-xs); }
.ecosphere-day__state { color: var(--i8-success); font-weight: 800; font-size: var(--i8-fs-xs); text-transform: uppercase; letter-spacing: var(--i8-track); min-height: 1em; }
.ecosphere-day[data-state="today"] { border-color: var(--i8-cyan); box-shadow: var(--i8-glow-2); }
.ecosphere-day[data-state="today"] .ecosphere-day__state { color: var(--i8-cyan-bright); }
.ecosphere-day[data-state="claimed"], .ecosphere-day[data-state="claimed-today"] { border-color: rgba(92, 230, 165, .45); }
.ecosphere-day[data-big="true"] { background: linear-gradient(160deg, rgba(42, 108, 240, .35), rgba(168, 31, 196, .3)); }
@media (max-width: 560px) {
  .ecosphere-daily__calendar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ecosphere-pass__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ecosphere-challenges, .ecosphere-collection { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--i8-s2); }
.ecosphere-challenge { display: grid; gap: 6px; padding: var(--i8-s2) var(--i8-s3); border: 1px solid var(--i8-line); border-radius: var(--i8-r-control); background: rgba(17, 21, 34, .9); }
.ecosphere-challenge strong { color: var(--i8-text); font-size: var(--i8-fs-sm); }
.ecosphere-challenge[data-done="true"] { border-color: rgba(92, 230, 165, .5); }
.ecosphere-challenge[data-done="true"] strong { color: var(--i8-success); }
.ecosphere-collection li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--i8-s2); min-height: 48px; padding: 4px var(--i8-s3);
  border-radius: var(--i8-r-control); background: rgba(255, 255, 255, .04); color: var(--i8-text); font-size: var(--i8-fs-sm); }
.ecosphere-caps { width: 100%; border-collapse: collapse; font-size: var(--i8-fs-sm); color: var(--i8-text-soft); }
.ecosphere-caps th { text-align: left; color: var(--i8-muted); font: 800 var(--i8-fs-xs)/1.2 var(--i8-font); letter-spacing: var(--i8-track); text-transform: uppercase; padding: 6px; border-bottom: 1px solid var(--i8-line); }
.ecosphere-caps td { padding: 8px 6px; border-bottom: 1px solid rgba(36, 43, 66, .6); }
/* Quiet aggregated coin toast: top-right, under the HUD, never over the centre. */
.ecosphere-coin-toast { position: absolute; top: calc(var(--i8-safe-t, 12px) + 64px); right: calc(var(--i8-safe-r, 12px) + 8px); z-index: var(--i8-z-hud, 20); pointer-events: none;
  padding: 6px 12px; border: 1px solid rgba(255, 212, 121, .5); border-radius: var(--i8-r-pill); background: rgba(9, 12, 24, .78); color: var(--i8-warning);
  font: 800 var(--i8-fs-sm)/1 var(--i8-font); text-shadow: 0 1px 2px #000; }
.ecosphere-coin-toast[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ecosphere-coin-toast:not([hidden]) { animation: i8-rise var(--i8-t-med, 220ms) var(--i8-ease, ease-out); }
}
/* Console / TV (settings kit data-console-layout): 5% title-safe, 56 px targets. */
html[data-console-layout="true"] .ecosphere-rewards .i8-btn, html[data-console-layout="true"] .ecosphere-rewards .i8-tabs > button { min-height: var(--console-target, 56px); }
html[data-console-layout="true"] .ecosphere-tier { min-height: 120px; }
html[data-console-layout="true"] .ecosphere-coin-toast { top: calc(var(--hud-safe-t, 5vh) + 72px); right: calc(var(--hud-safe-r, 5vw) + 8px); }
.ecosphere-rewards .sled-popout__panel { display: grid; gap: var(--rw-gap); align-content: start; }
/* A daily reward or pass tier is waiting: a dot on the ◆ quick action, no modal over play. */
#ecosphere-quick-rewards { position: relative; }
html[data-rewards-ready="true"] #ecosphere-quick-rewards::after { content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--i8-warning); box-shadow: 0 0 6px var(--i8-warning); }