/* css/season.css — seasonal events (docs/EVENTS_SEASONAL.md §A10): the HUD currency pill, the event hub (tasks,
   calendar, shop + try-on, track, settings), the welcome card, the season QC overlay („Duch w kadrze” / „Kartka z
   magazynu”) and its result card. One set of rules, a theme per season through the --ssn-* tokens below
   (Halloween = the default, Christmas = .scr-season--xmas / .modal--season-xmas / .qc--season-xmas /
   .hud-pill--season-xmas). Flat panels with an accent edge (no decorative gradients), the site tokens for
   radius / panels / text. Phones (390 × 844) first; the wide desktop layout keeps the sheet as the right-side panel
   (css/sheets.css). UI micro-animations always on (DECISIONS 2026-10-11); nothing blinks faster than 3 Hz. */

:root {
  --hw-orange: #ff7a18;
  --hw-purple: #8a2be2;
  /* season theme (Halloween default) */
  --ssn-a: var(--hw-orange); /* accent: today, ready, next, bars */
  --ssn-a-ink: #1d1208; /* text on the accent */
  --ssn-a-glow: rgba(255, 122, 24, 0.45);
  --ssn-b: var(--hw-purple); /* second colour: catch chip, stamps */
  --ssn-num: #ffd2a6; /* currency numbers */
  --ssn-head-bg: #241733;
  --ssn-head-edge: #5a3784;
  --ssn-sub: #d9c8f2;
  --ssn-calm: #ffcf9a;
  --ssn-tile: #1f1830;
  --ssn-tile-edge: #4a3a6e;
  --ssn-ready-bg: #33210f;
  --ssn-special-bg: #261b3a;
  --ssn-special-edge: #6a4a9a;
  --ssn-modal-bg: #1d1430;
  --ssn-icon-bg: #120d1c;
}
.scr-season--xmas,
.modal--season-xmas,
.modal--season-moment-xmas,
.qc--season-xmas,
.hud-pill--season-xmas {
  --ssn-a: #e3213f;
  --ssn-a-ink: #ffffff;
  --ssn-a-glow: rgba(227, 33, 63, 0.45);
  --ssn-b: #1f8a4c;
  --ssn-num: #ffe2a0;
  --ssn-head-bg: #12301f;
  --ssn-head-edge: #2f7a4c;
  --ssn-sub: #cfe6d6;
  --ssn-calm: #ffe2a0;
  --ssn-tile: #15281e;
  --ssn-tile-edge: #2f5a41;
  --ssn-ready-bg: #3a1218;
  --ssn-special-bg: #183324;
  --ssn-special-edge: #3f8a5c;
  --ssn-modal-bg: #10261a;
  --ssn-icon-bg: #0c1a12;
}

/* ---------------------------------------------------------------- HUD pill */
.hud-pill--season { position: relative; padding-right: 8px; }
.hud-pill--season[hidden] { display: none; }
.hud-pill--season .hud-pill__main { gap: 3px; }
.hud-pill__sico { display: grid; place-items: center; width: 24px; height: 24px; }
.hud-pill--season .pill__num { color: var(--ssn-num); }
.hud-pill__dot--season { top: -3px; right: -3px; background: var(--ssn-a); box-shadow: var(--ring-new); }
/* tease (announced, not started): the start date instead of a balance, calmer */
.hud-pill--season.is-tease .pill__num { color: var(--ssn-sub); font-weight: 700;  }
@media not all and (min-width: 900px) and (orientation: landscape) {
  /* phones: the event pill sits on its own row under the gear, right-aligned (the event-button spot of mobile
     games) — in the top row it squeezed the profile card down to a clipped letter (390 px, with the league crown);
     the income chip (right: 116px) and the goal card (left) keep their places */
  .hud-pill--season { position: absolute; top: 48px; right: 0; padding-right: 6px; transition: opacity var(--mo-med) var(--mo-out); }
  .hud-pill--season .pill__num { font-size: var(--fs-14); }
  /* an open sheet starts right under the top bar: the pill must not sit on its edge (the hub header shows the
     balance anyway) — same rule as the goal card (css/hud.css) */
  #app:has(#layer-sheets > .sheet) .hud-pill--season,
  #app:has(#layer-sheets > .sheet) .hud-pill--season button { opacity: 0; pointer-events: none; }
}

