/* The splash and loading screens (docs/plan/0023-online-accounts/PLAN.md D11). A file of its own so the security policy holds. Everything is inside #splash, so the game's own styles stay out of it. */
#splash{position:fixed;inset:0;z-index:2147483000;background:#f8f4ee;color:#51394f;font-family:ui-rounded,'Segoe UI',sans-serif;overflow:hidden;display:flex;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:manipulation;user-select:none;-webkit-user-select:none}
#splash[hidden]{display:none}
#splashStage{position:relative;height:100%;width:min(100%,480px,62vh);width:min(100%,480px,62dvh);container-type:inline-size;flex:none}
#splashStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
#splash .spl-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 3cqw}
#splash .spl-fx{position:absolute;inset:0;pointer-events:none;z-index:8}
#splash .spl-bit{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:3px}
#splash .spl-skip{position:absolute;inset:0;z-index:9;display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;margin:0;padding:0 0 calc(22px + env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;background:transparent;font:inherit;font-size:14px;font-weight:700;color:#6a5468;cursor:pointer;-webkit-tap-highlight-color:transparent}
#splash .spl-skip:focus{outline:none}
#splash.tabbed .spl-skip:focus{outline:3px solid #2b6f8f;outline-offset:-5px}
#splash .host{position:relative;flex:none}
#splash .host svg{width:100%;height:100%}

/* Word and blocks, in the board's own colours */
#splash .spl-word{display:flex;gap:.9cqw;margin:0;font-size:5.9cqw;font-weight:800;line-height:1}
#splash .spl-word.b{margin-bottom:9cqw}
#splash .spl-word.c{margin-bottom:16cqw}
#splash .spl-tile{width:9.2cqw;height:9.2cqw;display:grid;place-items:center;border-radius:1.7cqw;color:#51394f;background:var(--c);box-shadow:inset 0 -.9cqw var(--s);flex:none;font-size:5.9cqw;font-weight:800;line-height:1}
#splash .c0{--c:#efb399;--s:#d99c82}#splash .c1{--c:#7fc5bd;--s:#65a9a2}#splash .c2{--c:#b9a0d7;--s:#a48ac4}#splash .c3{--c:#f3dc8c;--s:#dcc277}#splash .c3.spl-tile,#splash .c3.spl-cell{background:var(--c)!important}
#splash .spl-board{display:grid;grid-template-columns:repeat(8,1fr);gap:.8cqw;padding:1.5cqw;background:#e7dfdf;border:1px solid #dbd0d5;border-radius:3.6cqw;box-shadow:0 5px 0 #d7cccf;position:relative;transition:background-color .25s,box-shadow .25s,border-color .25s}
#splash .spl-cell{aspect-ratio:1;border-radius:1.5cqw;background:#f7f0e9;position:relative;transition:opacity .25s}
#splash .spl-cell.on{background:var(--c);box-shadow:inset 0 -.7cqw var(--s)}
#splash .spl-board.cleared{background:#0000;box-shadow:none;border-color:#0000}
#splash .spl-board.cleared .spl-cell:not(.row){opacity:0}
#splash .spl-cell.row{background:none}
#splash .spl-cell .spl-tile{position:absolute;inset:0;width:100%;height:100%;z-index:3}
#splash .spl-shine{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(105deg,#fff0 30%,#ffffffd0 50%,#fff0 70%);opacity:0}
#splash .spl-say{margin:0;font-size:clamp(15px,4.5cqw,18px);font-weight:700;text-align:center;line-height:1.3;min-height:2.6em;display:flex;align-items:center}
#splash .spl-more{margin:0;font-size:clamp(14px,4cqw,16px);text-align:center;line-height:1.3;color:#6a5468;min-height:2.6em;opacity:0;transition:opacity .6s}
#splash .spl-more.show{opacity:1}
#splash .spl-name{margin:0 0 3cqw;font-size:clamp(24px,8cqw,31px);font-weight:800}
#splash .spl-name.gap{margin-bottom:30cqw}
#splash .spl-fail{margin:0 0 20px;padding:0 12px;font-size:clamp(16px,4.6cqw,19px);font-weight:700;text-align:center;line-height:1.35}
#splash .spl-again{min-height:48px;min-width:140px;padding:8px 22px;border:0;border-radius:13px;background:#51394f;color:#fffaf5;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
#splash .spl-again:focus-visible{outline:3px solid #2b6f8f;outline-offset:2px}

/* A hop-along row */
#splash .spl-track{position:relative;width:94cqw;margin:3cqw 0}
#splash .spl-row8{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(8,1fr);gap:.8cqw;padding:1.4cqw;background:#e7dfdf;border-radius:3cqw;box-shadow:0 4px 0 #d7cccf}
#splash .spl-track .host{position:absolute;left:0;bottom:calc(100% - 3cqw);z-index:2}

