/* Shared sky, typography and controls come from the original Fabi stylesheet. */
.chooser-screen{padding:28px 0 32px}.chooser-art{font-size:45px;color:#8fbdbb;display:flex;justify-content:center;align-items:center;gap:24px;height:130px}.chooser-art span{font-size:88px}.game-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:770px;margin:0 auto}.game-choice{display:flex;flex-direction:column;align-items:center;text-align:center;border:1.5px solid #c9dfd6;border-radius:26px;background:#fffefa;padding:28px 28px 24px;box-shadow:0 7px 0 #c9dfd64d;transition:transform .2s,box-shadow .2s}.game-choice:hover{transform:translateY(-5px);box-shadow:0 12px 0 #c9dfd64d}.soni-choice{border-color:#d6ccec;background:linear-gradient(145deg,#fffafb,#f4f0ff);box-shadow:0 7px 0 #d6ccec60}.soni-choice:hover{box-shadow:0 12px 0 #d6ccec60}.choice-art{font-size:55px;margin:8px 0 20px}.game-choice strong{font-size:35px;letter-spacing:-1px;color:#246b58}.soni-choice strong{color:#7857a8}.choice-title{font-size:19px;font-weight:bold;margin:5px 0 13px}.choice-description{font-size:14px;line-height:1.6;color:#607b83;max-width:240px}.choice-link{font-size:14px;font-weight:bold;margin-top:25px;color:#246b58}.soni-choice .choice-link{color:#7857a8}.choice-link span{margin-left:12px}#fabi-chooser{display:block;margin-bottom:8px}
.playing-soni{user-select:none;-webkit-user-select:none}.playing-soni main{max-width:1320px;padding:0 36px}.playing-soni .site-header{padding-top:16px;padding-bottom:12px}.playing-soni footer{padding-top:14px;padding-bottom:14px}.playing-soni .scenery{background:radial-gradient(ellipse at 45% 50%,#fff8ee 0%,#f7f2fc 45%,#eaf6fc 100%)}.playing-soni .mobile-notice{display:none}.soni-screen{display:flex;flex-direction:column;min-height:calc(100svh - 140px);max-width:1120px;margin:auto}.soni-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.soni-badge{font-size:12px;color:#806a96;background:#fff9;border:1px solid #e7deee;padding:9px 15px;border-radius:20px}.soni-heading{margin:6px 0 0;pointer-events:none}.soni-heading .eyebrow{margin:8px 0 10px;color:#8a779e}.soni-heading h1{font-size:clamp(28px,3.6vw,44px);letter-spacing:-1.4px}.soni-heading h1 span{color:#8861b0}.soni-stage{flex:1;min-height:250px;position:relative;overflow:hidden;isolation:isolate;border-radius:28px}.soni-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:36px;transition:opacity .2s;pointer-events:none}.soni-idle>span{animation:soni-float 4s ease-in-out infinite}.idle-star{font-size:75px;color:#edbc62;rotate:-12deg}.idle-rainbow{font-size:95px;animation-delay:-1s!important}.idle-bubble{font-size:65px;animation-delay:-2s!important}.soni-idle p{position:absolute;bottom:12%;font-size:17px;color:#907ca1}.has-played .soni-idle{opacity:0}.soni-particles{position:absolute;inset:0;pointer-events:none}.soni-particle{position:absolute;display:block;line-height:1;will-change:transform,opacity;animation:soni-particle var(--duration) cubic-bezier(.18,.65,.3,1) both;text-shadow:0 4px 9px #b399c018}.soni-particle.bubble{width:1em;height:1em;border-radius:50%;border:2px solid currentColor;background:radial-gradient(circle at 30% 28%,#fff 0%,#fff6 14%,#fff0 55%);box-shadow:inset -3px -3px 7px #fff7}.rainbow-wave{animation-name:soni-wave}.soni-keyboard-panel{position:relative;background:#ffffffb8;border:1px solid #e7dfed;border-radius:23px;padding:14px 20px 18px;box-shadow:0 7px 28px #6a528b08;margin-top:8px}.soni-keyboard-caption{display:flex;justify-content:space-between;font-size:12px;color:#80718e;margin-bottom:10px}.soni-keyboard-caption span:first-child{font-weight:bold}.soni-keyboard{display:flex;flex-direction:column;gap:6px}.soni-keyboard-row{display:flex;gap:6px}.soni-key{position:relative;display:grid;place-items:center;flex-basis:0!important;min-width:0;height:43px;border:1px solid #e0dce6;border-bottom:4px solid #d8d2e1;border-radius:8px;background:#fff;color:#5a566d;font-size:17px;font-weight:bold;transition:transform .08s,background-color .16s,border-color .16s,box-shadow .16s}.soni-keyboard-row:first-child .soni-key{height:25px;font-size:10px;background:#f7f5fa;border-bottom-width:2px}.soni-key[data-code="Space"]{font-size:12px;font-weight:normal;letter-spacing:2px}.soni-key[data-code="Backspace"],.soni-key[data-code^="Arrow"]{font-size:22px}.soni-key[data-code^="Shift"],.soni-key[data-code^="Control"],.soni-key[data-code^="Alt"],.soni-key[data-code="CapsLock"],.soni-key[data-code="Tab"],.soni-key[data-code="Enter"]{font-size:12px}.soni-key.is-held{background:var(--key-color)!important;border-color:var(--key-color);transform:translateY(3px) scale(.97);box-shadow:0 0 17px var(--key-color);color:#363046}.soni-key.is-held:after{content:"✧";position:absolute;top:-16px;right:3px;color:#8b64b3;font-size:20px;pointer-events:none;animation:soni-key-spark .5s ease-out both}
@keyframes soni-particle{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(1.1)}}@keyframes soni-wave{0%{opacity:0;transform:translate(-50%,0) scale(.7)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2)}}@keyframes soni-key-spark{from{opacity:1;transform:translateY(0) scale(.4)}to{opacity:0;transform:translateY(-17px) scale(1.3)}}@keyframes soni-float{50%{transform:translateY(-9px)}}
.soni-heading h1:focus,#chooser-title:focus{outline:none}
@media(min-width:701px){.soni-key{height:38px}.soni-keyboard-row:first-child .soni-key{height:22px}}
@media(min-width:701px) and (max-height:800px){.playing-soni .site-header{padding-top:10px;padding-bottom:8px}.soni-heading h1{font-size:32px}.soni-heading .eyebrow{margin:4px 0 7px}.soni-stage{min-height:180px}.soni-keyboard-panel{padding:12px 16px 14px}.soni-key{height:34px}.soni-keyboard-row:first-child .soni-key{height:20px}.soni-keyboard,.soni-keyboard-row{gap:5px}}
@media(max-width:700px){.game-choices{gap:14px}.game-choice{padding:20px 16px}.choice-art{font-size:42px}.playing-soni main{padding:0 15px}.soni-keyboard-panel{padding:12px 10px 14px}.soni-keyboard-row{gap:3px}.soni-keyboard{gap:5px}.soni-key{font-size:14px;height:36px}.soni-keyboard-caption{font-size:10px}.soni-key[data-code^="Shift"],.soni-key[data-code^="Control"],.soni-key[data-code^="Alt"],.soni-key[data-code="CapsLock"],.soni-key[data-code="Tab"],.soni-key[data-code="Enter"]{font-size:9px}.soni-key[data-code="Space"]{font-size:10px;letter-spacing:0}.soni-stage{min-height:260px}.soni-badge{font-size:10px}.soni-heading h1{font-size:29px}.soni-keyboard-row:first-child .soni-key{font-size:8px}.soni-key[data-code="Backspace"],.soni-key[data-code^="Arrow"]{font-size:16px}}
@media(max-width:450px){.chooser-screen{padding-top:5px}.chooser-art{height:100px;font-size:28px}.chooser-art span{font-size:65px}.game-choices{grid-template-columns:1fr;max-width:340px}.game-choice{display:grid;grid-template-columns:64px 1fr;column-gap:14px;text-align:left;align-items:start;padding:20px}.choice-art{grid-row:1/5;font-size:29px;margin:auto 0;overflow-wrap:anywhere}.game-choice strong{font-size:28px}.choice-title{font-size:15px;margin:3px 0 7px}.choice-description{font-size:12px}.choice-link{font-size:12px;margin-top:12px}.soni-badge{padding:7px 9px}.soni-heading h1 span{display:block}.soni-idle{gap:16px}.idle-star{font-size:45px}.idle-rainbow{font-size:72px}.idle-bubble{font-size:40px}.soni-idle p{font-size:14px}.soni-keyboard-row{gap:2px}.soni-key{font-size:11px;border-radius:5px}.soni-keyboard-caption span:last-child{display:none}.soni-key[data-code^="Shift"],.soni-key[data-code^="Control"],.soni-key[data-code^="Alt"],.soni-key[data-code="CapsLock"],.soni-key[data-code="Tab"],.soni-key[data-code="Enter"]{font-size:7px}}
@media(prefers-reduced-motion:reduce){.soni-particle{animation:soni-fade var(--duration) linear both!important}.soni-key.is-held:after{animation:none!important;opacity:0}}@keyframes soni-fade{0%{opacity:1}100%{opacity:0}}

.invitation-link{display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;margin-bottom:12px}

.keyboard-required{display:none;align-items:center;gap:8px;width:fit-content;max-width:100%;min-height:36px;margin-top:12px;padding:8px 12px;border:1px solid #e4c985;border-radius:12px;background:#fff4d7;color:#70521c;font-size:13px;font-weight:700;line-height:1.4}
.keyboard-required>span{flex-shrink:0;font-size:20px;line-height:1}
@media(max-width:700px),(hover:none) and (pointer:coarse){.keyboard-required{display:inline-flex}}
@media(max-width:650px){.keyboard-required{grid-column:1/-1;justify-self:start}}