/* ---------------------------------------------------------------- hub */
.scr-season .scr__title { display: flex; align-items: center; gap: 8px; }
.ssn-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--ssn-head-bg);
  border: 2px solid var(--ssn-head-edge);
}
.ssn-bal { display: flex; align-items: center; gap: 8px; }
.ssn-bal__num { font-size: var(--fs-24); font-weight: 900; color: var(--ssn-num);  }
.ssn-bal__name { font-size: var(--fs-14); font-weight: 800; color: var(--text-2); }
.ssn-sub { margin: 0; font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-body); color: var(--ssn-sub); }
.ssn-sub--calm { color: var(--ssn-calm); }
.ssn-sub--grace { color: var(--ssn-calm); }
.ssn-note { margin: 8px 2px 4px; font-size: var(--fs-12); line-height: var(--lh-body); color: var(--text-dim); }
.ssn-tabs .scr-seg { margin-bottom: 10px; }
.ssn-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: var(--ssn-a);
}

/* mini-moment tile (top of the tasks tab) */
.ssn-moment {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--ssn-tile);
  border: 2px solid var(--ssn-tile-edge);
}
.ssn-moment.is-ready { border-color: var(--ssn-a); box-shadow: 0 0 0 2px var(--ssn-a); }
.ssn-moment__ico { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--ssn-icon-bg); }
.ssn-moment__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ssn-moment__title { font-weight: 900; font-size: var(--fs-16); }
.ssn-moment__sub { font-size: var(--fs-12); color: var(--text-2); line-height: var(--lh-body); }
.ssn-moment__act { flex: none; }
.ssn-moment__act .btn { min-height: 44px; }

