/* Word Dome entry gate. Existing account form and game stay intact. */
.wd-gate-screen{display:none}
body.wd-gate{background:linear-gradient(180deg,#073a9b 0%,#001d79 48%,#00115a 100%)}
body.wd-gate .wd-gate-screen{display:flex;min-height:100dvh;align-items:center;justify-content:center}
.wd-gate-art{width:100vw;height:100dvh;aspect-ratio:auto;position:relative;overflow:hidden;background:#071d51 url('/Word_Dome_Exact_Hall.png') center center/cover no-repeat}
.wd-gate-logo{position:absolute;left:50%;top:11%;transform:translateX(-50%);width:69%;height:28%;object-fit:contain;filter:drop-shadow(0 4px 8px #00112c99);pointer-events:none}
.wd-gate-presented{position:absolute;left:20%;width:60%;top:40%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;color:#fff1b1;text-shadow:0 2px 2px #04132e,0 0 6px #000;pointer-events:none}
.wd-gate-presented span{font-weight:900;font-size:clamp(12px,1.5vw,21px);letter-spacing:.08em}
.wd-gate-presented strong{font-weight:1000;font-size:clamp(17px,2.3vw,32px);line-height:1.15;color:#ffe28a;-webkit-text-stroke:.5px #13295a}
.wd-gate-hit{position:absolute;top:54%;height:9.2%;margin:0;padding:0;border:3px solid #f4b83a!important;border-radius:15px;background:linear-gradient(180deg,#10449d,#05215c 70%,#03133e)!important;box-shadow:inset 0 2px 1px #fff5a9,0 5px 0 #a96610,0 0 16px #ffc04b!important;animation:none!important;color:#fff0b0!important;font-weight:900;font-size:clamp(14px,2vw,28px);text-shadow:0 2px 2px #000;cursor:pointer}
.wd-gate-signin{left:28%;width:20.5%}
.wd-gate-register{left:51.3%;width:21.5%}
.wd-gate-hit:hover{background:linear-gradient(180deg,#2264c1,#103b85)!important;box-shadow:inset 0 2px 1px #fff5a9,0 5px 0 #a96610,0 0 24px #ffd65e!important}
.wd-gate-hit:focus-visible{outline:3px solid #fff2a5;outline-offset:3px}
.wd-gate-copyright{position:absolute;bottom:2%;left:2%;width:auto;max-width:96%;text-align:left;color:#ffe29a;font-weight:800;font-size:clamp(6.75px,.9375vw,12.75px);text-shadow:0 2px 4px #00122b}
body.wd-gate main> :not(#accountDialog){display:none!important}
body.wd-gate #accountDialog:not([hidden]){display:block!important;position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,460px);max-height:90dvh;overflow:auto;margin:0!important;box-shadow:0 0 0 100vmax #000b,0 0 30px #ffd86d88}
body.wd-gate #accountDialog[hidden]{display:none!important}
@media(max-width:650px){.wd-gate-art{width:100vw;height:100dvh}.wd-gate-hit{border-radius:8px!important}.wd-gate-presented{top:40%}}

/* Password eye inside account sign-in / registration form. */
.wd-password-wrap{display:block;position:relative;width:100%}
.wd-password-wrap #accountPassword{width:calc(100% - 10px);padding-right:53px}
.wd-password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0;padding:6px 9px;min-width:37px;border:0;border-radius:6px;background:transparent!important;box-shadow:none!important;animation:none!important;color:#ffffff;font-size:20px;line-height:1;cursor:pointer}
.wd-password-toggle:hover{background:#ffffff24!important}
.wd-password-toggle:focus-visible{outline:2px solid #ffe187;outline-offset:1px}

/* Start-page composition: crown finial meets the dome's central sunburst. */
.wd-gate-logo{top:2.5%;height:30.6%;width:62.1%}
/* Metallic production credit inspired by the supplied PRMAN logo sample. */
.wd-gate-presented{top:37%;gap:0;width:64%;left:18%;text-shadow:none}
.wd-gate-presented span{display:flex;align-items:center;justify-content:center;gap:.65em;color:#f9edc7;font-size:clamp(11px,1.22vw,18px);font-weight:800;letter-spacing:.23em;text-shadow:0 2px 3px #031329,0 0 8px #001a4e}
.wd-gate-presented span::before,.wd-gate-presented span::after{content:"";display:block;width:clamp(24px,5vw,75px);height:2px;background:linear-gradient(90deg,transparent,#fff0b5,#ed9e20);box-shadow:0 0 5px #ffd665}
.wd-gate-presented span::after{transform:scaleX(-1)}
.wd-gate-presented strong{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2.75vw,40px);font-weight:1000;letter-spacing:-.035em;line-height:1.1;background:linear-gradient(180deg,#fff7c4 0%,#fff9e2 15%,#e4b35b 37%,#fff5bb 48%,#a76416 72%,#f3bd53 88%,#fff4bf 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #082c79;filter:drop-shadow(0 2px 0 #061b50) drop-shadow(0 3px 1px #06163a) drop-shadow(0 0 5px #ffce64)}

/* Match the original PRMAN PRODUCTIONS artwork: bold block capitals,
   bright beveled gold faces, royal-blue edging and luminous gold rules. */
.wd-gate-presented{top:37%;gap:0}
.wd-gate-presented span{font-family:Arial,Helvetica,sans-serif;font-size:clamp(12px,1.3vw,19px);font-weight:900;letter-spacing:.22em;color:#fff5dc;-webkit-text-stroke:.35px #172447;text-shadow:0 2px 2px #041338,0 0 8px #ffcd64}
.wd-gate-presented span::before,.wd-gate-presented span::after{height:3px;background:linear-gradient(90deg,transparent 0%,#f5a824 25%,#fff4a9 75%,#f4a221 100%);box-shadow:0 0 6px #ffbd37,0 0 11px #ffe28a}
.wd-gate-presented strong{
 font-family:Impact,'Arial Black',Arial,Helvetica,sans-serif;
 font-stretch:condensed;font-weight:1000;font-size:clamp(20px,2.7vw,39px);
 letter-spacing:-.04em;line-height:1.13;
 background:linear-gradient(180deg,#fffce4 0%,#fff3a6 22%,#ffc34b 42%,#fff8cb 48%,#e7a12e 68%,#fff0a2 85%,#d27a18 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:1.4px #003c99;
 filter:drop-shadow(0 2px 0 #001744) drop-shadow(0 3px 1px #001a57) drop-shadow(0 0 5px #ffcc5c);
}

/* Official PRMAN Productions image replaces the former styled text credit. */
.wd-gate-production-logo{
 position:absolute;top:28%;left:50%;transform:translateX(-50%);
 width:58.32%;height:20.088%;object-fit:contain;object-position:center;
 pointer-events:none;
}

/* Sign-in dialog: swap ornamental frame only, preserving all form geometry. */
body.wd-gate #accountDialog:not([hidden]){
 background:#081e4c!important;
 border-color:transparent!important;
 isolation:isolate;
}
body.wd-gate #accountDialog:not([hidden])::before{
 content:"";position:absolute;inset:0;
 background:url('/Ornate%20Golden%20Sapphire%20Fantasy%20Frame.png?v=1') center/100% 100% no-repeat;
 pointer-events:none;z-index:-1;
}

/* Keep sign-in inputs comfortably inside the ornate frame's inner columns. */
body.wd-gate #accountDialog:not([hidden]) #accountForm > label{
 display:block;
 width:calc(100% - 56px)!important;
 margin-left:auto!important;
 margin-right:auto!important;
 box-sizing:border-box!important;
}
body.wd-gate #accountDialog:not([hidden]) #accountEmail,
body.wd-gate #accountDialog:not([hidden]) #accountPassword,
body.wd-gate #accountDialog:not([hidden]) #accountName{
 display:block;
 width:100%!important;
 max-width:100%!important;
 min-width:0!important;
 box-sizing:border-box!important;
}
body.wd-gate #accountDialog:not([hidden]) .wd-password-wrap{
 width:100%!important;
}

/* Account dialog: 20% shorter input fields, centered in their existing frame. */
body.wd-gate #accountDialog:not([hidden]) #accountForm > label{
 width:calc((100% - 56px) * .8)!important;
 margin-inline:auto!important;
}
body.wd-gate #accountDialog:not([hidden]) #accountForm > div:has(#accountSubmit){
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 gap:14px!important;
 width:100%!important;
 margin:10px auto 0!important;
}

/* Center the Sign In heading at the top of the ornate account frame. */
body.wd-gate #accountDialog:not([hidden]) #accountDialogTitle{
 width:100%!important;
 text-align:center!important;
 margin-left:auto!important;
 margin-right:auto!important;
}

/* Make the password visibility control readable on light input backgrounds. */
body.wd-gate #accountDialog:not([hidden]) .wd-password-wrap{
 position:relative!important;
}
body.wd-gate #accountDialog:not([hidden]) .wd-password-toggle{
 position:absolute!important;
 right:8px!important;
 top:50%!important;
 transform:translateY(-50%)!important;
 z-index:5!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 color:#102d66!important;
 opacity:1!important;
 visibility:visible!important;
 text-shadow:none!important;
}
body.wd-gate #accountDialog:not([hidden]) #accountPassword{
 padding-right:52px!important;
}

/* Registration heading: ten percent smaller and centered under the arch. */
body.wd-gate #accountDialog:not([hidden]) #accountDialogTitle{
 font-size:90%!important;
 text-align:center!important;
 width:100%!important;
 margin-inline:auto!important;
}

/* Login heading and persistent-session preference. */
body.wd-gate #accountDialog:not([hidden]) #accountDialogTitle{font-size:135%!important;line-height:1.25!important}
body.wd-gate #accountDialog:not([hidden]) #accountStayLabel:not([hidden]){display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;width:auto!important;margin:9px auto 5px!important;font-size:14px!important;font-weight:600!important;color:#fff!important}
body.wd-gate #accountDialog:not([hidden]) #accountStaySignedIn{width:18px!important;height:18px!important;margin:0!important;accent-color:#ffc342}
body.wd-gate #accountDialog:not([hidden]) #accountStayLabel[hidden]{display:none!important}

/* Explicitly respect the login-only hidden player-name field: earlier label
   display rules otherwise override the browser's hidden attribute. */
body.wd-gate #accountDialog:not([hidden]) #accountNameLabel[hidden]{display:none!important}
/* Double the login title's original 20px size; registration title unchanged. */
body.wd-gate #accountDialog[data-mode="login"]:not([hidden]) #accountDialogTitle{font-size:40px!important;line-height:1.15!important;text-align:center!important;margin:0 auto 16px!important}

/* Sign-in title: 20% smaller than the approved 40px treatment. */
body.wd-gate #accountDialog[data-mode="login"]:not([hidden]) #accountDialogTitle{font-size:32px!important}

/* Clear the ornate upper arch without moving the frame or form fields. */
body.wd-gate #accountDialog[data-mode="login"]:not([hidden]) #accountDialogTitle{position:relative!important;top:12px!important;margin-bottom:28px!important}
