/* Scratch to Reveal + Good to know (extras.js) */
.reveal .sc-title { transition: opacity .4s; }
.sc-stage { position: relative; width: min(78%, 300px); height: min(calc((100vw - 32px) * .78 * .92), 276px); margin: 4px auto 0; }
.sc-outline, .sc-outline svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-inside { position: absolute; inset: 22% 14% 26%; display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center; }
.sc-stage.circle .sc-inside { inset: 18% 14%; }
.sc-inside p { margin: 0; }
.sc-line { font-family: var(--f-script); font-size: calc(24px * var(--ss)); color: var(--ink); line-height: 1.2; }
.sc-date { font-family: var(--f-body); font-weight: 600; font-size: calc(19px * var(--bs)); color: var(--ink); margin-top: 4px !important; }
.sc-wd, .sc-time { font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.sc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); transition: opacity .7s ease; animation: scGlint 3s ease-in-out infinite; }
@keyframes scGlint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.sc-stage.touched .sc-canvas { animation: none; }
.sc-stage.revealed .sc-canvas { opacity: 0; pointer-events: none; }
.sc-stage.revealed .sc-inside { animation: scPop .7s cubic-bezier(.2,.8,.2,1.2); }
@keyframes scPop { from { transform: scale(.9); } to { transform: scale(1); } }
.sc-burst { position: absolute; left: 50%; top: 45%; pointer-events: none; }
.sc-burst i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0; animation: scBurst 1.6s cubic-bezier(.15,.7,.3,1) var(--dl) forwards; }
.sc-burst i:nth-child(3n) { border-radius: 2px; width: 6px; height: 10px; }
@keyframes scBurst { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 60px)) scale(1) rotate(200deg); } }
.sc-hint { font-size: 13px; font-style: italic; color: var(--muted); margin: 12px 0 0; transition: opacity .4s; }
.sc-btn { margin-top: 6px; padding: 6px 14px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.reveal.revealed .sc-hint, .reveal.revealed .sc-btn { opacity: 0; pointer-events: none; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.info-card { padding: 18px 14px 16px; text-align: center; }
.info-card h3 { margin: 6px 0 4px; font-family: var(--f-script); font-weight: 400; font-size: calc(26px * var(--ss)); color: var(--ink); line-height: 1.2; }
.info-card p { margin: 0; font-size: calc(15.5px * var(--bs)); color: var(--text); line-height: 1.5; white-space: pre-line; }
.info-ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--soft); color: var(--ink); }
.info-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .sc-canvas { animation: none; } .sc-burst { display: none; } }