/* Show & Tell — shared components for the site and the game surfaces.
   Load after fonts.css and tokens.css. Everything is prefixed st- so it can live
   next to anyone else's CSS (in-chat cards, embeds). */

.st-reset *, .st-reset *::before, .st-reset *::after { box-sizing: border-box; }

/* Labels: the small uppercase kicker with a dot of light */
.st-label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 var(--st-text-label)/1 var(--st-font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--st-punch-deep); }
.st-label::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--st-daylight-glow); flex: none; }
.st-on-ink .st-label, .st-label.st-on-ink { color: var(--st-sunbeam); }

/* Buttons */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--st-radius-pill); font: 700 16px/1 var(--st-font-sans); text-decoration: none; cursor: pointer; transition: transform var(--st-dur-tap) var(--st-ease-pop), box-shadow var(--st-dur-ui) var(--st-ease-out), background var(--st-dur-ui) var(--st-ease-out); -webkit-tap-highlight-color: transparent; }
.st-btn:active { transform: scale(.96); }
.st-btn:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 3px; }
.st-btn-light { background: var(--st-daylight-linear); color: #fff; box-shadow: var(--st-glow-punch); }
.st-btn-light:hover { box-shadow: 0 14px 48px -6px rgba(255, 45, 135, .7); }
.st-btn-ink { background: var(--st-ink); color: #fff; }
.st-btn-white { background: #fff; color: var(--st-ink); }
.st-btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.st-btn-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.st-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.st-btn-full { width: 100%; }

/* Glass: Ink panels that sit on Daylight or photos */
.st-glass { background: rgba(18, 14, 28, .52); color: #fff; border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-radius: 28px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--st-radius-pill); font: 500 13px/1 var(--st-font-mono); background: rgba(18, 14, 28, .4); color: #fff; border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Temperatures: always the color AND the word */
.st-temp { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--st-radius-pill); font: 700 14px/1 var(--st-font-sans); white-space: nowrap; }
.st-temp::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.st-temp-cold { background: var(--st-cobalt-tint); color: var(--st-cobalt-deep); }
.st-temp-warm { background: var(--st-grape-tint); color: var(--st-grape-deep); }
.st-temp-hot { background: var(--st-punch-tint); color: var(--st-punch-deep); }
.st-temp-burning { background: var(--st-tangerine-tint); color: var(--st-tangerine-deep); }
.st-temp-correct { background: var(--st-sunbeam); color: var(--st-ink); box-shadow: var(--st-glow-sun); }
.st-temp-correct::before { background: #fff; box-shadow: 0 0 10px #fff; }
.st-on-ink .st-temp-cold { background: rgba(47, 75, 255, .24); color: #AEBBFF; }
.st-on-ink .st-temp-warm { background: rgba(139, 44, 245, .26); color: #D3B1FF; }
.st-on-ink .st-temp-hot { background: rgba(255, 45, 135, .22); color: #FF9CC6; }
.st-on-ink .st-temp-burning { background: rgba(255, 107, 26, .22); color: #FFB27F; }

/* The AI's voice: Tell is italic */
.st-tell { font-family: var(--st-font-display); font-style: italic; font-weight: 700; letter-spacing: -0.01em; }

/* A layer of Daylight behind content (daylight.js mounts a canvas into it) */
.st-light { position: absolute; inset: 0; overflow: hidden; background: var(--st-daylight-glow); }
.st-light canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The solve flash */
.st-flash { position: fixed; inset: 0; pointer-events: none; z-index: 100; background: radial-gradient(circle at 50% 50%, #fff 0%, #FFF3DC 18%, rgba(255, 201, 60, .9) 32%, rgba(255, 45, 135, .55) 55%, rgba(47, 75, 255, 0) 80%); opacity: 0; }
.st-flash.go { animation: st-flash var(--st-dur-flash) var(--st-ease-out) forwards; }
@keyframes st-flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes st-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.st-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .st-btn { transition: none; }
  .st-flash.go { animation: none; }
}