/* B wardrobe */
#splash .spl-hold{position:relative;display:flex;flex-direction:column;align-items:center}
#splash .spl-rail{display:flex;gap:2cqw;margin:3cqw 0 4cqw}
#splash .spl-peg{width:15cqw;height:15cqw;max-width:60px;max-height:60px;background:#f7f0e9;border:1px solid #d7cbd3;border-radius:3cqw;display:grid;place-items:center;transition:background-color .2s,box-shadow .2s}
#splash .spl-peg svg{width:88%;height:88%;display:block;overflow:visible}
#splash .spl-peg.now{background:#fff3d0;box-shadow:0 0 0 2px #51394f}
#splash .spl-bed{width:46cqw;height:4cqw;border-radius:2cqw;background:#e7dfdf;box-shadow:0 3px 0 #d7cccf;margin-top:-1.2cqw}

/* C friends */
#splash .spl-friends{display:flex;justify-content:center;gap:1cqw;position:relative}
#splash .spl-friends .host{width:22.5cqw;height:22.5cqw}
#splash .spl-slot{width:9.2cqw;height:9.2cqw;border-radius:1.7cqw;background:#efe8e2;position:relative;flex:none}
#splash .spl-slot .spl-tile{position:absolute;inset:0;opacity:0}
#splash .spl-toss{position:absolute;left:0;top:0;z-index:7;border-radius:1.4cqw;background:var(--c);box-shadow:inset 0 -.7cqw var(--s)}

/* The game's own Cubikin rules, from style.css */
#splash .cubikin{display:block;overflow:visible}
#splash .cubikin g,#splash .cubikin ellipse,#splash .cubikin rect,#splash .cubikin path{transform-box:view-box}
#splash .cubikin .cb-jump,#splash .cubikin .face{transform-origin:60px 70px}
#splash .cubikin .cb-squash,#splash .cubikin .cb-pose,#splash .cubikin .cb-breathe,#splash .cubikin .cb-dance{transform-origin:60px 110px}
#splash .cubikin .shadow{transform-origin:60px 113px}
#splash .cubikin .eyes-lid{transform-origin:60px 66px}
#splash .cubikin .eyes{transition:transform .25s ease}
#splash .cubikin .cb-pose{transition:transform .5s ease}
#splash .cubikin[data-pose=idle] .cb-breathe{animation:splashBreathe 3.6s ease-in-out infinite}
@keyframes splashBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.018,.972)}}
#splash .cubikin :is(.eyes-dots,.eyes-happy,.eyes-star,.eyes-wide,.eyes-heart,.lids,.eyes-shut,.m-smile,.m-big,.m-wobble,.m-sad,.m-o,.sweat,.zz){display:none}
#splash .cubikin:not([data-mood=calm]) .face-own{display:none}
#splash .cubikin:is([data-mood=happy],[data-mood=worried],[data-mood=sad],[data-mood=sleepy]) .eyes-dots{display:inline}
#splash .cubikin:is([data-mood=cheer],[data-mood=giggle],[data-mood=wiggle]) .eyes-happy,#splash .cubikin[data-mood=star] .eyes-star,#splash .cubikin[data-mood=surprised] .eyes-wide,#splash .cubikin[data-mood=love] .eyes-heart,#splash .cubikin[data-mood=sleepy] .lids{display:inline}
#splash .cubikin:is([data-mood=happy],[data-mood=cheer],[data-mood=star],[data-mood=giggle],[data-mood=wiggle],[data-mood=love]) .m-big,#splash .cubikin[data-mood=sleepy] .m-smile,#splash .cubikin[data-mood=sad] .m-sad,#splash .cubikin[data-mood=surprised] .m-o{display:inline}
#splash .cubikin[data-mood=sleepy] .zz{display:inline;transform-box:fill-box;transform-origin:center;animation:splashZz 2.8s ease-out infinite}
#splash .cubikin[data-mood=star] .eyes-star polygon{transform-box:fill-box;transform-origin:center;animation:splashTwinkle .7s ease-in-out infinite alternate}
#splash .cubikin .hrt{transform-box:fill-box;transform-origin:center}
#splash .cubikin.blink .eyes-lid{visibility:hidden}
#splash .cubikin.blink .eyes-shut{display:inline}
#splash .cubikin .front3d .sq{display:none}
#splash .cubikin.turning .front3d .sq{display:inline}
#splash .cubikin.turning .front3d .rnd{display:none}
@keyframes splashZz{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-14px) scale(1.2)}}
@keyframes splashTwinkle{to{transform:scale(1.18) rotate(18deg)}}

/* Reduce motion, the system's or the game's: a still frame and fades, nothing else */
#splash.calm *{animation:none!important;transition:none!important}
#splash.calm .spl-more{transition:opacity .6s!important}