/* The approved clay-letter welcome, isolated from gameplay. */
#app[data-screen="welcome"]{--welcome-ink:#142853;background:radial-gradient(ellipse 42% 35% at -8% 0,#9fe1fb 98%,transparent),radial-gradient(ellipse 32% 24% at 105% 0,#ffc4c4 98%,transparent),radial-gradient(ellipse 28% 25% at -12% 78%,#b8eed6 98%,transparent),radial-gradient(ellipse 35% 18% at 102% 100%,#b5ecdf 98%,transparent),#fff9ef;color:var(--welcome-ink);font-family:'Fredoka','Varela Round',sans-serif}
#app[data-screen="welcome"] .topbar{position:absolute;inset:0 0 auto;pointer-events:none;background:transparent;padding:16px 22px}
#app[data-screen="welcome"] .topbar .title{visibility:hidden}
#app[data-screen="welcome"] .topbar-tools{pointer-events:auto}
#app[data-screen="welcome"] #muteBtn{border-radius:30px;background:#fffdf4;box-shadow:0 3px 12px #2331440c;color:#347746}
.welcome-screen{position:relative;display:flex;align-items:center;justify-content:center;min-height:100%;padding:20px 20px 30px!important;isolation:isolate}
.welcome-card{position:relative;width:min(100%,650px);padding:0 12px;background:none;border:0;border-radius:0;box-shadow:none;text-align:center;display:flex;flex-direction:column;align-items:center}
.welcome-brand{color:#12305e;font-size:clamp(32px,5.8vw,46px);font-weight:700;line-height:.88;display:flex;flex-direction:column;align-items:center;margin:8px 0 16px;transform:rotate(-3deg);letter-spacing:-1px}
.welcome-brand:before{content:' ';width:8px;height:16px;border-radius:6px;background:#ffbf16;box-shadow:21px 9px 0 -1px #ffbf16,-21px 9px 0 -1px #ffbf16;margin-bottom:10px}
.welcome-brand svg{width:102px;height:28px;margin-top:5px;overflow:visible}
.welcome-letters{display:flex;justify-content:center;align-items:center;width:100%;gap:clamp(10px,3vw,20px);margin:6px 0 26px;direction:rtl;perspective:700px}
.welcome-letter{--tilt:7deg;--shade:#c63a43;--tile:#ffd1ce;position:relative;display:grid;place-items:center;width:clamp(86px,24vw,160px);height:clamp(106px,28vw,174px);border:2px solid #fff5;border-radius:30%;background:linear-gradient(140deg,#fff8,var(--tile) 62%);box-shadow:inset 2px 3px 6px #fff9,inset -4px -5px 8px #b55b5215,0 8px 0 #d8926c1c,0 15px 20px #784f2520;transform:rotate(var(--tilt));padding:0;cursor:pointer;animation:welcome-enter .65s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:calc(var(--i)*.1s)}
.welcome-letter:nth-child(2){--tilt:-5deg;--tile:#ffe6a0;--shade:#cd9000}
.welcome-letter:nth-child(3){--tilt:-10deg;--tile:#e5c5f6;--shade:#8c47bd}
.welcome-letter span{width:auto;height:auto;background:transparent;border-radius:0;box-shadow:none;display:block;font-family:'Fredoka','Secular One',sans-serif;font-size:clamp(92px,26vw,164px);font-weight:700;line-height:1.05;color:#ff6969;-webkit-text-stroke:1.5px #ff6969;text-shadow:0 2px 0 #ff8581,0 4px 0 #e65559,0 6px 0 var(--shade),1px 9px 8px #9e313536;filter:drop-shadow(0 -2px 1px #fff7);transform:translateY(-4px)}
.welcome-letter:nth-child(2) span{color:#ffbd12;-webkit-text-stroke-color:#ffbd12;text-shadow:0 2px 0 #ffd349,0 4px 0 #e6a100,0 6px 0 var(--shade),1px 9px 8px #98690930}
.welcome-letter:nth-child(3) span{color:#ac65dc;-webkit-text-stroke-color:#ac65dc;text-shadow:0 2px 0 #c58bea,0 4px 0 #9b55d0,0 6px 0 var(--shade),1px 9px 8px #67328e30}
.welcome-letter:focus-visible{outline:4px solid #153666;outline-offset:8px}
.welcome-letter:hover{filter:brightness(1.03)}
.welcome-eyebrow{max-width:540px;font-size:clamp(18px,3.8vw,24px);font-weight:500;line-height:1.4;margin:0 0 15px;color:#24335b;text-wrap:balance}
.welcome-card h1{font-family:'Fredoka','Varela Round',sans-serif;font-weight:700;font-size:clamp(35px,8.5vw,60px);line-height:1.06;letter-spacing:-.5px;color:#142653;margin:0 0 16px;position:relative}
.welcome-card h1:after{content:'';display:block;width:120px;height:8px;margin:8px auto 0;background:#d8adf8;border-radius:70% 80% 30% 35%;transform:rotate(-2deg)}
.welcome-copy{font-size:clamp(21px,4.5vw,28px);font-weight:500;line-height:1.3;color:#24335b;margin:0 0 22px}
.welcome-actions{width:min(100%,530px);gap:12px}
.welcome-actions .p-button{font-family:inherit;min-height:54px;border-radius:40px;font-weight:600;font-size:clamp(19px,3.7vw,24px);line-height:1.25;transition:transform .18s,box-shadow .18s}
.welcome-actions .primary{background:linear-gradient(175deg,#ff8683,#ff696b 55%,#ef565e);border:2px solid #ff9994;box-shadow:inset 0 3px 4px #ffc5b970,0 6px 0 #cc474e,0 11px 18px #d85f4924;color:#fff;min-height:66px;font-size:clamp(25px,5.2vw,34px);display:flex;justify-content:center;align-items:center;gap:18px}
.welcome-actions .primary:hover:not(:disabled){background:linear-gradient(175deg,#ff9990,#ff7376 55%,#ef565e);transform:translateY(-2px)}
.welcome-actions .primary:active{transform:translateY(4px);box-shadow:0 2px 0 #cc474e}
.welcome-arrow{font-family:Arial,sans-serif;font-size:1.2em;line-height:1}
.welcome-actions .quiet{background:#fff9;border:2px solid #1d3563;color:#1d3563;min-height:49px}
.welcome-actions .welcome-signup{justify-self:center;border:0;background:none;text-decoration:underline;text-underline-offset:5px;font-size:21px;min-height:44px;width:auto;padding:6px 22px}
.welcome-note{font-size:16px;font-weight:400;color:#575d75;margin:1px 0 7px}
.welcome-footnote{font-size:14px;line-height:1.4;margin:8px 0 0;color:#575d75}
.welcome-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.welcome-sparkles span{position:absolute;color:#ffca31;font-size:42px;text-shadow:0 3px 0 #e9a8252b;animation:welcome-float 4.5s ease-in-out 3}
.welcome-sparkles span:nth-child(1){top:19%;left:12%;rotate:-12deg}
.welcome-sparkles span:nth-child(2){top:12%;right:13%;font-size:30px;animation-delay:.5s}
.welcome-sparkles span:nth-child(3){top:50%;right:8%;font-size:25px;animation-delay:1s}
.welcome-sparkles span:nth-child(4){bottom:12%;left:6%;font-size:35px;color:#a7d8ad}
@keyframes welcome-enter{from{opacity:0;translate:0 16px;scale:.88}65%{opacity:1;translate:0 -5px;scale:1.025}to{opacity:1;translate:0 0;scale:1}}
@keyframes welcome-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:8deg}}
@media(max-width:420px){.welcome-screen{padding:14px 16px 24px!important}.welcome-card{padding:0}.welcome-brand{margin-bottom:12px;font-size:34px}.welcome-letters{margin-bottom:20px}.welcome-eyebrow{font-size:18px}.welcome-card h1{font-size:39px}.welcome-copy{font-size:23px;margin-bottom:18px}.welcome-actions .primary{min-height:59px}.welcome-footnote{font-size:12px}.welcome-sparkles span:nth-child(1){left:2%;top:20%}.welcome-sparkles span:nth-child(2){right:4%;top:12%}}
@media(min-width:760px){.welcome-screen{padding-top:24px!important}.welcome-card{max-width:620px}.welcome-letters{margin:10px 0 24px}.welcome-brand{font-size:42px}}
@media(max-height:600px) and (orientation:landscape){.welcome-screen{padding:20px 65px!important}.welcome-card{width:min(100%,980px);max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.welcome-brand,.welcome-letters,.welcome-eyebrow{grid-column:1}.welcome-brand{font-size:26px;justify-self:center}.welcome-brand svg{width:75px;height:20px}.welcome-letters{grid-row:2;gap:10px;margin:5px 0 18px}.welcome-letter{width:84px;height:98px}.welcome-letter span{font-size:94px}.welcome-eyebrow{font-size:17px;margin:0}.welcome-card h1{grid-column:2;grid-row:1 / span 2;font-size:38px;align-self:start;margin:6px 0 0}.welcome-copy{grid-column:2;grid-row:2;align-self:end;margin-bottom:0;font-size:20px}.welcome-actions{grid-column:2;grid-row:3 / span 2;gap:8px}.welcome-actions .primary{min-height:48px;font-size:25px}.welcome-actions .p-button.quiet{min-height:42px;font-size:17px}.welcome-note{font-size:13px;margin:2px 0}.welcome-footnote{grid-column:1;grid-row:4;align-self:end;font-size:12px}.welcome-sparkles span{font-size:24px}}
@media(prefers-reduced-motion:reduce){.welcome-letter,.welcome-sparkles span{animation:none!important}.welcome-actions .p-button{transition:none}.welcome-actions .primary:hover{transform:none}}

@media(min-width:760px) and (min-height:601px) and (max-height:850px){.welcome-brand{font-size:30px;margin:0 0 8px}.welcome-brand:before{height:10px;margin-bottom:5px}.welcome-brand svg{height:20px}.welcome-letters{margin:4px 0 16px}.welcome-letter{width:110px;height:120px}.welcome-letter span{font-size:116px}.welcome-eyebrow{font-size:20px;margin-bottom:9px}.welcome-card h1{font-size:42px;margin-bottom:10px}.welcome-copy{font-size:23px;margin-bottom:12px}.welcome-actions{gap:9px}.welcome-actions .primary{min-height:54px;font-size:28px}.welcome-actions .quiet{min-height:44px}.welcome-actions .welcome-signup{min-height:34px;font-size:18px}.welcome-note{font-size:14px}.welcome-footnote{font-size:12px}}