/* ---------- Sussie's Gems: a sunny treetop with a magpie's treasure nest ---------- */
.sussie-area { --band: clamp(110px, 23vh, 220px); display: flex; flex-direction: column; box-shadow: inset 0 0 0 4px #ffffff55;
  background: linear-gradient(180deg, #3fb6f5, #8fdcff 45%, #d9f6ff 75%, #fff4c9); }
.sg-sun { position: absolute; left: 50%; top: 12px; width: clamp(54px, 8vw, 84px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 38%, #fffbe0, #ffe04a 55%, #ffb81f); box-shadow: 0 0 0 12px #ffe36a44, 0 0 60px 20px #ffe36a88; animation: pz-sun 4s ease-in-out infinite; }
.sg-cloud { position: absolute; top: 9%; left: 0; width: 120px; height: 36px; border-radius: 40px; background: #fff; opacity: .92; pointer-events: none; animation: pz-cloud 38s linear infinite; }
.sg-cloud::before, .sg-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.sg-cloud::before { width: 54px; height: 54px; left: 18px; top: -26px; } .sg-cloud::after { width: 40px; height: 40px; left: 60px; top: -16px; }
.sg-cloud.two { top: 30%; scale: .75; animation-duration: 52s; animation-delay: -24s; opacity: .8; }
.sg-hills { position: absolute; left: -10%; right: -10%; bottom: 0; height: 30%; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 25% 100%, #6ed46a 60%, transparent 61%), radial-gradient(ellipse 60% 90% at 80% 100%, #4fbf5a 60%, transparent 61%), linear-gradient(0deg, #4fbf5a 0 30%, transparent 30%); }

/* branches poking in from both sides, with leaves */
.sg-branch { position: absolute; z-index: 4; top: calc(var(--band) * .86); height: clamp(14px, 2.2vh, 22px); border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, #a86a3a, #7a4520); box-shadow: 0 5px 0 #0002; }
.sg-branch.bl { left: -10px; width: clamp(150px, 30%, 330px); rotate: 3deg; transform-origin: 0 50%; }
.sg-branch.br { right: -10px; width: clamp(140px, 26%, 300px); rotate: -3deg; transform-origin: 100% 50%; }
.sg-branch i { position: absolute; width: 34px; height: 18px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #7be35a, #2fa84a); transform-origin: 0 50%; animation: sg-leaf 3s ease-in-out infinite alternate; }
.sg-branch.bl i:nth-child(1) { left: 22%; top: -14px; rotate: -30deg; } .sg-branch.bl i:nth-child(2) { left: 48%; top: 10px; rotate: 30deg; animation-delay: -1s; } .sg-branch.bl i:nth-child(3) { left: 78%; top: -12px; rotate: -20deg; animation-delay: -2s; }
.sg-branch.br i:nth-child(1) { left: 12%; top: 10px; rotate: 150deg; } .sg-branch.br i:nth-child(2) { left: 60%; top: 12px; rotate: 160deg; animation-delay: -1.5s; }

/* Sussie on her branch */
.sg-bird { position: absolute; z-index: 3; left: clamp(4px, 3vw, 44px); top: calc(var(--band) * .05); --bs: calc(var(--band) * .9); width: var(--bs); aspect-ratio: 1; pointer-events: none; }
.sg-bird.flying { z-index: 8; }
.sg-bird-in { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px #0004); animation: sg-perch 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
.sg-bird.flying .sg-bird-in { animation: sg-flap .18s ease-in-out infinite alternate; }
.sg-bird-in > svg { width: 100%; height: 100%; display: block; }
.sg-carry { position: absolute; left: 52%; top: 50%; width: 52%; aspect-ratio: 100 / 92; translate: -50% -4%; }
.sg-carry svg, .sg-flygem svg, .sg-prize svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 #0003); }
.sg-carry span { position: relative; display: grid; place-items: center; height: 76%; font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; color: #fff; text-shadow: 0 2px 0 #0006; }

/* the nest and the treasure piling up in it */
.sg-nest { position: absolute; z-index: 5; right: clamp(8px, 3vw, 44px); top: calc(var(--band) * .86 - var(--ns) * .58); --ns: clamp(120px, 19vw, 220px); width: var(--ns); height: calc(var(--ns) * .62); pointer-events: none; }
.sg-bowl { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; border-radius: 10% 10% 50% 50% / 20% 20% 80% 80%;
  background: repeating-linear-gradient(25deg, #b47a3e 0 6px, #8a5528 6px 10px), #9a6232; box-shadow: inset 0 8px 0 #6a3e1a, 0 6px 0 #0002; }
.sg-bowl::before { content: ''; position: absolute; left: -4%; right: -4%; top: -10%; height: 30%; border-radius: 50%; background: repeating-linear-gradient(-30deg, #c58a4a 0 5px, #8a5528 5px 9px); }
.sg-pile { position: absolute; left: 8%; right: 8%; bottom: 40%; height: 70%; }
.sg-prize { position: absolute; width: 34%; aspect-ratio: 100 / 92; }
.sg-prize:nth-child(1) { left: 6%; bottom: 0; rotate: -14deg; } .sg-prize:nth-child(2) { left: 33%; bottom: 4%; rotate: 6deg; }
.sg-prize:nth-child(3) { left: 60%; bottom: 0; rotate: 16deg; } .sg-prize:nth-child(4) { left: 18%; bottom: 30%; rotate: -4deg; }
.sg-prize:nth-child(5) { left: 47%; bottom: 32%; rotate: 12deg; } .sg-prize:nth-child(6) { left: 32%; bottom: 58%; rotate: -8deg; }
.sg-prize.sg-land { animation: sg-land .5s cubic-bezier(.2, 1.8, .4, 1); }
.sg-nest.sg-glow { animation: sg-glow 1.4s ease-in-out 2; }
.sg-flygem { position: absolute; z-index: 9; pointer-events: none; }

.sg-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: calc(var(--band) + 10px) 12px 16px; }
.sg-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 26px); }
.sg-q .pic-card { animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.sg-word { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 28px; background: #fffdf5; box-shadow: 0 9px 0 #c9b98a, 0 14px 22px #0002; transition: box-shadow .3s; }
.sg-word.solved { box-shadow: 0 0 0 6px #2fcf7a, 0 9px 0 #c9b98a; }
.sg-tile { position: relative; min-width: .8em; padding: 0 6px; border-radius: 16px; font-size: clamp(56px, 9vw, 100px); font-weight: 700; line-height: 1.1; color: #2a2350; text-align: center; transition: background .15s, transform .15s; }
.sg-tile.lit { background: #ffe36a99; transform: translateY(-6px); }
.sg-tile.sg-bop { animation: bounce .35s; }
.sg-gap { display: inline-block; width: 1em; height: 1.08em; border: 5px dashed #ffb81f; background: #fff3c4; border-radius: 18px; box-shadow: 0 0 16px #ffd23a99; animation: pulse 1.4s ease-in-out infinite; }
.sg-gap i { position: absolute; width: 14px; height: 14px; background: #ffcf3a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sg-twinkle 1.2s ease-in-out infinite; }
.sg-gap i:nth-child(1) { left: 12%; top: 14%; } .sg-gap i:nth-child(2) { right: 14%; top: 40%; animation-delay: -.4s; } .sg-gap i:nth-child(3) { left: 30%; bottom: 12%; animation-delay: -.8s; }
.sg-set { color: #fff; text-shadow: 0 3px 0 #0005; background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 60%, #fff), var(--gc)); box-shadow: 0 5px 0 color-mix(in srgb, var(--gc) 60%, #000); }
.sg-set.lit { filter: brightness(1.15); }
.sg-set.sg-snap { animation: sg-snap .45s cubic-bezier(.2, 1.8, .4, 1); }

.sg-gems { display: flex; justify-content: center; gap: clamp(10px, 3vw, 40px); }
.sg-gem { position: relative; width: clamp(96px, 15vw, 160px); aspect-ratio: 100 / 92; transition: opacity .3s, filter .3s;
  animation: sg-in .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * .1s) backwards, sg-float 2.6s ease-in-out calc(var(--i) * -.8s) infinite; }
.sg-gem svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gc) 60%, #fff)) drop-shadow(0 6px 0 #0003); }
.sg-gem span { position: relative; display: grid; place-items: center; height: 76%; font-size: clamp(38px, 5.6vw, 58px); font-weight: 700; color: #fff; text-shadow: 0 3px 0 #0006, 0 0 8px #0004; }
.sg-glint { position: absolute; right: 6%; top: -4%; width: 26%; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: sg-twinkle 2.2s ease-in-out calc(var(--i) * -.7s) infinite; pointer-events: none; }
.sg-gem:active { scale: .92; }
.sg-gem.shake { animation: shake .4s; }
.sg-gem.dull { filter: saturate(.5) brightness(.92); }
.sg-gem.faded { opacity: .35; }
.sg-gem.hint { animation: pulse 1s ease-in-out infinite; filter: none; }
.sg-gem.hint svg { filter: drop-shadow(0 0 16px var(--gold)) drop-shadow(0 0 4px #fff); }

.splash-word.sg-shiny { color: #fff; -webkit-text-stroke-color: #a35cff; z-index: 9; }
.splash-word.sg-hmm { color: #ffe03a; -webkit-text-stroke-color: #1a2a6a; font-size: clamp(32px, 5vw, 52px); z-index: 9; }

@keyframes sg-leaf { to { scale: 1.1 .9; } }
@keyframes sg-perch { 0%, 100% { rotate: 0deg; } 30% { rotate: -4deg; } 60% { rotate: 3deg; } }
@keyframes sg-flap { from { scale: 1 1; } to { scale: 1.06 .94; } }
@keyframes sg-in { from { transform: translateY(40px) scale(.3); opacity: 0; } }
@keyframes sg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sg-twinkle { 0%, 100% { scale: .3; opacity: .2; } 50% { scale: 1.1; opacity: 1; } }
@keyframes sg-snap { 0% { scale: 1.6; } 60% { scale: .9; } 100% { scale: 1; } }
@keyframes sg-land { 0% { scale: 1.5; } 100% { scale: 1; } }
@keyframes sg-glow { 50% { filter: drop-shadow(0 0 24px #ffe03a) brightness(1.2); } }

/* phones: tighter tiles so the word fits beside nothing */
@media (max-width: 520px) {
  .sg-sun { display: none; }
  .sg-q .pic-card { width: 110px; height: 110px; }
  .sg-q .pic-card span { font-size: 66px; }
  .sg-tile { font-size: 58px; }
}