/* Original vector emblem and CSS Gotham scenery; each universe has its own art direction. */
body{--bat-accent:#c9d7e3;--bat-ink:#edf2f5;--bat-bg:#0c1117;--bat-sky:#2d3f50;--bat-line:#52616c;--bat-font:Arial,sans-serif}
body[data-world=zelda]{--bat-accent:#f5c653;--bat-ink:#fff0c7;--bat-bg:#151828;--bat-sky:#963b37;--bat-line:#987446;--bat-font:Georgia,serif}
body[data-world=cyberpunk]{--bat-accent:#ff493f;--bat-ink:#eee7de;--bat-bg:#100f0e;--bat-sky:#671917;--bat-line:#742b26;--bat-font:Impact,'Arial Narrow',sans-serif}
body[data-world=souls]{--bat-accent:#edc85c;--bat-ink:#ede6ff;--bat-bg:#100c20;--bat-sky:#493b79;--bat-line:#766295;--bat-font:Georgia,serif}
.bat-oval{fill:none;stroke:currentColor;stroke-width:3;opacity:0}.bat-mark{fill:currentColor}
[data-world=zelda] .bat-oval,[data-world=souls] .bat-oval{opacity:1;fill:var(--bat-accent)}
[data-world=zelda] .bat-mark,[data-world=souls] .bat-mark{fill:var(--bat-bg);transform:translate(24px,13px) scale(.8)}
.detective-toast{position:fixed;right:24px;bottom:24px;z-index:100;width:min(390px,calc(100vw - 32px));display:flex;align-items:center;gap:16px;padding:17px;background:linear-gradient(125deg,#263341,#151d26);color:#f4f6f8;border:1px solid #596776;border-bottom:3px solid var(--bat-accent);border-radius:5px;box-shadow:0 12px 55px #0008;text-align:left;animation:detective-arrival .6s cubic-bezier(.2,.85,.25,1) both}
.detective-badge{display:grid;place-items:center;width:65px;height:65px;flex:none;background:var(--bat-bg);color:var(--bat-accent);border:1px solid var(--bat-line);box-shadow:inset 0 0 20px #ffffff0c}.detective-badge svg{width:57px}
.detective-toast-copy{display:grid;gap:4px;font:12px/1.4 Arial,sans-serif}.detective-toast-copy small{color:#b6c4cf;font-size:9px;letter-spacing:1.6px}.detective-toast-copy strong{font-size:16px}.detective-toast-copy>span{color:#c3cfd8;font-size:11px}
.detective-toast:hover{border-color:var(--bat-accent)}
#detective-dialog{padding:0;border:1px solid var(--bat-line);border-radius:3px;width:min(590px,calc(100% - 32px));max-height:90dvh;overflow:auto;background:var(--bat-bg);color:var(--bat-ink);box-shadow:0 35px 140px #000b;isolation:isolate}
#detective-dialog[open]{animation:detective-reveal .55s ease both}
#detective-dialog::backdrop{background:#030609c9;backdrop-filter:blur(10px)}
.detective-close{position:absolute;right:12px;top:10px;z-index:5;width:40px;height:40px;border:1px solid #ffffff45;border-radius:50%;background:#0007;color:#fff;font:28px/1 Arial}
.gotham-scene{position:relative;height:210px;overflow:hidden;background:radial-gradient(ellipse at 52% 17%,var(--bat-sky),var(--bat-bg) 85%)}
.gotham-scene:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 19px,#ffffff06 20px,transparent 21px 36px);pointer-events:none}
.gotham-beam{position:absolute;left:50%;top:25px;width:230px;height:260px;background:linear-gradient(#dceaff27,transparent);clip-path:polygon(0 0,100% 0,58% 100%);transform:translateX(-50%) rotate(-12deg);filter:blur(4px);animation:signal-breathe 6s ease-in-out infinite alternate}
.gotham-signal{position:absolute;top:23px;left:50%;width:170px;transform:translateX(-50%);color:var(--bat-accent);filter:drop-shadow(0 0 18px #d7e8ff36)}
.gotham-signal svg{display:block;width:100%}
.gotham-city{position:absolute;bottom:0;left:-2%;width:104%;height:105px;display:flex;align-items:flex-end;gap:3px;opacity:.95}
.gotham-city i{position:relative;width:12%;height:55%;background:linear-gradient(90deg,#080b12 50%,#121821 50%);border-top:1px solid var(--bat-line);box-shadow:0 10px 30px #0005}
.gotham-city i:after{content:'';position:absolute;inset:10px 7px;background:repeating-linear-gradient(0deg,transparent 0 9px,var(--bat-accent) 10px 11px,transparent 12px 18px);opacity:.14}
.gotham-city i:nth-child(2n){height:85%}.gotham-city i:nth-child(3n){height:110%;clip-path:polygon(15% 20%,40% 20%,40% 0,60% 0,60% 20%,85% 20%,85% 100%,15% 100%)}.gotham-city i:nth-child(5){height:32%}
.gotham-edition{position:absolute;left:28px;bottom:15px;z-index:1;color:var(--bat-accent);font:10px/1.4 Arial;letter-spacing:3px}
.detective-content{padding:27px 38px 30px;text-align:center;background:linear-gradient(135deg,#ffffff05,transparent)}
.detective-kicker{display:flex;justify-content:space-between;color:var(--bat-accent);font:10px/1.5 monospace;letter-spacing:2px;border-bottom:1px solid var(--bat-line);padding-bottom:14px;margin-bottom:23px}
#detective-dialog h2{font:700 clamp(29px,5.8vw,45px)/1.04 var(--bat-font);letter-spacing:-1.4px;color:var(--bat-ink);margin:0 0 14px}
.detective-tagline{color:var(--bat-accent);font:italic 15px/1.5 Georgia,serif;margin-bottom:13px}
#detective-description{font:14px/1.7 Arial,sans-serif;color:var(--bat-ink);opacity:.8;max-width:360px;margin:auto}
.detective-seals{display:flex;justify-content:center;gap:9px;margin:23px 0;color:var(--bat-accent)}.detective-seals span{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--bat-line);border-radius:50%;font:10px monospace}
.detective-game{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;padding:16px 12px;border:1px solid var(--bat-line);background:#ffffff09;color:var(--bat-ink);font:14px/1.4 Arial;cursor:default}.detective-game span{font:8px/1.4 monospace;letter-spacing:1px;color:var(--bat-accent);border:1px solid var(--bat-line);padding:4px 6px}
.detective-footnote{font:11px/1.7 Arial;color:var(--bat-ink);opacity:.55;margin-top:18px}
.detective-reopen{display:block;border:1px solid var(--line);padding:14px;color:var(--accent)}
.detective-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Animated Series: a red painted sky, gold oval and stepped Deco towers. */
[data-world=zelda] .gotham-scene{background:linear-gradient(165deg,#bd5941,#632d3d 60%,#151828)}
[data-world=zelda] .gotham-city i{background:#121628;border-top:4px solid #c58a49;clip-path:polygon(0 20%,20% 20%,20% 10%,35% 10%,35% 0,65% 0,65% 10%,80% 10%,80% 20%,100% 20%,100% 100%,0 100%)}
[data-world=zelda] .gotham-scene:after{background:linear-gradient(130deg,transparent 50%,#0002 50%)}
[data-world=zelda] #detective-dialog{border:3px double var(--bat-accent)}
/* Pattinson: rain, harsh red light and a condensed detective dossier. */
[data-world=cyberpunk] .gotham-scene{background:radial-gradient(ellipse at 50% 0,#b62c22,#240d0d 65%,#100f0e)}
[data-world=cyberpunk] .gotham-scene:after{background:repeating-linear-gradient(100deg,transparent 0 15px,#ffc8ac16 16px,transparent 17px 27px);animation:gotham-rain 1.8s linear infinite}
[data-world=cyberpunk] .gotham-signal{width:210px;top:15px;filter:drop-shadow(0 0 20px #e8282840)}
[data-world=cyberpunk] #detective-dialog h2{text-transform:uppercase;font-weight:400;letter-spacing:1px}
[data-world=cyberpunk] .detective-kicker{border-top:3px solid var(--bat-accent);padding-top:12px}
[data-world=cyberpunk] .detective-content{background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px)}
/* 1990s: towering gothic silhouettes, sculpted gold and electric violet. */
[data-world=souls] .gotham-scene{background:radial-gradient(ellipse at 20% 10%,#36879475,transparent 55%),radial-gradient(ellipse at 80% 0,#8650a8,#100c20 80%)}
[data-world=souls] .gotham-city i{height:110%;background:linear-gradient(90deg,#090919,#383049,#11101f);clip-path:polygon(0 35%,20% 35%,20% 15%,40% 15%,50% 0,60% 15%,80% 15%,80% 35%,100% 35%,100% 100%,0 100%)}
[data-world=souls] .gotham-signal{filter:drop-shadow(0 2px 0 #7d4d1b) drop-shadow(0 0 20px #d2a63c55)}
[data-world=souls] #detective-dialog{border:4px ridge #8b7896;border-radius:65px 65px 4px 4px}
[data-world=souls] #detective-dialog h2{text-shadow:0 2px #37284c}
@keyframes detective-arrival{from{opacity:0;transform:translateY(120%)}to{opacity:1;transform:translateY(0)}}
@keyframes detective-reveal{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes signal-breathe{to{opacity:.45;transform:translateX(-50%) rotate(9deg)}}
@keyframes gotham-rain{to{background-position:27px 80px}}
@media(max-width:500px){.detective-toast{right:16px;bottom:16px;padding:13px;gap:12px}.detective-toast-copy strong{font-size:14px}.detective-content{padding:23px}.gotham-scene{height:175px}.detective-game{flex-wrap:wrap;gap:8px}.detective-seals{gap:6px}}
@media(prefers-reduced-motion:reduce){#detective-dialog,.detective-toast,.gotham-beam,.gotham-scene:after{animation:none!important}}
.motion-paused #detective-dialog,.motion-paused .detective-toast,.motion-paused .gotham-beam,.motion-paused .gotham-scene:after{animation:none!important}

.detective-game:not(:disabled){cursor:pointer;background:var(--bat-accent);color:var(--bat-bg)}.detective-game:not(:disabled) span{color:var(--bat-bg);border-color:currentColor}.detective-game:not(:disabled):hover{filter:brightness(1.12)}