/* tasks */
.ssn-tasks { display: flex; flex-direction: column; gap: 6px; }
.ssn-task {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--panel-raised);
  border: 2px solid var(--panel-border);
}
.ssn-task--special { border-color: var(--ssn-special-edge); background: var(--ssn-special-bg); }
.ssn-task__main { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ssn-task__title { font-weight: 800; font-size: var(--fs-14); line-height: var(--lh-tight); }
.ssn-task__bar { height: 7px; }
.ssn-task__bar .scr-bar__fill { background: var(--ssn-a); }
.ssn-task__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ssn-task__prog { font-size: var(--fs-12); font-weight: 800; color: var(--text-2); }
.ssn-reward { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); font-weight: 900; color: var(--ssn-num); }
.ssn-reward--gem { color: var(--gem-light); }
.ssn-reward--tok { color: #bfe3ff; }

/* calendar: Halloween 3 × 3 tiles, Christmas 4 × 6 advent doors (numbers, smaller) */
.ssn-cal { display: grid; gap: 8px; }
.ssn-cal--nine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssn-cal--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ssn-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 104px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  border: 2px solid var(--panel-border);
  background: var(--panel-raised);
  color: var(--text);
  font: inherit;
  text-align: center;
}
.ssn-cal--wide .ssn-slot { min-height: 84px; padding: 6px 3px; gap: 2px; border-radius: var(--r-md); }
.ssn-slot__day { font-size: var(--fs-12); font-weight: 800; color: var(--text-dim);   }
.ssn-cal--wide .ssn-slot__day { font-size: var(--fs-16); font-weight: 900; letter-spacing: 0; color: var(--text-2); }
.ssn-slot__ico { display: grid; place-items: center; height: 32px; }
.ssn-cal--wide .ssn-slot__ico { height: 26px; }
.ssn-slot__rw { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.ssn-slot__state { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); font-weight: 800; color: var(--text-dim); }
.ssn-slot.is-future { opacity: 0.55; }
.ssn-slot.is-future .ssn-slot__ico { opacity: 0.6; }
.ssn-slot.is-open { border-color: #2f6b3b; }
.ssn-slot.is-open .ssn-slot__state { color: #8fe3a0; }
.ssn-slot.is-ready { cursor: var(--cur-hand); border-color: var(--ssn-a); background: var(--ssn-ready-bg); box-shadow: 0 0 0 2px var(--ssn-a); }
.ssn-slot.is-ready .ssn-slot__state--go {
  margin-top: 1px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--ssn-a);
  color: var(--ssn-a-ink);
}
.ssn-cal--wide .ssn-slot.is-ready .ssn-slot__state--go { padding: 2px 8px; }
.ssn-slot.is-today { box-shadow: 0 0 0 2px var(--ssn-a); }
.ssn-slot.is-today .ssn-slot__day { color: var(--ssn-num); }
.ssn-slot.is-ready:active { transform: scale(0.97); }
.ssn-collect-all { margin-top: 10px; width: 100%; }

/* shop: the try-on stage on top, then „Dla ekipy” / „Do magazynu” / gems / handy / pack */
.ssn-try { margin-bottom: 10px; }
.ssn-try[hidden] { display: none; }
.ssn-try .ssn-try__stage { height: clamp(150px, 22vh, 190px); border-color: var(--ssn-tile-edge); } /* shorter than the Szafa: the rows start sooner */
.ssn-try__cap { margin: 6px 2px 0; font-size: var(--fs-12); font-weight: 800; color: var(--text-2); text-align: center; }
.ssn-shop { display: flex; flex-direction: column; gap: 6px; }
.ssn-item.is-owned { border-color: #2f6b3b; }
.ssn-item--worn { cursor: var(--cur-hand); }
.ssn-item.is-sel { border-color: var(--ssn-a); box-shadow: 0 0 0 2px var(--ssn-a); }
.ssn-trybtn {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  cursor: var(--cur-hand);
}
.ssn-trybtn:focus-visible { outline: 2px solid var(--ssn-a); outline-offset: 2px; }
.ssn-sw { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.ssn-rar { font-size: var(--fs-12); font-weight: 800; }
.ssn-ret { color: var(--text-dim); font-weight: 700; }
.ssn-buywrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ssn-buy { min-width: 84px; gap: 5px; }
.ssn-buy.is-short { --btn-bg: var(--line); --btn-edge: var(--raised-2); --btn-fg: var(--text-dim); --btn-hi: var(--btn-shine-soft); }
.ssn-missing { font-size: var(--fs-12); font-weight: 800; color: var(--text-dim); }
.ssn-state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); font-weight: 800; color: #8fe3a0; }

/* track: horizontal strip of tier cards + one bar */
.ssn-track__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.ssn-track__num { font-size: var(--fs-16); font-weight: 900; color: var(--ssn-num); }
.ssn-track__next { font-size: var(--fs-12); font-weight: 700; color: var(--text-2); }
.ssn-track__bar { height: 10px; margin-bottom: 10px; }
.ssn-track__bar .scr-bar__fill { background: var(--ssn-a); }
.ssn-track__done { margin: 0 0 10px; font-weight: 800; color: var(--ssn-num); }
.ssn-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
}
.ssn-tier {
  position: relative;
  flex: none;
  width: 108px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: var(--r-md);
  background: var(--panel-raised);
  border: 2px solid var(--panel-border);
  text-align: center;
  scroll-snap-align: start;
}
.ssn-tier__at { font-size: var(--fs-12); font-weight: 900; color: var(--text-dim); }
.ssn-tier__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg); }
.ssn-tier__name { font-size: var(--fs-12); font-weight: 800; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.ssn-tier__ok { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; }
.ssn-tier.is-paid { border-color: #2f6b3b; opacity: 0.85; }
.ssn-tier.is-next { border-color: var(--ssn-a); box-shadow: 0 0 0 2px var(--ssn-a); }
.ssn-tier.is-next .ssn-tier__at { color: var(--ssn-num); }

/* settings block */
.ssn-settings { margin-top: 14px; }
.ssn-setrow { flex-wrap: wrap; gap: 8px; }
.ssn-setrow .scr-seg { flex: 1 1 220px; }

/* ---------------------------------------------------------------- welcome card */
.modal--season { text-align: center; background: var(--ssn-modal-bg); border-color: var(--ssn-head-edge); }
.ssn-welcome__art { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.ssn-welcome__body { margin: 6px 0 10px; color: var(--text-2); line-height: var(--lh-body); }
.ssn-welcome__gift { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--raised-2); border: 0; color: var(--ssn-num); font-weight: 900; }

/* ---------------------------------------------------------------- season QC overlay (ghost / star on the photo) */
.qc--season .qc-demo { display: none; }
/* this QC pays nothing itself (openQc apply: false): no fee / XP / „Trening — bez nagrody” line, the event card shows the reward */
.qc--season .qc-res__money { display: none; }
.qc--season .qc-res__top { justify-content: center; }
.sm-ghost {
  position: absolute;
  z-index: 3;
  left: -10%;
  top: 38%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.88;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3));
  transition: opacity var(--mo-med) var(--mo-out);
}
.sm-ghost.is-centre { opacity: 1; filter: brightness(1.25); }
.sm-ghost--star.is-centre { filter: brightness(1.3); }
/* after the shots: a caught sprite stays pinned on the photo, a missed one fades out (js hides it) */
.sm-ghost.is-caught { opacity: 1; filter: brightness(1.25); }
.sm-ghost.is-gone { opacity: 0; transition: opacity var(--mo-med) var(--mo-out); }
.sm-ghost[hidden] { display: none; }
.sm-brief {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 10px;
  max-width: 86%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--r-md);
  background: rgba(18, 16, 28, 0.88);
  color: var(--ssn-num);
  font-size: var(--fs-14);
  font-weight: 800;
  text-align: center;
  pointer-events: none;
  transition: opacity var(--mo-slow) var(--mo-out), transform var(--mo-slow) var(--mo-out);
}
.sm-brief.is-out { opacity: 0; transform: translate(-50%, -6px); }
.sm-caught {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--ssn-b);
  color: #fff;
  font-weight: 900;
  font-size: var(--fs-14);
  opacity: 0;
  pointer-events: none;
}
.sm-caught.is-in { animation: sm-caught 1.4s var(--mo-out) forwards; }
@keyframes sm-caught {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  70% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(1); }
}
.sm-stamps { position: absolute; z-index: 4; right: 8px; top: 8px; display: flex; gap: 2px; pointer-events: none; }
.sm-stamp { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ssn-b); animation: sm-stamp var(--mo-slow) var(--mo-spring); }
@keyframes sm-stamp {
  from { transform: scale(0.3); }
  to { transform: scale(1); }
}

/* result card */
.modal--season-moment { text-align: center; background: var(--ssn-modal-bg); border-color: var(--ssn-head-edge); }
.sm-res__head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sm-res__head .modal__title { margin: 0; }
.sm-res__stars { display: flex; justify-content: center; gap: 4px; margin: 8px 0 4px; color: #3a3550; }
.sm-star.is-on { color: var(--yellow); }
.sm-res__ghosts { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 4px 0 8px; }
.sm-res__ghost { opacity: 0.25; }
.sm-res__ghost.is-on { opacity: 1; }
.sm-res__ghostsText { margin-left: 6px; font-size: var(--fs-14); font-weight: 800; color: var(--text-2); }
.sm-res__bubble { display: flex; flex-direction: column; gap: 2px; margin: 4px auto 10px; max-width: 300px; padding: 8px 12px; border-radius: var(--r-lg); background: var(--raised-2); text-align: left; font-size: var(--fs-14); }
.sm-res__handle { font-size: var(--fs-12); font-weight: 800; color: var(--text-dim); }
.sm-res__reward { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: var(--fs-20); font-weight: 900; color: var(--ssn-num); }
.sm-res__none { margin: 0 0 10px; font-size: var(--fs-14); color: var(--text-2); }
.sm-res__preview { margin: 0 auto 10px; width: min(220px, 60%); }
.sm-card { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.sm-res__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sm-res__actions .btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  /* big scene-ish motion only; UI micro-animations stay on (DECISIONS 2026-10-11) */
  .sm-ghost { transition: none; }
}