/* Sea of Wrath V4: exact user-approved 1661x947 raster, only functional overlays.
 * Scoped to login route. No source artwork or game UI CSS is altered.
 */
html:has(body.sow-v4){background:#080b11}
body.sow-v4{
  margin:0!important;padding:0!important;min-height:100dvh!important;
  background:#080b11!important;overflow-x:hidden;color:#f0d9aa;
}
.sow-login-shell{box-sizing:border-box;min-height:100vh;min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sow-login-stage{
  box-sizing:border-box;position:relative;flex:none;isolation:isolate;
  width:min(100vw,calc(100dvh * 1661 / 947));
  aspect-ratio:1661/947;container-type:inline-size;
  background:#0b0d11 url('/assets/sea-of-wrath-login-v4-lossless.webp') center center / 100% 100% no-repeat;
}
.sow-visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;
}
.sow-login-form{position:absolute;inset:0;z-index:1;pointer-events:none}
.sow-login-form>*:not(input[type=hidden]){pointer-events:auto;box-sizing:border-box}
.sow-v4-field{
  position:absolute;z-index:2;border:0!important;outline:0;margin:0!important;padding:0 .4em!important;
  border-radius:0!important;box-shadow:none!important;
  background:transparent!important;color:transparent!important;caret-color:#ffdf99!important;
  font:500 1.17cqw/1.25 Arial,Helvetica,sans-serif;
  letter-spacing:.005em;
}
.sow-v4-field:focus,
.sow-v4-field.sow-has-value,
.sow-v4-field:-webkit-autofill{
  background:#1b110b!important;color:#fbe1ab!important;
  -webkit-text-fill-color:#fbe1ab!important;outline:1px solid rgba(213,166,85,.22)!important;
}
.sow-v4-field::selection{color:#170e08;background:#d7b16b}
.sow-v4-username{left:39.6%;top:38.65%;width:23.3%;height:4.45%}
.sow-v4-password{left:39.6%;top:45.85%;width:20.4%;height:4.45%}
.sow-v4-eye,.sow-v4-forgot,.sow-v4-submit,.sow-v4-remember-label{
 position:absolute;z-index:3;border:0!important;margin:0!important;box-shadow:none!important;
 background:transparent!important;color:transparent!important;font-size:0;cursor:pointer;border-radius:0!important
}
.sow-v4-eye{left:60.2%;top:45.1%;width:3.25%;height:5.6%}
.sow-v4-eye[aria-pressed=true]:after{
 content:"";position:absolute;width:64%;height:2px;background:#eac276;left:18%;top:49%;
 transform:rotate(-32deg);box-shadow:0 0 2px #000
}
.sow-v4-remember{
 position:absolute;left:34.9%;top:53.3%;width:1.95%;height:3.7%;
 z-index:4;cursor:pointer;border:0;appearance:none;margin:0!important;box-shadow:none;
 background:transparent;
}
.sow-v4-remember:not(:checked){
 background:#20130b;border:1px solid #d29c47;box-shadow:inset 0 0 0 2px #3d260f
}
.sow-v4-remember-label{left:37.25%;top:53.25%;width:14%;height:4.1%}
.sow-v4-forgot{left:54.85%;top:53.15%;width:9%;height:4.3%}
.sow-v4-submit{left:38.1%;top:59.1%;width:23.5%;height:6.8%;cursor:pointer}
.sow-v4-submit:hover{box-shadow:inset 0 0 15px rgba(255,220,128,.15)!important}
.sow-v4-submit:active{filter:brightness(.8)}
.sow-v4-eye:focus-visible,.sow-v4-forgot:focus-visible,.sow-v4-submit:focus-visible,
.sow-v4-remember:focus-visible,.sow-v4-remember-label:focus-visible{
 outline:2px solid #ffe4a2!important;outline-offset:2px
}
.sow-login-error{
 position:absolute;z-index:8;top:75.6%;left:33%;width:34%;padding:.48em .7em;
 border:1px solid #b46e49;border-radius:4px;background:rgba(34,11,8,.96);
 color:#ffddb9;text-align:center;font:600 1.02cqw/1.35 Arial,sans-serif;
 box-shadow:0 3px 12px #050101
}
.sow-reset-dialog{
 width:min(420px,calc(100vw - 32px));max-width:calc(100vw - 32px);box-sizing:border-box;
 padding:24px 26px;color:#f6dfb3;border:3px double #b78643;border-radius:8px;
 background:linear-gradient(130deg,#24160c,#160f09);box-shadow:0 15px 35px #000;
 font-family:Georgia,serif
}
.sow-reset-dialog::backdrop{background:rgba(0,0,0,.72)}
.sow-reset-dialog h2{margin:0 0 12px;color:#f7d38a;font-size:25px}
.sow-reset-dialog p{font:15px/1.6 Arial,sans-serif;color:#e1ccac}
.sow-reset-close{display:block;margin:20px auto 0;padding:10px 32px;cursor:pointer;color:#f9e1ab;
 background:linear-gradient(#982d1d,#51100b);border:2px solid #daa04a;border-radius:5px;font-weight:700}
@media(max-width:850px){
 .sow-login-stage{width:max(900px,100vw);max-width:none}
 .sow-v4-field{font-size:max(13px,1.17cqw)}
 .sow-login-error{font-size:max(12px,1.02cqw)}
}
@media(prefers-reduced-motion:reduce){.sow-v4-submit{transition:none}}

/* SEA OF WRATH — V4R1 input overlay repair.
   Keep the user's approved 1661x947 background image unchanged. Its baked-in
   placeholders are covered only INSIDE the existing framed input recesses;
   native HTML placeholders and saved login values replace those pixels.
   No changes to gameplay, lobby, login backend or security contracts.
*/
body.sow-v4 .sow-login-stage .sow-v4-field {
  position: absolute !important;
  display:block !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 .43em !important;
  border:0 !important;
  border-radius:2px !important;
  outline:0 !important;
  text-indent:0 !important;
  transform:none !important;
  opacity:1 !important;
  transition:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  color:#f5d6a1 !important;
  -webkit-text-fill-color:#f5d6a1 !important;
  caret-color:#f5d6a1 !important;
  background:#1b110c !important;
  background-color:#1b110c !important;
  background-image:linear-gradient(90deg,#1b110c 0%,#1c110b 49%,#180e09 100%) !important;
  box-shadow:none !important;
  font:500 1.18cqw/1.2 Arial,Helvetica,sans-serif !important;
  letter-spacing:0 !important;
}
/* Move real inputs INSIDE the image's gold rim; preserve icon and eye. */
body.sow-v4 .sow-login-stage .sow-v4-username {
  left:39.75% !important;
  top:40.0% !important;
  width:22.65% !important;
  height:3.55% !important;
}
body.sow-v4 .sow-login-stage .sow-v4-password {
  left:39.75% !important;
  top:47.45% !important;
  width:20.7% !important;
  height:3.55% !important;
}
body.sow-v4 .sow-login-stage .sow-v4-field::placeholder {
  color:#a99370 !important;
  -webkit-text-fill-color:#a99370 !important;
  opacity:1 !important;
}
/* Focus stays fixed: no width, padding, height, border or transform changes. */
body.sow-v4 .sow-login-stage .sow-v4-field:focus {
  outline:1px solid rgba(233,189,107,.46) !important;
  outline-offset:-1px !important;
  background:#1b110c !important;
  background-image:linear-gradient(90deg,#1b110c,#1c110b 49%,#180e09) !important;
  box-shadow:none !important;
}
/* Chrome autofill must not draw a blue/yellow rectangle over the pirate UI. */
body.sow-v4 .sow-login-stage .sow-v4-field:-webkit-autofill,
body.sow-v4 .sow-login-stage .sow-v4-field:-webkit-autofill:hover,
body.sow-v4 .sow-login-stage .sow-v4-field:-webkit-autofill:focus,
body.sow-v4 .sow-login-stage .sow-v4-field:autofill {
  color:#f5d6a1 !important;
  -webkit-text-fill-color:#f5d6a1 !important;
  caret-color:#f5d6a1 !important;
  -webkit-box-shadow:0 0 0 1000px #1b110c inset !important;
  box-shadow:0 0 0 1000px #1b110c inset !important;
  background-color:#1b110c !important;
  border:0 !important;
  transition:background-color 600000s 0s !important;
}
@media(max-width:850px) {
  body.sow-v4 .sow-login-stage .sow-v4-field {
    font-size:max(14px,1.18cqw) !important;
  }
}