/* PerDiem Games shared splash screen. Standard markup:
   <div class="splash" id="splash"> .icon > svg, h1, p, button.play, .meta > b + span, .toast2 */
.splash{position:fixed;inset:0;z-index:50;background:var(--brand);color:#121212;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:24px}
.splash.off{display:none}
.splash .icon{width:80px;height:80px;margin-bottom:6px}
.splash .icon svg{width:100%;height:100%;display:block}
.splash h1{margin:0;font-size:44px}
.splash p{margin:0;font-size:17px;max-width:360px;line-height:1.4}
.splash .play{margin:18px 0 26px;font:inherit;font-weight:600;font-size:16px;padding:14px 48px;border-radius:999px;border:0;background:#121212;color:#fff;cursor:pointer}
.splash .meta{font-size:14px;line-height:1.5}
.splash .meta b{display:block;font-weight:700}
.splash .play:disabled{opacity:.5}
.splash .note{font-size:12.5px;color:#5a5a5a;min-height:18px;max-width:320px}
.splash .toast2{font-size:13px;opacity:0;transition:opacity .2s;height:16px}
.splash .toast2.on{opacity:.7}

/* Motion: content rises in on show (replays when returning from a game); splash fades out on Play.
   The splash itself appears instantly (no fade-in), so the game never shows through on load.
   Exit relies on display being transitionable (Chrome 117+, Safari 17.4+); older browsers just snap. */
.splash{opacity:1;transition:opacity .28s ease,display .28s allow-discrete,overlay .28s allow-discrete}
.splash.off,.splash[hidden]{opacity:0;pointer-events:none}
.splash > :is(.icon,h1,p,.play,.meta){animation:splash-in .5s cubic-bezier(.2,.8,.3,1) backwards}
.splash > .icon{animation-delay:calc(var(--lead,0s) + .04s)}
.splash > h1{animation-delay:calc(var(--lead,0s) + .1s)}
.splash > p{animation-delay:calc(var(--lead,0s) + .16s)}
.splash > .play{animation-delay:calc(var(--lead,0s) + .22s)}
.splash > .meta{animation-delay:calc(var(--lead,0s) + .3s)}
.splash > :is(.icon,h1,p,.play,.meta){transition:transform .28s ease}
.splash.off > :is(.icon,h1,p,.play,.meta),.splash[hidden] > :is(.icon,h1,p,.play,.meta){transform:translateY(-10px)}
.splash .play:active{transform:scale(.97)}
@keyframes splash-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.splash,.splash > *{animation:none!important;transition:none!important}}

/* Grain and a soft diagonal light: a touch lighter at the top left, a touch darker at the bottom right, over whatever color the game uses */
:root{--pd-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.splash::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--pd-grain),linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.09) 100%);background-size:200px 200px,auto;animation:pd-grain-in .5s ease backwards}
@keyframes pd-grain-in{from{opacity:0}}
@supports (color: oklch(from red l c h)){.splash::before{background-image:var(--pd-grain),linear-gradient(135deg, oklch(from var(--splash-tint,var(--brand)) calc(l + .05) calc(c * .7) h) 0%, var(--splash-tint,var(--brand)) 50%, oklch(from var(--splash-tint,var(--brand)) calc(l - .055) calc(c * 1.5) h) 100%)}}

/* About: a small "i" in the splash's bottom-right corner opens a popover with a short description and FAQ.
   Markup: button.pd-info[popovertarget=pdAbout] inside .splash, then div.pd-about#pdAbout[popover] after it.
   The text is in the HTML from the start, so search engines read it; players only see it if they tap the "i". */
.splash .pd-info{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#121212;opacity:.45;cursor:pointer;transition:opacity .15s}
.splash .pd-info:hover,.splash .pd-info:focus-visible{opacity:.8}
.splash .pd-info{animation:pd-grain-in .5s ease calc(var(--lead,0s) + .4s) backwards}
.pd-about{box-sizing:border-box;width:min(360px,calc(100vw - 32px));max-height:min(80dvh,640px);overflow:auto;overscroll-behavior:contain;margin:auto;padding:24px 22px 20px;border:0;border-radius:14px;background:var(--bg,#fff);color:var(--ink,#121212);box-shadow:0 12px 40px rgba(0,0,0,.18);text-align:left;-webkit-user-select:text;user-select:text;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .2s ease,transform .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}
.pd-about:popover-open{opacity:1;transform:none}
@starting-style{.pd-about:popover-open{opacity:0;transform:translateY(8px) scale(.98)}}
.pd-about::backdrop{background:rgba(18,18,18,.3)}
.pd-about h2{margin:0 28px 10px 0;font-size:24px}
.pd-about h3{margin:16px 0 4px;font-size:15px;font-weight:600}
.pd-about p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink2,#5a5a5a)}
.pd-about .more{margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#dcdcd8);font-size:14px}
.pd-about a{color:var(--ink,#121212);text-underline-offset:3px}
.pd-about .x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--ink2,#5a5a5a)}
@media (prefers-reduced-motion:reduce){.pd-about{transition:none}}