/* ---------- Silly Sentences: a sunny backyard photo shoot with Bluey ---------- */
.ss-area { display: flex; flex-direction: column; background: linear-gradient(180deg, #7fd4ff, #b8ecff 55%, #dff7ff); box-shadow: inset 0 0 0 4px #ffffff55; }
.ss-sky { position: absolute; inset: 0; pointer-events: none; }
.ss-sun { position: absolute; right: 7%; top: 6%; width: clamp(56px, 9vw, 100px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff7b0, #ffd23a 60%, #ffb01f); box-shadow: 0 0 0 14px #ffe36a44, 0 0 60px 20px #ffe36a88; animation: ss-sun 4s ease-in-out infinite; }
.ss-cloud { position: absolute; left: 0; top: 14%; width: 130px; height: 40px; border-radius: 40px; background: #fff; opacity: .9;
  box-shadow: 30px -18px 0 4px #fff, 70px -6px 0 0 #fff; animation: ss-cloud 38s linear infinite; }
.ss-cloud.two { top: 30%; scale: .7; animation-duration: 52s; animation-delay: -26s; }
.ss-bunting { position: absolute; left: -2%; right: -2%; top: 0; height: 46px; display: flex; justify-content: space-between; pointer-events: none;
  background: linear-gradient(175deg, transparent 46%, #ffffffcc 47% 49%, transparent 50%) top / 100% 30px no-repeat; }
.ss-bunting i { width: 6.5%; height: 34px; clip-path: polygon(0 0, 100% 0, 50% 100%); margin-top: calc(2px + var(--i) * .4px);
  background: hsl(calc(var(--i) * 47deg) 90% 62%); transform-origin: 50% 0; animation: ss-flap 2.4s ease-in-out calc(var(--i) * -.2s) infinite; }
.ss-fence { position: absolute; left: 0; right: 0; bottom: 14%; height: 18%; pointer-events: none; opacity: .9;
  background: repeating-linear-gradient(90deg, #fff4e0 0 34px, #f0d9b5 34px 38px, transparent 38px 48px);
  -webkit-mask: linear-gradient(180deg, transparent 0 8px, #000 8px); mask: linear-gradient(180deg, transparent 0 8px, #000 8px); }
.ss-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; pointer-events: none;
  background: radial-gradient(ellipse 30px 16px at 20px 0, #6fd36a 98%, transparent) 0 0 / 40px 100% repeat-x, linear-gradient(180deg, #5cc95c, #3ea84a); }

/* The photo album along the top: a slot per round. */
.ss-album { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(6px, 1.6vw, 16px); padding: 40px 12px 0; }
.ss-slot { width: clamp(46px, 8vw, 78px); aspect-ratio: 1; border-radius: 10px; border: 3px dashed #ffffffcc; background: #ffffff33; display: grid; place-items: center; overflow: hidden; }
.ss-slot.got { border: 0; background: #fff; box-shadow: 0 4px 0 #0002, 0 0 0 4px #fff; rotate: -4deg; }
.ss-slot.got:nth-child(even) { rotate: 5deg; }
.ss-slot .ss-scene { font-size: clamp(16px, 2.6vw, 26px); }
.ss-slot.ss-land { animation: pop-in .45s cubic-bezier(.2, 1.8, .4, 1); }

.ss-play { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 10px; padding: 6px 12px 18px; }
.ss-top { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); flex-wrap: wrap; }
.ss-host { width: clamp(84px, 13vw, 140px); flex: none; filter: drop-shadow(0 6px 0 #0002); animation: ss-bob 2.2s ease-in-out infinite; }
.ss-host svg { width: 100%; display: block; }

.ss-sentence { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(10px, 1.8vw, 20px); padding: 10px clamp(14px, 2.4vw, 26px) 14px;
  background: #fff; border-radius: 28px; box-shadow: 0 8px 0 #2fb5a0, 0 14px 24px #0002; max-width: 100%; animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.ss-word { min-height: 84px; padding: 0 6px; border-radius: 16px; font-size: clamp(50px, 7.5vw, 86px); font-weight: 700; color: #2a1650; line-height: 1.1; transition: background .15s, transform .15s; }
.ss-word.noun { color: #e0407a; }
.ss-word.lit { background: #ffe36a; transform: translateY(-6px); }
.ss-word.ss-boing { animation: bounce .4s; }

.ss-frames { display: flex; gap: clamp(12px, 3vw, 34px); justify-content: center; flex-wrap: wrap; }
.ss-frame { position: relative; width: clamp(96px, min(27vw, 26vh), 250px); aspect-ratio: 1; padding: 6%; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 0 #d9c7a8, 0 16px 26px #0003; transform: rotate(var(--tilt));
  animation: ss-frame-in .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * .1s) backwards; transition: opacity .3s; }
.ss-frame::before { content: ''; position: absolute; inset: 6%; border-radius: 6px; background: linear-gradient(180deg, #c8f0ff, #e9fbff 60%, #b8f0a8 60%); }
.ss-frame::after { content: ''; position: absolute; left: 50%; top: -12px; width: 46px; height: 22px; translate: -50% 0; rotate: -4deg; background: #ffe36acc; border-radius: 3px; }
.ss-frame:active:not(:disabled) { scale: .95; }
.ss-frame:disabled:not(.ss-right) { opacity: .35; }
.ss-frame.shake { animation: shake .4s; }
.ss-frame.hint { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 7px var(--gold), 0 8px 0 #d9c7a8 !important; }
.ss-frame.ss-right { box-shadow: 0 0 0 7px #2fcf7a, 0 8px 0 #d9c7a8; scale: 1.06; }

/* A composed picture: a place, with a thing in it or on it. */
.ss-scene { position: relative; display: block; width: 100%; height: 100%; font-size: clamp(52px, 11vw, 120px); line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.ss-place, .ss-thing { position: absolute; left: 50%; translate: -50% 0; }
.ss-place { bottom: 4%; font-size: 1em; }
.ss-thing { font-size: .48em; filter: drop-shadow(0 2px 0 #0003); }
.ss-in .ss-thing { bottom: 22%; }
.ss-on .ss-place { bottom: 2%; font-size: .82em; }
.ss-on .ss-thing { bottom: 62%; font-size: .5em; }
.ss-frame .ss-scene { z-index: 1; }

.ss-photo { position: absolute; z-index: 7; padding: 1.2%; border-radius: 10px; background: #fff; box-shadow: 0 10px 22px #0004; pointer-events: none; }
.ss-photo .ss-scene { font-size: clamp(52px, 11vw, 120px); }
.ss-flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.ss-flash.go { animation: ss-flash .45s ease-out; }
.splash-word.ss-snap { color: #fff; -webkit-text-stroke-color: #e0407a; z-index: 8; }

@keyframes ss-sun { 50% { box-shadow: 0 0 0 22px #ffe36a44, 0 0 80px 30px #ffe36a99; } }
@keyframes ss-cloud { from { translate: -180px 0; } to { translate: calc(100vw + 40px) 0; } }
@keyframes ss-flap { 50% { rotate: 8deg; } }
@keyframes ss-bob { 50% { translate: 0 -8px; } }
@keyframes ss-frame-in { from { transform: rotate(var(--tilt)) translateY(80px) scale(.4); opacity: 0; } }
@keyframes ss-flash { 0% { opacity: .95; } 100% { opacity: 0; } }

@media (max-width: 600px) {
  .ss-album { padding-top: 34px; }
  .ss-word { min-height: 64px; font-size: 44px; }
  .ss-host { width: 76px; }
  .ss-frames { gap: 10px; }
  .ss-frame { width: 100px; }
}