/* /jar — the Spark Jar: a big glass jar full of glowing sparks, every Spark as a card,
   the Full Jar certificate and the Wall of Fame. (content agent) */

body.page-jar { --ink-accent: var(--molten); --card-got: rgba(255, 194, 61, .12); --card-got-edge: rgba(255, 194, 61, .55); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.page-jar { --ink-accent: #A8480A; --card-got: #FFF1CC; --card-got-edge: #E0A93A; }
  :root:not([data-theme="dark"]) body.page-jar .kicker { color: var(--ink-accent); }
}

/* ── the jar ──────────────────────────────────────────────────────────── */
.jar-hero {
  display: grid; gap: clamp(24px, 5vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  padding-bottom: clamp(40px, 6vw, 80px);
}
@media (max-width: 820px) { .jar-hero { grid-template-columns: minmax(0, 1fr); } }
.jar-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.big-jar {
  --fill: 0;
  position: relative; display: block; width: min(100%, 340px); aspect-ratio: 250 / 300; padding: 0; border: 0; background: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border-radius: 40px;
  transition: transform .35s var(--spring);
}
@media (max-width: 820px) { .big-jar { width: min(76vw, 300px); } }
.big-jar:hover { transform: rotate(-2deg) scale(1.02); }
.big-jar:active { transform: scale(.97); }
.big-jar.is-rattle { animation: jar-rattle .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes jar-rattle { 15% { transform: rotate(-6deg) translateY(-4px); } 35% { transform: rotate(5deg); } 55% { transform: rotate(-3deg); } 75% { transform: rotate(2deg); } 100% { transform: none; } }
.big-jar:focus-visible { outline-offset: 8px; }
.big-jar > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.bj-canvas { pointer-events: none; }
.bj-glass { fill: rgba(160, 210, 255, .12); }
.bj-glow { opacity: calc(.15 + var(--fill) * .85); transition: opacity 1s; }
.bj-tag text { font: 700 9px/1 var(--font-display); letter-spacing: .1em; fill: #0D1120; }
.bj-tag { transform-box: view-box; transform-origin: 200px 58px; animation: tag-sway 4s ease-in-out infinite; }
@keyframes tag-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.big-jar.is-rattle .bj-lid { transform-box: view-box; transform-origin: 125px 40px; animation: lid-jiggle .45s linear; }
@keyframes lid-jiggle { 20% { transform: translateY(-5px) rotate(-3deg); } 45% { transform: translateY(-2px) rotate(2deg); } 70% { transform: translateY(-3px) rotate(-1deg); } 100% { transform: none; } }
.jar-tip { margin: 0; color: var(--fg-muted); font-size: var(--step--1); text-align: center; }

.jar-info { max-width: 520px; }
.jc-count { margin: 0; display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; font-family: var(--font-display); }
.jc-count b { font-size: var(--step-5); line-height: .95; color: var(--ink-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.jc-count span { font-size: var(--step-2); font-weight: 600; }
.jar-meter { height: 20px; margin: .8em 0 1em; border-radius: 99px; background: var(--panel-2); border: var(--stroke) solid var(--outline); overflow: hidden; }
.jar-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--ember), var(--molten)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), inset 0 3px 0 rgba(255, 255, 255, .3); transition: width 1.2s var(--ease-out); }
.jar-say { font-size: var(--step-1); line-height: 1.4; margin: 0 0 .4em; }
.jar-today { color: var(--fg-muted); margin: 0 0 1.2em; }
.jar-today b { color: var(--fg); font-variant-numeric: tabular-nums; }
.jar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 1.6em; }
.jar-actions .switch { min-height: 44px; font-weight: 700; }
.jar-move { border-top: 2px dashed var(--line); padding-top: 1.1em; }
.jar-move h2 { font-size: var(--step-1); margin: 0 0 .3em; }
.jar-move p { color: var(--fg-muted); margin: 0 0 .7em; }
.jar-nojs { padding: .8em 1em; border-radius: var(--r); background: var(--panel); border: 2px dashed var(--line); }

/* ── every Spark ──────────────────────────────────────────────────────── */
.jar-list { padding-bottom: clamp(40px, 7vw, 90px); }
.sgroup + .sgroup { margin-top: clamp(28px, 4vw, 48px); }
.sgroup .tw-tip { margin: -.3em 0 1em; max-width: 60ch; color: var(--fg-muted); }
.sgroup-h { font-size: var(--step-2); display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.sgroup-n { font: 700 var(--step-0)/1 var(--font-display); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sgroup.is-done .sgroup-n { color: var(--ink-accent); }
.sgroup.is-done .sgroup-n::after { content: ' · complete!'; }
.scards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.scard {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start;
  padding: 14px 16px 14px 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 55%, transparent); border: 2px dashed var(--line);
  color: var(--fg-muted);
}
.scard-icon { width: 40px; height: 50px; color: var(--fg-muted); }
.scard-name { font-size: var(--step-1); margin: 0 0 .2em; color: var(--fg-muted); letter-spacing: .08em; }
.scard-text { margin: 0; font-size: var(--step--1); line-height: 1.4; }
.scard-where {
  display: inline-flex; align-items: center; gap: .3em; min-height: 28px; margin-top: .35em; padding: .2em .1em;
  font: 700 .82rem/1.2 var(--font-display); color: var(--link); text-decoration: none;
}
.scard-where span { transition: transform .25s var(--spring); }
.scard-where:hover { color: var(--link); text-decoration: underline; }
.scard-where:hover span { transform: translateX(3px); }
.scard-when { margin: .4em 0 0; font: 700 .72rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-accent); }
.scard.got {
  background: var(--card-got); border: var(--stroke) solid var(--card-got-edge); color: var(--fg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18), 0 0 22px rgba(255, 194, 61, .12);
}
.scard.got .scard-name { color: var(--fg); letter-spacing: 0; }
.scard.got .scard-icon { filter: drop-shadow(0 0 6px rgba(255, 194, 61, .7)); animation: spark-dance 2.4s ease-in-out infinite; }
.scard.got:nth-child(3n+2) .scard-icon { animation-delay: -.8s; }
.scard.got:nth-child(3n) .scard-icon { animation-delay: -1.6s; }
.scard.is-new { animation: card-new .9s var(--spring); }
@keyframes card-new { 0% { transform: scale(.85) rotate(-3deg); } 60% { transform: scale(1.05) rotate(1deg); } 100% { transform: none; } }
.jar-list.no-hints .scard:not(.got) .scard-text { font-style: italic; }
.jar-list.is-off .scard-icon { animation-play-state: paused !important; }

/* ── the certificate ──────────────────────────────────────────────────── */
.cert-wrap {
  display: grid; gap: clamp(24px, 4vw, 48px); align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding-bottom: clamp(48px, 7vw, 90px);
}
@media (max-width: 860px) { .cert-wrap { grid-template-columns: minmax(0, 1fr); } }
.cert {
  position: relative; padding: 14px; border-radius: 10px; color: #1D2238;
  background: #FFF8EA; border: var(--stroke) solid var(--outline);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .25), 0 24px 40px rgba(0, 0, 0, .25);
  transform: rotate(-1deg);
}
.cert-inner {
  position: relative; text-align: center; padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 44px);
  border: 4px double #C8A15A; border-radius: 6px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 194, 61, .18), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(200, 161, 90, .06) 14px 15px);
}
.cert-mark { width: 84px; height: 84px; margin: 0 auto .4em; background: #151B2E; border-radius: 50%; padding: 6px; border: 3px solid #0D1120; }
.cert-k { font: 700 .8rem/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: #8A6A2E; margin: 0 0 .5em; }
.cert-title { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); margin: 0 0 .35em; color: #1D2238; }
.cert-line { font: 400 var(--step-1)/1.3 var(--font-body); font-style: italic; margin: 0 0 .4em; color: #3A3F55; }
.cert input.cert-name {
  width: min(100%, 420px); margin: .1em auto .5em; display: block; text-align: center;
  font: 600 clamp(1.6rem, 1.2rem + 2vw, 2.4rem)/1.2 var(--font-display); color: #A8480A;
  background: transparent; border: 0; border-bottom: 3px dashed #C8A15A; border-radius: 0; padding: .15em .2em;
}
.cert-name::placeholder { color: #C9B48A; font-weight: 500; }
.cert input.cert-name:focus { box-shadow: none; border-bottom-style: solid; border-bottom-color: #FF6B1A; }
.cert-meta { margin: .4em 0 1.4em; color: #5A5F75; }
.cert-sign { display: inline-flex; flex-direction: column; align-items: center; gap: .1em; padding-top: .3em; border-top: 2px solid #1D2238; min-width: 220px; }
.cert-sig { font: italic 400 1.8rem/1.1 var(--font-body); color: #1D2238; transform: rotate(-4deg); margin-top: -1.2em; }
.cert-sig-k { font-size: .78rem; color: #5A5F75; }
.cert-seal { position: absolute; right: clamp(8px, 3vw, 26px); bottom: clamp(8px, 3vw, 22px); width: clamp(70px, 10vw, 100px); height: auto; transform: rotate(12deg); }
.cert-side .kicker { margin-bottom: .3em; }
.cert-say { font-size: var(--step-1); line-height: 1.45; }
.fame-form { margin-top: 1.6em; padding-top: 1.2em; border-top: 2px dashed var(--line); }
.fame-form h3 { font-size: var(--step-2); margin: 0 0 .1em; }
.fame-form .initials { justify-content: flex-start; }
.fame-form .initials input { color: var(--molten); }
.fame-say { margin: .8em 0 0; font-weight: 700; }
.fame-say.is-bad { color: var(--bad); }
.fame-say.is-ok { color: var(--ok); }
.cert-wrap:not([hidden]) .cert { animation: cert-in .8s var(--spring); }
@keyframes cert-in { 0% { transform: rotate(-8deg) scale(.8) translateY(30px); opacity: 0; } 100% { transform: rotate(-1deg); opacity: 1; } }

/* ── the Wall of Fame ─────────────────────────────────────────────────── */
.fame { padding-bottom: clamp(56px, 9vw, 120px); }
.fame h2 { font-size: var(--step-3); }
.plaques { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.plaque {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 10px 12px; border-radius: 12px; border: var(--stroke) solid var(--outline);
  background: linear-gradient(160deg, #E9CD8E, #C8A15A 45%, #9C7A3C);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 5px 0 rgba(0, 0, 0, .28);
  color: #3A2A0E;
}
.plaque::before, .plaque::after { content: ''; position: absolute; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #6B5222; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.plaque::before { left: 8px; }
.plaque::after { right: 8px; }
.plaque b { font: 700 1.9rem/1 var(--font-display); letter-spacing: .12em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 -1px 0 rgba(0, 0, 0, .25); }
.plaque small { font: 700 .7rem/1 var(--font-body); opacity: .75; }
.plaque.is-me { animation: plaque-in .8s var(--spring); outline: 3px solid var(--steam); outline-offset: 3px; }
@keyframes plaque-in { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: none; } }
.fame-empty { margin: 1em 0 0; padding: 1.2em; border: 2px dashed var(--line); border-radius: var(--r); text-align: center; color: var(--fg-muted); font-weight: 700; }

html.calm .scard.got .scard-icon, html.calm .bj-tag { animation: none; }

/* ── printing the certificate: only the certificate ───────────────────── */
@media print {
  body.printing-cert * { visibility: hidden !important; }
  body.printing-cert .cert, body.printing-cert .cert * { visibility: visible !important; }
  body.printing-cert .cert {
    position: fixed !important; left: 0; top: 0; width: 100%; transform: none !important; box-shadow: none !important;
    animation: none !important; margin: 0;
  }
  body.printing-cert .cert-name::placeholder { color: transparent; }
  body.printing-cert { background: #fff !important; }
}