:root{color-scheme:dark;--bg:#070713;--panel:#12122b;--muted:#b6b7d2;--pink:#fa44dc;--cyan:#23d6ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#f7f5ff;font:16px/1.6 'Segoe UI',Arial,sans-serif}a{color:inherit;text-decoration:none}.sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.poster{position:relative;width:100%;max-width:1920px;margin:auto;background:#03030b}.poster-art{width:100%;display:block}.hotspots{position:absolute;inset:0}.spot{position:absolute;display:block;border-radius:5px}.spot:focus-visible{outline:3px solid #fff;outline-offset:1px;background:#ffffff1b}.home{left:42%;top:1%;width:10%;height:7%}.gamesnav{left:52%;top:1%;width:8%;height:7%}.softnav{left:61%;top:1%;width:11%;height:7%}.journalnav{left:73%;top:1%;width:12%;height:7%}.supportnav{left:86%;top:1%;width:11%;height:7%}.bugnav{left:80%;top:9%;width:18%;height:5%}.suggestnav{left:80%;top:14%;width:18%;height:5%}.feedbacknav{left:80%;top:19%;width:18%;height:5%}.gamecard{left:2%;top:59%;width:26%;height:28%}.softwarecard{left:29%;top:59%;width:23%;height:28%}.journalcard{left:52%;top:59%;width:23%;height:28%}.supportcard{left:76%;top:59%;width:22%;height:28%}.mobile-header{display:none}.content{max-width:1150px;margin:auto;padding:20px 28px 90px}.intro{text-align:center;padding:80px 12px 45px}.intro h1{font-size:clamp(2rem,5vw,4rem);line-height:1.15;letter-spacing:-.03em;margin:16px 0}.intro em{font-style:normal;background:linear-gradient(100deg,#f78cf1,#8a8eff,#30dfff);color:transparent;background-clip:text}.intro>p:last-child,.lead{color:var(--muted);font-size:1.12rem}.kicker{color:#8aeaff;letter-spacing:.2em;font-size:.73rem;font-weight:700}.section{padding:45px 0;scroll-margin-top:80px}.section-head{border-bottom:1px solid #353052;padding-bottom:16px;margin-bottom:25px}.section h2{font-size:clamp(2rem,4vw,3.2rem);margin:5px 0 0}.panel,.tile{background:linear-gradient(145deg,#17152e,#0b1025);border:1px solid #39365e;border-radius:16px;padding:30px;box-shadow:0 8px 45px #0003}.panel h3,.tile h3{font-size:1.4rem;margin:8px 0}.panel p,.tile p{color:var(--muted);margin-bottom:0}.tag{font-size:.7rem;letter-spacing:.16em;color:#ff9ded}.tag.cyan{color:#83eaff}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:25px 0}.tile{transition:transform .2s,border-color .2s}.tile:hover{transform:translateY(-5px);border-color:#d755f8}.tile>span{font-size:2rem;color:#79dfff}.forms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}.forms .panel{padding:24px}.issues{margin-top:22px}footer{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid #343057;padding:28px max(28px,calc((100vw - 1100px)/2));font-size:.8rem;color:#aeb0cd}.footer-brand{font-size:1.4rem;font-style:italic;color:#d6b2ff;font-weight:800}@media(max-width:700px){.mobile-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:#080817f2;border-bottom:1px solid #ad3ff1;padding:10px 18px}.mobile-brand{font-size:1.5rem;font-style:italic;font-weight:800;color:#dca2ff}#menu{background:none;border:1px solid #625485;border-radius:7px;color:white;padding:7px 12px}#mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#101029;padding:15px;box-shadow:0 20px 30px #000a}#mobile-nav.open{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}#mobile-nav a{padding:9px;border:1px solid #36325a;border-radius:8px}.hotspots{display:none}.content{padding:0 18px 60px}.intro{padding:45px 0 20px}.cards,.forms{grid-template-columns:1fr}.panel,.tile{padding:22px}footer{flex-direction:column;text-align:center;padding:30px 18px}.section{padding:28px 0}}

/* Interactive neon navigation overlays on the approved artwork */
.hotspots .spot{isolation:isolate;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;cursor:pointer}
.hotspots .spot::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;pointer-events:none;transition:border-color .18s,box-shadow .18s,background .18s}
.hotspots .spot:hover::after,.hotspots .spot:focus-visible::after{background:linear-gradient(110deg,rgba(252,69,219,.20),rgba(51,213,255,.16));border-color:rgba(108,233,255,.85);box-shadow:0 0 12px rgba(45,213,255,.65),inset 0 0 12px rgba(243,72,238,.28)}
.hotspots .spot:active::after,.hotspots .spot.is-selected::after{background:linear-gradient(100deg,rgba(251,54,220,.30),rgba(30,212,255,.25));border-color:#f79dff;box-shadow:0 0 18px rgba(249,79,232,.75),inset 0 0 12px rgba(42,216,255,.5)}
.hotspots .spot.gamecard:hover::after,.hotspots .spot.softwarecard:hover::after,.hotspots .spot.journalcard:hover::after,.hotspots .spot.supportcard:hover::after{border-width:2px;box-shadow:0 0 24px rgba(40,218,255,.55),inset 0 0 20px rgba(238,54,230,.22)}
#mobile-nav a{transition:background .18s,border-color .18s,box-shadow .18s}
#mobile-nav a:hover,#mobile-nav a:focus-visible,#mobile-nav a.is-selected{background:rgba(157,64,226,.22);border-color:#61e3ff;box-shadow:0 0 12px rgba(61,211,255,.3)}
@media(prefers-reduced-motion:reduce){.hotspots .spot,.hotspots .spot::after,#mobile-nav a{transition:none}}

/* Top navigation: slanted magenta neon frames, cyan-blue when selected. */
@media(min-width:701px){
.hotspots .spot.home,.hotspots .spot.gamesnav,.hotspots .spot.softnav,.hotspots .spot.journalnav,.hotspots .spot.supportnav{border-radius:0;}
.hotspots .spot.home::after,.hotspots .spot.gamesnav::after,.hotspots .spot.softnav::after,.hotspots .spot.journalnav::after,.hotspots .spot.supportnav::after{inset:12% 5%;border:2px solid #f05bfa;border-radius:5px;transform:skewX(-18deg);background:rgba(24,5,39,.18);box-shadow:0 0 7px #f543ed,0 0 17px rgba(237,45,228,.55),inset 0 0 9px rgba(245,57,231,.22);transition:background .18s,border-color .18s,box-shadow .18s;}
.hotspots .spot.home:hover::after,.hotspots .spot.gamesnav:hover::after,.hotspots .spot.softnav:hover::after,.hotspots .spot.journalnav:hover::after,.hotspots .spot.supportnav:hover::after,.hotspots .spot.home:focus-visible::after,.hotspots .spot.gamesnav:focus-visible::after,.hotspots .spot.softnav:focus-visible::after,.hotspots .spot.journalnav:focus-visible::after,.hotspots .spot.supportnav:focus-visible::after{border-color:#ff9bff;background:rgba(101,13,115,.24);box-shadow:0 0 10px #fa4cf2,0 0 23px rgba(247,58,233,.8),inset 0 0 12px rgba(245,57,231,.3);}
.hotspots .spot.home.is-selected::after,.hotspots .spot.gamesnav.is-selected::after,.hotspots .spot.softnav.is-selected::after,.hotspots .spot.journalnav.is-selected::after,.hotspots .spot.supportnav.is-selected::after,.hotspots .spot.home:active::after,.hotspots .spot.gamesnav:active::after,.hotspots .spot.softnav:active::after,.hotspots .spot.journalnav:active::after,.hotspots .spot.supportnav:active::after{border-color:#37dfff;background:rgba(3,79,145,.22);box-shadow:0 0 9px #21caff,0 0 23px rgba(31,199,255,.85),inset 0 0 13px rgba(20,210,255,.36);}
}

/* Remove the rectangular HOME artwork backing; recreate label on the clean header. */
@media(min-width:701px){
.hotspots .spot.home{background:#070511;overflow:visible;}
.hotspots .spot.home::before{content:'HOME';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f7dcff;font-size:clamp(10px,1.18vw,23px);font-family:'Segoe UI',Arial,sans-serif;letter-spacing:.02em;text-shadow:0 0 8px rgba(244,120,255,.55);pointer-events:none;z-index:1;}
.hotspots .spot.home::after{z-index:0;}
.hotspots .spot.home.is-selected::before{color:#d8faff;text-shadow:0 0 9px rgba(34,208,255,.95);}
}

/* Uniform top navigation: cover baked-in artwork and render five identical neon buttons. */
@media(min-width:701px){
.hotspots .spot:is(.home,.gamesnav,.softnav,.journalnav,.supportnav){background:#070511;overflow:visible;border-radius:0;isolation:isolate;}
.hotspots .spot:is(.home,.gamesnav,.softnav,.journalnav,.supportnav)::before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f9dcff;font:400 clamp(10px,1.15vw,23px)/1 'Segoe UI',Arial,sans-serif;letter-spacing:.025em;text-shadow:0 0 7px rgba(255,107,248,.6);pointer-events:none;z-index:2;}
.hotspots .spot.home::before{content:'HOME'}
.hotspots .spot.gamesnav::before{content:'GAMES'}
.hotspots .spot.softnav::before{content:'SOFTWARE'}
.hotspots .spot.journalnav::before{content:'DEV JOURNAL'}
.hotspots .spot.supportnav::before{content:'SUPPORT'}
.hotspots .spot:is(.home,.gamesnav,.softnav,.journalnav,.supportnav)::after{content:'';position:absolute;inset:12% 6%;border:2px solid #f05bfa;border-radius:4px;transform:skewX(-18deg);background:rgba(47,8,55,.16);box-shadow:0 0 7px #ef42ed,0 0 15px rgba(242,51,228,.55),inset 0 0 8px rgba(245,57,231,.18);pointer-events:none;z-index:1;transition:background .18s,border-color .18s,box-shadow .18s;}
.hotspots .spot:is(.home,.gamesnav,.softnav,.journalnav,.supportnav):is(:hover,:focus-visible)::after{border-color:#ffabff;box-shadow:0 0 12px #f845ed,0 0 23px rgba(247,58,233,.8),inset 0 0 12px rgba(245,57,231,.32)}
.hotspots .spot:is(.home,.gamesnav,.softnav,.journalnav,.supportnav):is(.is-selected,:active)::after{border-color:#35ddff;background:rgba(9,91,147,.23);box-shadow:0 0 10px #22cfff,0 0 24px rgba(31,199,255,.9),inset 0 0 12px rgba(20,210,255,.4)}
.hotspots .spot:is(.home,.gamesnav,.softnav,.journalnav,.supportnav).is-selected::before{color:#d8faff;text-shadow:0 0 10px rgba(34,208,255,.95)}
}

/* Support dropdown: replace static text with interactive neon labels. */
@media(min-width:701px){
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav){border-radius:0;background:transparent;overflow:visible;}
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav)::after{content:none!important;}
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav)::before{position:absolute;left:20%;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-start;padding-left:3%;background:#080718;color:#d9c2e8;font:400 clamp(10px,1.07vw,20px)/1.15 'Segoe UI',Arial,sans-serif;white-space:nowrap;text-shadow:0 0 3px rgba(200,132,215,.35);pointer-events:none;transition:color .17s,text-shadow .17s,background .17s;}
.hotspots .spot.bugnav::before{content:'Report a Bug'}
.hotspots .spot.suggestnav::before{content:'Submit a Suggestion'}
.hotspots .spot.feedbacknav::before{content:'Give Feedback'}
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav):is(:hover,:focus-visible)::before{color:#ff91ed;text-shadow:0 0 8px #f94be7,0 0 16px rgba(255,74,221,.8);background:#11091e;}
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav).is-selected::before{color:#69e6ff;text-shadow:0 0 8px #23cfff,0 0 18px rgba(33,202,255,.9);background:#071329;}
}

/* Precise hotspots matched to the owner's green selection outlines (1719x864 screenshot). */
@media(min-width:701px){
.hotspots .spot.bugnav{left:79.55%;top:8.9%;width:15.95%;height:5.65%}
.hotspots .spot.suggestnav{left:79.55%;top:14.55%;width:15.95%;height:5.65%}
.hotspots .spot.feedbacknav{left:79.55%;top:20.2%;width:15.95%;height:5.65%}
.hotspots .spot.gamecard{left:2.75%;top:73.1%;width:24.1%;height:12.05%}
.hotspots .spot.softwarecard{left:27.1%;top:73.1%;width:22.75%;height:12.05%}
.hotspots .spot.journalcard{left:50.2%;top:73.1%;width:22.55%;height:12.05%}
.hotspots .spot.supportcard{left:73.65%;top:73.1%;width:23.05%;height:12.05%}
/* Keep card highlight inside the text panel, with clipped lower corners. */
.hotspots .spot:is(.gamecard,.softwarecard,.journalcard,.supportcard){border-radius:0 0 16px 16px;}
.hotspots .spot:is(.gamecard,.softwarecard,.journalcard,.supportcard)::after{inset:0;border-radius:0 0 14px 14px;clip-path:polygon(0 0,100% 0,100% 92%,96% 100%,4% 100%,0 92%);}
/* Recreate the dropdown text only over its existing text column. Icons remain visible. */
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav)::before{left:23%;right:2%;padding-left:1%;background:#080718;}
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav):is(:hover,:focus-visible)::before{background:#0e091d;}
.hotspots .spot:is(.bugnav,.suggestnav,.feedbacknav).is-selected::before{background:#081128;}
}

/* Exact lower-card selection panels based on the owner's green guide, not full-card bounds. */
@media(min-width:701px){
.hotspots .spot.gamecard{left:2.66%;top:72.86%;width:23.96%;height:12.10%;}
.hotspots .spot.softwarecard{left:27.02%;top:72.86%;width:22.94%;height:12.10%;}
.hotspots .spot.journalcard{left:50.27%;top:72.86%;width:22.89%;height:12.10%;}
.hotspots .spot.supportcard{left:73.58%;top:72.86%;width:23.05%;height:12.10%;}
.hotspots .spot:is(.gamecard,.softwarecard,.journalcard,.supportcard){border-radius:0;clip-path:polygon(2.8% 0,100% 0,96.5% 100%,2% 100%,0 90%);}
.hotspots .spot:is(.gamecard,.softwarecard,.journalcard,.supportcard)::after{inset:0;border:0;border-radius:0;clip-path:none;background:transparent;box-shadow:none;}
.hotspots .spot:is(.gamecard,.softwarecard,.journalcard,.supportcard):is(:hover,:focus-visible)::after{background:linear-gradient(110deg,rgba(245,62,220,.20),rgba(25,206,255,.15));box-shadow:inset 0 0 22px rgba(238,75,235,.48);}
.hotspots .spot:is(.gamecard,.softwarecard,.journalcard,.supportcard):is(.is-selected,:active)::after{background:linear-gradient(110deg,rgba(17,190,255,.25),rgba(20,108,233,.20));box-shadow:inset 0 0 24px rgba(28,216,255,.60);}
}

/* Correct horizontal wagrous logo fitted within the top neon header bar. */
@media(min-width:701px){
.poster::before{content:'';position:absolute;z-index:1;left:0;top:0;width:40%;height:8.65%;background:linear-gradient(90deg,#06040e 0%,#070511 92%,rgba(7,5,17,0) 100%);pointer-events:none;}
.poster::after{content:'';position:absolute;z-index:2;left:3.8%;top:.7%;width:27%;height:7.3%;background:url('/wagrous_header_logo.png') center center / contain no-repeat;pointer-events:none;}
.hotspots{z-index:3;}
}