.sf{max-width:900px;margin:auto}.sf label{display:block;font-weight:700;margin:22px 0}.sf label select{display:block;width:100%;margin-top:8px;min-height:50px}.sf li{margin-bottom:10px}.sf button{min-height:48px;touch-action:manipulation}.sf-hud{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:14px;background:#101e38;color:#fff;border-radius:18px;font-size:20px;font-weight:800}.sf-listen{padding:12px 0}.sf-listen strong{display:inline-block;margin:8px 12px;font-size:19px}.sf-listen p{margin:0;min-height:1.5em;font-size:16px;color:#344054}.sf-arena{height:clamp(460px,68vh,650px);position:relative;overflow:hidden;border-radius:24px;background-size:cover;background-position:center;isolation:isolate;box-shadow:inset 0 0 60px #0f254a88}.sf .sf-star{position:absolute;left:0;top:0;height:100px;min-height:100px;border:2px solid #fff4af;border-radius:40% 40% 35% 35%;background:radial-gradient(ellipse,#fffce2 30%,#ffe56a 75%,#f3b941);box-shadow:0 0 16px #fff4a6aa,inset 0 3px 10px white;color:#29334a;font-size:clamp(17px,2vw,22px);font-weight:800;line-height:1.2;overflow-wrap:anywhere;padding:12px 8px;will-change:transform;cursor:pointer;z-index:2;text-shadow:0 1px white}.sf-star:before{content:'✦';position:absolute;top:-5px;left:9px;color:#fff;font-size:24px}.sf .sf-star.sf-wrong{background:#ffd7d7;outline:3px solid #e86f86;animation:sf-shake .2s linear 2}.sf-feedback{position:absolute;bottom:10px;left:10px;right:10px;z-index:4;pointer-events:none;text-align:center;font-size:21px;font-weight:900;color:#fff;text-shadow:0 2px 4px #101828;background:#12274599;border-radius:12px}.sf-burst{position:absolute;z-index:5;color:#fff582;font-size:30px;pointer-events:none;white-space:nowrap;animation:sf-burst .7s ease-out forwards}.sf-pause{position:absolute;inset:0;z-index:6;background:#102746dc;display:grid;place-content:center;text-align:center;color:#fff}.sf-pause[hidden]{display:none}.sf-result{text-align:center;padding:25px}.sf-result>strong{font-size:52px;color:#007bad}.sf-result small{font-size:18px}@keyframes sf-burst{to{opacity:0;translate:-50% -65px;scale:1.5}}@keyframes sf-shake{50%{margin-left:6px}}.sf-reduced .sf-burst,.sf-reduced .sf-wrong{animation:none!important}@media(prefers-reduced-motion:reduce){.sf-burst,.sf .sf-star.sf-wrong{animation:none!important}}@media(max-width:480px){.sf-hud{font-size:17px;gap:8px}.sf-listen strong{display:block;margin-left:0}.sf-arena{border-radius:16px}.sf .sf-star{font-size:18px}}

/* A broad star silhouette leaves enough space for longer English words. */
.sf .sf-star{border:0;background:transparent;box-shadow:none;isolation:isolate;filter:drop-shadow(0 0 9px #fff2a5bb);border-radius:20%;padding:20px 12px}.sf .sf-star:before{content:'';position:absolute;inset:-10px -3px;z-index:-1;background:radial-gradient(ellipse,#fffef2 25%,#ffe574 67%,#f4bd48);clip-path:polygon(50% 0%,66% 25%,100% 28%,82% 58%,85% 95%,50% 81%,15% 95%,18% 58%,0% 28%,34% 25%)}.sf .sf-star.sf-wrong{background:transparent;outline:none;filter:drop-shadow(0 0 8px #ff517b)}.sf .sf-star.sf-wrong:before{background:#ffc3d1}.sf .sf-star:focus-visible{outline:3px solid #02b7ff;outline-offset:4px}

/* The same forest surrounds the stars and the friends, from invitation to result. */
.sf-story-banner,.sf-forest{position:relative;background-size:cover;background-position:center;overflow:hidden;border-radius:24px}.sf-story-banner{height:220px;box-shadow:inset 0 -25px 40px #21493233}.sf-area-name{position:absolute;top:14px;left:16px;background:#fffcebeb;border-radius:20px;padding:5px 14px;color:#294c3b;font-weight:800}.sf-story-caption{text-align:center;font-weight:700;color:#355644}.sf-friends{position:relative;height:116px;pointer-events:none;z-index:3;background:linear-gradient(transparent,#153a1d2b)}.sf-finn{position:absolute;left:2%;bottom:0;width:140px;height:140px;transform-origin:50% 90%;filter:drop-shadow(0 7px 6px #153b3044)}.sf-finn img,.sf-friend img{width:100%;height:100%;object-fit:contain}.sf-friend{position:absolute;bottom:3px;width:82px;height:82px;filter:drop-shadow(0 5px 5px #163c3040)}.sf-pico{right:18%}.sf-hou{right:1%}.sf-finn-bubble{position:absolute;bottom:70px;left:155px;max-width:calc(100% - 175px);background:#fffdf1ed;border-radius:18px 18px 18px 4px;padding:8px 14px;color:#244338;font-size:17px;line-height:1.45;font-weight:800;box-shadow:0 3px 10px #26492c22}.sf-story-banner .sf-friends{position:absolute;bottom:0;left:0;right:0;height:140px}.sf-stage-picker{border:0;padding:0;margin:24px 0}.sf-stage-picker legend{font-weight:800;font-size:22px}.sf .sf-stage-option{display:flex;gap:12px;align-items:center;background:#fffdf1;border:2px solid #ceddcf;border-radius:16px;padding:14px;margin:10px 0;cursor:pointer}.sf-stage-option:has(input:checked){border-color:#02b7ff;background:#f1fbff}.sf-stage-option input{width:22px;height:22px;flex-shrink:0;accent-color:#0096cd}.sf-stage-option small{display:block;font-size:16px;line-height:1.5;margin-top:4px;font-weight:500;color:#384e47}.sf-locked{background:#f0f2f2!important;color:#56645d;cursor:default!important}.sf-options{display:grid;grid-template-columns:1fr 1fr;gap:20px}.sf-options label{min-width:0}.sf-options select{max-width:100%}.sf-rules{padding:16px;border-radius:16px;background:#f1f8f4;margin:12px 0 22px}.sf-rules summary{font-weight:700;cursor:pointer}.sf-stage-instruction{margin:0 0 12px;font-weight:700}.sf-stage-instruction small{display:inline-block;font-size:16px;color:#3d5d4d}.sf-forest{margin-top:12px;box-shadow:0 8px 30px #24483322}.sf-forest .sf-listen{position:relative;z-index:3;margin:12px;padding:12px 16px;border-radius:18px;background:#fffdf2ed;box-shadow:0 3px 15px #233f2f22}.sf-forest .sf-listen>b{display:block;font-size:16px;color:#385b46}.sf-forest .sf-listen strong{margin:5px 0 10px;display:block;font-size:21px}.sf-forest .sf-listen button{font-size:16px;padding:6px 12px;min-height:44px}.sf-forest .sf-listen p{font-size:15px;min-height:0}.sf-forest .sf-arena{height:clamp(340px,46svh,500px);border-radius:0;box-shadow:none;background:transparent}.sf-forest .sf-star{height:80px;min-height:80px;padding:15px 12px}.sf-forest .sf-star:before{inset:-5px -3px}.sf-forest .sf-feedback{font-size:18px;bottom:3px;margin:0;line-height:1.5;background:#193b2ca8}.sf-forest .sf-pause{z-index:10}.sf-happy{animation:sf-finn-joy .65s ease-in-out}.sf-reduced .sf-happy{animation:none}.sf-result-page .sf-result{padding:20px 0}.sf-result-page>button{margin:4px 0}@keyframes sf-finn-joy{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-4deg) translateY(-9px)}65%{transform:rotate(4deg) translateY(-3px)}}@media(prefers-reduced-motion:reduce){.sf-happy{animation:none!important}}@media(max-width:540px){.sf-options{grid-template-columns:1fr;gap:0}.sf-options label{margin:10px 0}.sf-finn{width:112px;height:112px;left:0}.sf-friend{width:64px;height:64px}.sf-pico{right:19%}.sf-hou{right:1%}.sf-finn-bubble{left:112px;bottom:65px;max-width:calc(100% - 120px);font-size:15px;padding:7px 10px}.sf-friends{height:110px}.sf-story-banner{height:190px}.sf-stage-option b{font-size:18px}.sf-forest .sf-listen{margin:8px;padding:10px}.sf-forest .sf-listen strong{font-size:20px}.sf-forest .sf-star{font-size:18px}.sf-stage-instruction{font-size:17px}.sf-forest{border-radius:18px}}

/* Keep live information above the forest, outside the falling-star arena. */
.sf-playing .sf-hud{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px;padding:12px;flex-wrap:nowrap;box-shadow:0 3px 12px #10182825;isolation:isolate}.sf-hud-cell{min-width:0;text-align:center;line-height:1.2}.sf-hud-label{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;color:#e5f3ff;margin-bottom:5px}.sf-hud-label small{font-size:12px;letter-spacing:0;white-space:nowrap}.sf-hud-cell>b{display:block;font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.2;color:#fff}.sf-hud-cell [data-sf-time]{color:#f2ff9b}.sf-hud-cell [data-sf-lives]{color:#ffb9dd;white-space:nowrap;letter-spacing:2px}.sf-playstate{grid-column:1/-1;text-align:center;color:#fff;font-size:14px;line-height:1.4}.sf-playstate:empty{display:none}.sf-playing{scroll-margin-top:10px}.sf-playing .sf-forest{scroll-margin-top:100px}@media(max-width:540px){.sf-playing .sf-hud{gap:4px;padding:10px 6px;border-radius:14px}.sf-hud-label{font-size:11px;letter-spacing:.02em}.sf-hud-label small{display:block;font-size:11px}.sf-hud-cell>b{font-size:25px}.sf-hud-cell [data-sf-lives]{font-size:23px;letter-spacing:0}}