/* Shushometer: a cosy night sky, a sleepy creature on a cloud, and a sky that blushes when it's loud.
   Shares styles.css for buttons, toasts and the about section. */
.sh-page { --accent: #6B5BE8; --accent-ink: #FFFFFF; --accent-soft: #ECE8FF; --accent-text: #5543D6; --gold: #FFE07A; background: var(--bg); }
.sh-page #shSound .off, .sh-page #shSound[aria-pressed="false"] .on { display: none; }
.sh-page #shSound[aria-pressed="false"] .off { display: block; }

.sh-night { color: #FFF7EC; padding-bottom: 48px; background: radial-gradient(120% 80% at 50% 0%, #2B3F86 0%, #16244A 55%, #0B1330 100%); }
.sh-bar { display: flex; align-items: center; gap: 10px; max-width: 1000px; margin: 0 auto; padding: 14px 16px; }
.sh-brand { display: inline-flex; align-items: center; gap: 9px; color: #FFF7EC; text-decoration: none; font: 800 21px var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.sh-brand svg { width: 28px; height: 28px; }
.sh-by { color: #AFC0E8; font-size: 13.5px; font-weight: 600; text-decoration: none; margin-right: auto; white-space: nowrap; }
.sh-by:hover { color: var(--gold); }
.sh-night .pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #FFF7EC; }
.sh-main { max-width: 900px; margin: 0 auto; padding: 8px 16px 0; display: grid; gap: 22px; }
.sh-hero { text-align: center; }
.sh-hero h1 { margin: 0 auto; max-width: 14em; font: 800 clamp(30px, 6vw, 54px)/1.04 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.sh-hero p { margin: 12px auto 0; max-width: 34em; color: #C9D3F0; font-size: clamp(15.5px, 2.2vw, 18px); text-wrap: balance; }

/* ---------- The scene ---------- */
.sh-scene {
  --level: 0; position: relative; overflow: hidden; display: grid; place-items: end center; min-height: clamp(460px, 72vh, 780px); padding: 28px 20px 64px; border-radius: 28px;
  background:
    radial-gradient(circle at 82% 16%, #FFF4C2 0 26px, rgba(255, 244, 194, .25) 27px 44px, transparent 45px),
    radial-gradient(120% 90% at 50% 10%, #2E4A9A, #172A5C 60%, #0E1A40);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .35);
}
.sh-scene::before { /* twinkling stars */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(2px 2px at 12% 22%, #FFF 50%, transparent 51%), radial-gradient(2px 2px at 30% 12%, #FFF 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 30%, #FFF 50%, transparent 51%), radial-gradient(2px 2px at 66% 8%, #FFF 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20% 60%, #FFF 50%, transparent 51%), radial-gradient(2px 2px at 90% 48%, #FFF 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 84%, #FFF 50%, transparent 51%), radial-gradient(2px 2px at 76% 70%, #FFF 50%, transparent 51%);
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.sh-scene::after { /* the sky blushes as the room gets loud */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(90% 80% at 50% 60%, rgba(255, 110, 110, .55), rgba(227, 70, 125, .25) 60%, transparent);
}
.sh-scene[data-status="near"]::after { opacity: .3; }
.sh-scene[data-status="loud"]::after { opacity: .9; }
.sh-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.sh-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* The creature, with its dream floating up beside its head */
.sh-creature-holder { position: relative; }
.sh-dream { position: absolute; left: 78%; top: -6%; width: 120px; height: 110px; pointer-events: none; opacity: 0; }
.sh-dream i { position: absolute; border-radius: 50%; background: #FFF7EC; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.sh-dream i:nth-child(1) { left: 0; bottom: 6px; width: 12px; height: 12px; }
.sh-dream i:nth-child(2) { left: 16px; bottom: 22px; width: 20px; height: 20px; }
.sh-dream-cloud { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 78px; height: 66px; border-radius: 50%; background: #FFF7EC; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.sh-dream-icon svg { display: block; width: 40px; height: 40px; }
.sh-dream.on { opacity: 1; }
.sh-dream.on i:nth-child(1) { animation: dream-in .5s var(--spring) backwards; }
.sh-dream.on i:nth-child(2) { animation: dream-in .5s var(--spring) .25s backwards; }
.sh-dream.on .sh-dream-cloud { animation: dream-in .6s var(--spring) .5s backwards, dream-float 4s ease-in-out 1.1s infinite; }
.sh-dream.popped { opacity: 1; animation: dream-pop .35s ease-out forwards; }
@keyframes dream-in { from { scale: 0; opacity: 0; } }
@keyframes dream-float { 50% { translate: 0 -8px; } }
@keyframes dream-pop { 50% { scale: 1.25; } to { scale: 0; opacity: 0; } }

/* After a loud spell: a big yawn before dozing off */
.sh-creature.yawn .sh-body { animation: yawn 1.6s ease-in-out; }
.sh-creature.yawn .sh-mouth-o { opacity: 1; animation: yawn-mouth 1.6s ease-in-out; transform-box: fill-box; transform-origin: center; }
.sh-creature.yawn .sh-mouth-smile { opacity: 0; }
@keyframes yawn { 30%, 60% { transform: scale(1.04, 1.08) translateY(-6px); } }
@keyframes yawn-mouth { 0% { transform: scale(.4); } 40%, 60% { transform: scale(1.4, 1.6); } 100% { transform: scale(.4); } }
.sh-stage { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; width: 100%; }

/* The creature */
.sh-creature { width: min(64vw, 340px); }
.sh-creature svg { display: block; width: 100%; overflow: visible; }
.sh-body { transform-origin: 110px 178px; transition: transform .4s var(--spring); }
.sh-eyes-open, .sh-brows, .sh-mouth-flat, .sh-mouth-o, .sh-bang { opacity: 0; transition: opacity .2s; }
.sh-zzz { transition: opacity .3s; }
.sh-paw { transition: transform .35s var(--spring); transform-box: fill-box; transform-origin: center; }
/* Quiet: asleep, breathing slowly, with z's floating up */
.sh-creature.quiet .sh-body { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.025, .985); } }
.sh-creature.quiet .sh-zzz text { animation: zzz 3s ease-in-out infinite; }
.sh-creature.quiet .sh-zzz text:nth-child(2) { animation-delay: .5s; }
.sh-creature.quiet .sh-zzz text:nth-child(3) { animation-delay: 1s; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -12px); } }
/* Near: one look around, eyes open and blinking */
.sh-creature.near .sh-zzz, .sh-creature.loud .sh-zzz { opacity: 0; }
.sh-creature.near .sh-eyes-closed, .sh-creature.loud .sh-eyes-closed, .sh-creature.loud .sh-mouth-smile, .sh-creature.near .sh-mouth-smile { opacity: 0; }
.sh-creature.near .sh-eyes-open, .sh-creature.loud .sh-eyes-open { opacity: 1; }
.sh-creature.near .sh-mouth-flat { opacity: 1; }
.sh-creature.near .sh-eye { animation: blink 3.5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.sh-creature.near .sh-body { transform: translateY(-4px) rotate(-2deg); }
/* Loud: brows down, mouth open, paws over ears, puffed up and shaking with the noise */
.sh-creature.loud .sh-brows, .sh-creature.loud .sh-mouth-o, .sh-creature.loud .sh-bang { opacity: 1; }
.sh-creature.loud .sh-body { animation: rattle .12s linear infinite; transform: scale(calc(1.04 + var(--level) * .08)); }
.sh-scene[data-status="loud"] .sh-body { --level: inherit; }
@keyframes rattle { 0% { translate: -2px 0; } 50% { translate: 2px -1px; } 100% { translate: -2px 0; } }
.sh-creature.loud .sh-paw.l { transform: translate(12px, -78px) rotate(-30deg); }
.sh-creature.loud .sh-paw.r { transform: translate(-12px, -78px) rotate(30deg); }
.sh-creature.loud .sh-bang text { animation: bang .5s ease-in-out infinite alternate; }
@keyframes bang { to { transform: translateY(-4px); } }

.sh-status { margin: 0; font: 800 clamp(24px, 4.4vw, 40px) var(--f-display); letter-spacing: -.02em; text-align: center; transition: color .3s; }
.sh-scene[data-status="loud"] .sh-status { color: #FFE07A; }

/* The meter */
.sh-meter {
  position: relative; width: min(100%, 560px); height: 22px; border-radius: 999px; overflow: visible;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}
.sh-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #8EDBB0, #FFE07A 55%, #FF8A80 80%, #E3467D); background-size: 560px 100%; transition: width .1s linear;
}
.sh-limit-mark { position: absolute; top: -8px; bottom: -8px; width: 4px; margin-left: -2px; border-radius: 2px; background: #FFF7EC; box-shadow: 0 0 10px rgba(255, 247, 236, .8); }
.sh-stars { margin: 0; color: #FFE07A; font-weight: 800; font-size: clamp(15px, 2.2vw, 19px); text-align: center; text-shadow: 0 0 12px rgba(255, 224, 122, .45); }
.sh-streak { margin: 0; color: #C9D3F0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Full screen: the scene alone, big */
.sh-scene.full { position: fixed; inset: 0; z-index: 25; border-radius: 0; padding: 4vh 4vw; }
.sh-scene.full .sh-creature { width: min(60vh, 70vw); }
.sh-scene.full .sh-status { font-size: clamp(32px, 6vh, 72px); }
.sh-scene.full .sh-meter { width: min(80vw, 900px); height: 3vh; }
.sh-scene.full .sh-stars { font-size: clamp(18px, 3vh, 34px); }
.sh-scene.full .sh-streak { font-size: clamp(16px, 2.6vh, 28px); }
.sh-exit { position: absolute; top: 14px; right: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #FFF7EC; font-weight: 700; cursor: pointer; }
.sh-exit kbd { background: transparent; border-color: rgba(255, 255, 255, .3); color: inherit; }

/* ---------- Controls ---------- */
.sh-controls { display: grid; justify-items: center; gap: 18px; text-align: center; }
.sh-go {
  display: inline-flex; align-items: center; gap: 10px; height: 62px; padding: 0 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #8C7CF5, #6B5BE8 55%, #5543D6); color: #FFFFFF; font: 800 22px var(--f-display);
  box-shadow: 0 14px 34px rgba(107, 91, 232, .45); animation: go-pulse 2.4s ease-in-out infinite;
}
.sh-go.stop { background: rgba(255, 255, 255, .1); box-shadow: none; animation: none; font-size: 18px; height: 50px; }
@keyframes go-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(185, 166, 255, .55), 0 14px 34px rgba(107, 91, 232, .45); } 50% { box-shadow: 0 0 0 12px rgba(185, 166, 255, 0), 0 14px 34px rgba(107, 91, 232, .45); } }
.sh-mic svg { display: block; width: 22px; height: 22px; }
.sh-privacy { margin: -6px 0 0; color: #AFC0E8; font-size: 13.5px; }
.sh-group { display: grid; justify-items: center; gap: 8px; }
.sh-label { margin: 0; font-weight: 800; font-size: 15px; }
.sh-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sh-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #E7ECFA; font-weight: 700; font-size: 14px; cursor: pointer; }
.sh-chip[aria-pressed="true"] { background: #FFF7EC; border-color: #FFF7EC; color: #1B2033; }
.sh-slider { width: min(100%, 360px); accent-color: #B9A6FF; }
.sh-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.sh-link { border: 0; background: none; padding: 4px; color: var(--gold); font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }