@font-face{font-family:ArcadeR;src:url('font/ARCADE_R.TTF')}
:root{color-scheme:dark;--navy:#11142b;--cream:#fff4da;--gold:#ffdc59;--pink:#ff8fb0;--muted:#b7b6ce}
*{box-sizing:border-box}
body{margin:0;background:#000;font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
body.on-splash{margin-left:0!important;background:var(--navy)}
.on-splash #canvas{visibility:hidden}
#single-man-splash{position:fixed;inset:0;z-index:10;overflow:auto;background:radial-gradient(ellipse at 80% 40%,#292246 0,transparent 54%),var(--navy);color:var(--cream);padding:30px clamp(24px,5vw,96px) 24px;display:flex;flex-direction:column}
#single-man-splash[hidden]{display:none}
.splash-header,.splash-footer{display:flex;align-items:center;justify-content:space-between;gap:24px}
.splash-header{font-size:11px;font-weight:800;letter-spacing:1.7px;padding-bottom:24px;border-bottom:1px solid #ffffff19}
.brand{display:flex;align-items:center;gap:10px}.brand-dot{width:10px;height:10px;background:var(--gold);border-radius:50%;box-shadow:0 0 20px #ffdc5944}
.edition{color:var(--muted);font-size:10px;letter-spacing:1.4px}
.splash-layout{display:grid;grid-template-columns:.85fr 1.2fr;align-items:center;gap:36px;flex:1;max-width:1600px;width:100%;margin:0 auto;padding:38px 0}
.splash-copy{position:relative;z-index:1}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--pink)}
h1{font-size:clamp(66px,7.5vw,128px);font-style:italic;line-height:.86;letter-spacing:-.075em;font-weight:950;margin:23px 0 22px;filter:drop-shadow(0 6px 0 #050718)}
h1>span{display:block;color:var(--gold)}.title-period{color:var(--pink)}
.punchline{font-size:clamp(20px,2.2vw,34px);font-weight:750;letter-spacing:-.7px;margin:0 0 22px}.punchline em{color:var(--gold);font-style:normal}
.premise{color:var(--muted);font-size:16px;line-height:1.65;margin:0 0 28px}
#start-single-man{display:flex;align-items:center;justify-content:space-between;gap:48px;min-height:62px;padding:16px 24px;border:2px solid #ffeb98;border-radius:12px;color:#15162c;background:var(--gold);font-weight:900;font-size:18px;letter-spacing:.5px;box-shadow:0 6px 0 #9d6a23;cursor:pointer;transition:transform .15s,box-shadow .15s}
#start-single-man span{font-size:28px;line-height:1}#start-single-man:hover{transform:translateY(-3px);box-shadow:0 9px 0 #9d6a23}#start-single-man:active{transform:translateY(3px);box-shadow:0 3px 0 #9d6a23}#start-single-man:focus-visible{outline:3px solid white;outline-offset:7px}
.start-hint{font-size:9px;letter-spacing:1.5px;font-weight:700;color:var(--muted);margin:17px 0 28px}
.survival-guide{display:flex;flex-wrap:wrap;gap:10px 16px;max-width:440px;font-size:11px;color:#ded9eb}.survival-guide b{color:var(--pink);font-size:9px;margin-right:4px}
.splash-art{position:relative;margin:0;transform:rotate(2deg);min-width:0}.poster{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid #ffffff21;border-radius:30px;box-shadow:0 28px 90px #05071399;background:#1f203c}
.status-sticker{position:absolute;top:-14px;right:12px;background:var(--cream);color:#24233c;border-radius:9px;box-shadow:0 6px 0 #05071366;transform:rotate(-7deg);padding:14px 18px 14px 30px;font-size:8px;font-weight:800;letter-spacing:1.2px}.status-sticker strong{display:block;font-size:18px;letter-spacing:-.5px;margin-top:4px}.status-light{position:absolute;left:13px;top:17px;width:7px;height:7px;border-radius:50%;background:#eb607c}
figcaption{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) rotate(-2deg);background:#101227ed;border:1px solid #ffffff33;border-radius:30px;padding:12px 18px;white-space:nowrap;font-size:12px;color:#e5daef;box-shadow:0 4px 16px #0005}figcaption strong{color:var(--gold)}
.splash-footer{border-top:1px solid #ffffff19;padding-top:20px;font-size:9px;font-weight:700;letter-spacing:.7px;color:var(--muted)}.splash-footer>span{display:flex;align-items:center;gap:5px}.splash-footer i{font-style:normal;font-weight:400;color:#88869f;margin-left:5px;letter-spacing:0}.footer-joke{font-style:italic;font-weight:400!important;letter-spacing:0}
kbd{font:10px Arial,sans-serif;border:1px solid #ffffff33;border-bottom:2px solid #ffffff44;border-radius:4px;padding:4px 5px;min-width:18px;text-align:center;color:#f5e9de}
@media(min-width:1400px){.splash-layout{gap:75px}.premise{font-size:19px}}
@media(max-width:800px){#single-man-splash{padding:22px 24px}.edition{display:none}.splash-layout{gap:22px;grid-template-columns:1fr 1fr;padding:38px 0}h1{font-size:clamp(64px,10vw,86px)}.eyebrow{font-size:9px;letter-spacing:1px}.premise{font-size:14px}.punchline{font-size:22px}#start-single-man{gap:20px;font-size:15px;padding:14px 18px}.survival-guide{gap:9px}.footer-joke{display:none!important}.poster{aspect-ratio:16/10}.status-sticker{right:-5px;padding:10px 12px 10px 25px}.status-sticker strong{font-size:15px}.status-light{left:10px;top:13px}figcaption{font-size:10px;padding:10px 13px}}
@media(max-width:560px){#single-man-splash{padding:18px 20px}.splash-header{font-size:9px;padding-bottom:16px}.splash-layout{display:flex;flex-direction:column;align-items:stretch;gap:34px;padding:28px 0}.splash-copy{text-align:center}.eyebrow{font-size:10px}h1{margin:18px 0;line-height:.83;font-size:clamp(50px,14vw,76px);white-space:nowrap;letter-spacing:-.07em}h1>span{display:inline;margin-left:12px}.punchline{font-size:22px;margin-bottom:14px}.premise{font-size:14px;line-height:1.5;margin-bottom:22px}.premise br:nth-of-type(2){display:none}#start-single-man{width:100%;max-width:360px;margin:auto;min-height:56px}.start-hint{margin-bottom:19px}.survival-guide{justify-content:center;margin:auto;font-size:10px;gap:10px}.splash-art{width:94%;margin:0 auto}.poster{aspect-ratio:16/10;border-radius:22px}.splash-footer{font-size:8px;gap:12px;flex-wrap:wrap}.splash-footer i{font-size:9px}figcaption{font-size:11px}}
@media(prefers-reduced-motion:reduce){#start-single-man{transition:none}}

/* The title is a custom rendered 3D bubble-letter asset, with accessible alt text. */
h1{font-size:0!important;line-height:1;margin:12px 0 18px;filter:none;white-space:normal}
.title-logo{display:block;width:min(100%,430px);height:auto}
@media(max-width:560px){h1{margin:0 0 10px}.title-logo{width:min(90%,340px);margin:auto}}

/* Keep the mobile sticker below the hero's face, with the caption underneath. */
.poster-scene{position:relative}
@media(max-width:800px){
    .status-sticker{top:auto;right:auto;bottom:10px;left:8px;transform:rotate(-3deg)}
    figcaption{position:relative;bottom:auto;left:auto;transform:rotate(-2deg);width:max-content;max-width:100%;margin:14px auto 0}
}