/* Share the rotate screen's scenery, wordmark, panel and typography. */
#splash { z-index:25; touch-action:pan-y; -webkit-user-select:text; user-select:text; }
#splash .rotate-screen__layout { gap:16px; padding-top:calc(env(safe-area-inset-top,0px) + 24px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px); }
#splash .rotate-screen__logo { max-width:280px; }
#splash .rotate-screen__title { font-size:28px; margin-top:20px; }
#splash .welcome-card { padding:26px 28px; }
.welcome-crest { display:block; width:72px; height:72px; margin:14px auto; border-radius:17px; box-shadow:0 6px 18px #07111688; }
#splash .rotate-screen__description { margin-top:12px; font:14px/1.6 system-ui,sans-serif; }
.welcome-play,.welcome-install { display:block; width:100%; min-height:52px; margin-top:24px; padding:12px 16px; border:3px double #eed69c; border-radius:4px; background:linear-gradient(#e2c88c,#b49253); box-shadow:0 3px 12px #0005; color:#24281f; font:20px/1.2 Georgia,serif; cursor:pointer; }
.welcome-play:hover:not(:disabled),.welcome-install:hover { filter:brightness(1.1); }
.welcome-play:active:not(:disabled),.welcome-install:active { transform:translateY(1px); }
.welcome-play:disabled { opacity:.65; cursor:wait; }
#splash :focus-visible { outline:2px solid #f2dfac; outline-offset:5px; }
.welcome-note { margin:10px 0 0; color:#b0beb4; font:11px/1.5 system-ui,sans-serif; }
.welcome-help { margin-top:23px; border-top:1px solid #a18c5755; text-align:left; }
.welcome-help summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:8px 0 0; color:#dfc88e; font:13px/1.4 system-ui,sans-serif; cursor:pointer; list-style:none; }
.welcome-help summary::-webkit-details-marker { display:none; }
.welcome-help summary::after { content:'+'; font-size:21px; font-weight:300; }
.welcome-help[open] summary::after { content:'−'; }
.welcome-help ol { margin:10px 0 0; padding-left:20px; color:#c7d0c5; font:13px/1.6 system-ui,sans-serif; }
.welcome-help li { padding-left:3px; margin:8px 0; }
.welcome-help b { color:#eee1bf; font-weight:600; }
.welcome-help .welcome-note { margin-top:13px; }
.welcome-install { margin-top:14px; min-height:44px; font:14px/1.4 system-ui,sans-serif; }
.welcome-status { margin:16px 0 0; color:#b0beb4; font:12px/1.5 system-ui,sans-serif; }
.welcome-status:empty { display:none; }
.welcome-spinner { display:inline-block; width:10px; height:10px; margin-right:8px; border:2px solid #d2b77955; border-top-color:#d2b779; border-radius:50%; vertical-align:-2px; animation:welcome-spin 1s linear infinite; }
#splash .welcome-legal { max-width:300px; margin:12px auto 0; font:10px/1.6 system-ui,sans-serif; color:#a3b3aa; }
#splash-install[hidden],body:not(.phone) .welcome-help,body:not(.phone) .welcome-play,body:not(.phone) .welcome-browser-note,.welcome-help .steps { display:none; }
body.ios .welcome-help .steps.ios,body.android .welcome-help .steps.android { display:block; }
@keyframes welcome-spin { to { transform:rotate(360deg); } }
@media(max-height:710px) { #splash .welcome-card { padding:24px 25px; } .welcome-crest { width:64px; height:64px; margin:12px auto; border-radius:15px; } .welcome-play { margin-top:18px; } .welcome-help { margin-top:16px; } }
@media(orientation:landscape) and (max-height:500px) { #splash .rotate-screen__layout { max-width:760px; grid-template-columns:1fr 1.2fr; grid-template-rows:1fr auto; gap:12px 32px; padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left)); } #splash .rotate-screen__brand { align-self:end; } #splash .rotate-screen__middle { grid-column:2; grid-row:1 / 3; } #splash .rotate-screen__footer { align-self:start; } #splash .welcome-crest { display:none; } #splash .rotate-screen__eyebrow { margin-bottom:12px; } #splash .welcome-card { padding:22px 25px; } #splash .rotate-screen__title { font-size:26px; } }
@media(prefers-reduced-motion:reduce) { .welcome-spinner { animation:none; } }