@import url('../assets/recreated-v2/asset-layout.css');
@font-face{font-family:Barlow;src:url('../assets/fonts/barlow-condensed-black.ttf') format('truetype');font-weight:900;font-display:swap}
*{box-sizing:border-box}body{margin:0;min-width:320px;color:#fff2d2;font-family:Arial,sans-serif;background:#1681df url('../assets/recreated-v3-smooth/world-background-smooth-v1.png') center/cover fixed}body::before{content:'';position:fixed;inset:0;background:linear-gradient(#05235318,#041a5570);z-index:-1}a{color:inherit;text-underline-offset:4px}button,input,select{font:inherit}a,button{touch-action:manipulation}button{cursor:pointer}:focus-visible{outline:3px solid #78e5ff;outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.portal-header{max-width:1220px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between}.portal-logo{position:relative;display:block;width:240px;aspect-ratio:2034/543}.portal-logo img{position:absolute;width:104.08%;left:-2.065%;top:-20.994%}.back-link{font-size:14px;font-weight:bold;text-decoration:none;background:#071d4ddd;border:1px solid #efba59;padding:14px 20px;border-radius:24px}.preview-notice{width:fit-content;max-width:calc(100% - 32px);margin:0 auto 20px;padding:9px 15px;border-radius:20px;background:#fff0c9;color:#49331b;font-size:12px;line-height:1.4;text-align:center}.portal-layout{display:grid;grid-template-columns:1fr 450px;align-items:center;gap:64px;max-width:1140px;margin:20px auto 54px;padding:0 28px}.portal-story{position:relative;min-height:580px}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:bold;color:#ffd565;margin:0 0 14px}.portal-story h2{font:900 78px/.97 Barlow,sans-serif;margin:12px 0;color:#ffe576;text-shadow:0 4px #7b2a07,3px 0 #082955,-3px 0 #082955}.portal-story h2 em{font-style:normal;color:#fff3d8}.portal-story>p:last-of-type{font-size:16px;line-height:1.7;text-shadow:0 1px 4px #061b43}.portal-character{position:absolute;left:4%;bottom:-20px;width:420px;aspect-ratio:1.22;pointer-events:none}.portal-character img{position:absolute;width:304.554%;left:-24.954%;top:-72.889%;max-width:none}.portal-panel,dialog{position:relative;isolation:isolate;border:3px solid #ffc968;border-radius:24px;padding:34px;background:radial-gradient(ellipse at top,#184d8a,#081b42 85%);box-shadow:inset 0 0 0 3px #b17b24,inset 0 0 0 6px #173269,0 18px 44px #05133255}.portal-panel::before{content:'◆';position:absolute;left:calc(50% - 17px);top:-23px;font-size:36px;color:#52d7ff;text-shadow:2px 0 #ffd66f,-2px 0 #ffd66f,0 2px #ffd66f,0 -2px #ffd66f}.portal-panel h1,.portal-panel h2,dialog h2{font:900 38px/1 Barlow,sans-serif;color:#ffdf8a;margin:10px 0 12px}.panel-intro{font-size:14px;line-height:1.6;color:#c6dbf1;margin:0 0 26px}.auth-switch{display:flex;gap:8px;padding-bottom:26px}.auth-switch a{flex:1;display:flex;justify-content:center;align-items:center;min-height:44px;border:1px solid #6786a9;border-radius:12px;text-decoration:none;font-weight:bold;font-size:14px}.auth-switch a[aria-current]{background:linear-gradient(#fff0b4,#f3bc4a);border-color:#ffdb78;color:#532701;box-shadow:0 3px #8b420b}.portal-field{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;font-size:14px;font-weight:bold}.portal-field input,.portal-field select{width:100%;min-height:52px;padding:13px 15px;border:2px solid #b89458;border-radius:10px;background:#fff4dc;color:#1a304c;font-size:16px;font-weight:normal;outline-offset:3px}.field-heading{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:bold;margin-bottom:10px;gap:12px}.field-heading a{font-weight:normal;color:#ffd47c;font-size:12px;min-height:28px;display:flex;align-items:center}.password-field{position:relative}.password-field input{padding-right:85px}.show-password{position:absolute;right:5px;top:4px;min-height:44px;padding:0 10px;border:0;background:none;color:#604515;font-size:12px;font-weight:bold}.portal-action{display:block;position:relative;width:100%;aspect-ratio:1854/378;min-height:56px;margin:28px 0 20px;padding:0;border:0;background:none;color:#fff1ce;text-shadow:0 2px #692800;font:900 clamp(20px,4vw,27px)/1 Barlow,sans-serif;text-transform:uppercase;overflow:visible}.portal-action>span{position:absolute;inset:12% 15%;display:flex;align-items:center;justify-content:center;text-align:center}.portal-action:hover{filter:brightness(1.1)}.demo-link{display:block;width:fit-content;padding:10px 0;color:#ffdf8b;font-size:13px;line-height:1.5;text-decoration:none}.terms{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.6}.terms input{width:22px;height:22px;accent-color:#ffc959}.panel-note{font-size:12px;line-height:1.6;color:#9db8d4}.form-feedback:empty{display:none}.form-feedback{padding:14px;border:1px solid #82b884;border-radius:10px;background:#0d403e;color:#deffe0;font-size:14px;line-height:1.5}.portal-footer{display:flex;justify-content:center;align-items:center;gap:30px;background:#081b42e6;border-top:1px solid #d7ac54;padding:20px;font-size:12px}.portal-footer a{padding:8px}.portal-wide{max-width:1120px;margin:30px auto 64px;padding:0 28px}.world-heading{text-align:center;margin:35px 0 46px;text-shadow:0 2px 5px #0a2957}.world-heading h1{font:900 56px/1 Barlow,sans-serif;color:#ffe9a4;margin:12px}.world-heading>p:last-child{font-size:16px}.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.server-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.server-number{color:#ffdf7c;font:900 28px/1 Barlow,sans-serif}.online-chip{font-size:11px;color:#c7ffad;border:1px solid #51744c;background:#213d32;padding:7px 9px;border-radius:20px}.server-card h2{font-size:32px}.server-island{aspect-ratio:4/3;border:1px solid #d8ad51;border-radius:12px;overflow:hidden;margin:22px 0}.server-island img{width:100%;height:100%;object-fit:cover}.server-copy{color:#c6dbf1;line-height:1.6;font-size:14px}.character-summary{padding:16px;background:#06173580;border:1px solid #42618b;border-radius:12px;display:grid;gap:7px;font-size:12px}.character-summary strong{font-size:18px;color:#ffe49a}.character-summary small{color:#a9c1db}.text-button{display:block;margin:auto;border:0;background:none;min-height:44px;color:#ffd885;font-size:13px}.ranking-panel h2{font-size:36px;margin-bottom:28px}.ranking-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #6580a0;font-size:14px;font-weight:bold}.ranking-filter span{color:#ffe29e}.ranking-filter small{color:#acc6e0;font-size:11px;font-weight:normal;text-align:right}.ranking-table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}th{color:#97b3d0;font-weight:normal;font-size:11px;padding:16px 7px}td{padding:18px 7px;border-top:1px solid #345376}td:first-child{color:#ffdb71;font-weight:bold}td:nth-child(2){font-weight:bold}td:last-child{text-align:right;color:#ffd872}th:last-child{text-align:right}.ranking-status{font-size:12px;color:#a9c3df;margin:22px 0}dialog{color:#fff1d0;width:min(440px,calc(100% - 28px));max-height:calc(100svh - 40px);overflow-y:auto}dialog::backdrop{background:#001335bc;backdrop-filter:blur(4px)}.dialog-close{position:absolute;top:10px;right:10px;min-width:44px;min-height:44px;font-size:28px;border:0;background:none;color:#ffe29b}dialog>p{font-size:14px;line-height:1.7}dialog code{font-size:12px;word-break:break-word}
@media(max-width:850px){.portal-layout{grid-template-columns:1fr;max-width:500px;margin-top:28px;padding:0 18px}.portal-story{display:none}.portal-header{padding:18px 20px}.portal-logo{width:200px}.world-grid{grid-template-columns:1fr;max-width:560px;margin:auto}.portal-wide{padding:0 18px}.world-heading h1{font-size:44px}.portal-panel{padding:30px}.back-link{padding:12px;font-size:12px}.world-heading>p:last-child{line-height:1.5}}@media(max-width:450px){body{background-image:url('../assets/mobile-v3/world-portrait.webp');background-attachment:scroll}.portal-header{padding:22px 18px}.portal-logo{width:180px}.back-link{font-size:11px;padding:12px 10px}.portal-panel{padding:28px 22px;border-radius:20px}.portal-panel h1{font-size:34px}.portal-footer{gap:20px}.world-heading h1{font-size:42px}.online-chip{font-size:10px}.portal-action{font-size:24px}}
/* Full transparent button art uses the same canvas offsets as the landing. */
body{overflow-x:clip}.asset-layer{isolation:isolate}.portal-action>img{position:absolute;z-index:-1;top:var(--image-top);left:var(--image-left);width:var(--image-width);max-width:none;height:auto;pointer-events:none}

/* Login mock: bright fantasy portal, aligned with the DDTank landing artwork. */
body.page-login {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: #fff3d4;
  background: #176ec0 url('../assets/global/01-world-background-soft-v1.png') center 42% / cover fixed no-repeat;
}
.page-login::before {
  z-index: 0;
  background:
    radial-gradient(ellipse at 72% 52%, rgba(255,194,77,.20), transparent 43%),
    linear-gradient(180deg, rgba(4,32,79,.14) 0%, rgba(5,32,77,.42) 54%, rgba(4,20,52,.7) 100%);
}
.page-login > * { position: relative; z-index: 1; }
.login-announcement {
  height: 38px;
  flex: 0 0 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ffc85b;
  background: linear-gradient(90deg, #3a1d0f, #5a2a11 50%, #3a1d0f);
  box-shadow: 0 3px 12px rgba(27,12,5,.38);
  color: #fff1d1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
}
.login-announcement-track { display: flex; width: max-content; min-width: 200%; animation: login-marquee 34s linear infinite; }
.login-announcement-track span { display: block; padding: 0 36px; white-space: nowrap; }
.login-announcement-track b { color: #ffd34e; }
.login-announcement-track i { color: #ffe898; font-style: normal; }
@keyframes login-marquee { to { transform: translateX(-33.333%); } }
.login-header { width: min(100%, 1340px); min-height: 94px; padding: 14px 32px; }
.login-header .portal-logo { width: clamp(172px, 17vw, 250px); filter: drop-shadow(0 7px 14px rgba(78,30,5,.34)); }
.login-header .back-link {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 2px solid #f7d46a;
  border-radius: 15px;
  background: linear-gradient(#87501d, #54270f);
  box-shadow: inset 0 2px rgba(255,255,255,.3), 0 4px 0 #35190c, 0 8px 16px rgba(0,0,0,.2);
  color: #fff0c3;
  font-weight: 900;
  text-transform: uppercase;
}
.login-layout {
  width: min(100%, 1240px);
  flex: 1 0 auto;
  grid-template-columns: minmax(0,1fr) minmax(410px, 480px);
  align-items: center;
  gap: clamp(36px, 6vw, 92px);
  margin: 0 auto;
  padding: 20px 30px 34px;
}
.login-story { min-height: 550px; padding-top: 24px; }
.login-story .eyebrow { color: #ffe474; text-shadow: 0 2px 3px #2b180d; }
.login-story h2 { font-size: clamp(60px, 6.5vw, 92px); color: #ffdf53; text-shadow: 0 5px 0 #9b4210, 0 8px 0 #401b10, 0 12px 14px rgba(0,0,0,.62); }
.login-story h2 em { color: #fff0cb; }
.login-story > p:last-of-type { max-width: 480px; font-size: 17px; line-height: 1.65; font-weight: 700; color: #fff7e5; text-shadow: 0 2px 6px #092754; }
.login-story .portal-character { left: -4%; bottom: -6px; width: min(34vw, 430px); filter: drop-shadow(0 14px 13px rgba(4,20,49,.42)); }
.login-world-stamp {
  position: absolute;
  left: 0;
  bottom: 8px;
  padding: 11px 18px;
  border: 2px solid #e9bd58;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(54,28,13,.92), rgba(101,52,17,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 4px 10px #06183b88;
  color: #ffe69a;
  font: 900 12px/1 Barlow, sans-serif;
  letter-spacing: .14em;
}
.login-world-stamp span { padding: 0 6px; color: #fff5d2; }
.login-panel {
  width: 100%;
  border: 4px solid #8c4716;
  border-radius: 19px;
  padding: 34px 34px 22px;
  background: linear-gradient(145deg, #174b8d, #092758 58%, #071b45);
  box-shadow: inset 0 0 0 2px #ffdf7b, inset 0 0 0 6px #173a72, 0 0 0 2px #f5c753, 0 18px 40px rgba(3,17,47,.54);
}
.login-panel::before { content: '★'; top: -28px; left: calc(50% - 22px); z-index: 2; display: grid; width: 44px; height: 44px; place-items: center; border: 3px solid #ffe58c; border-radius: 12px 12px 19px 19px; background: linear-gradient(#36c5ff,#0757b5); color: #fff1ac; font-size: 23px; transform: rotate(45deg); text-shadow: 0 2px 2px #633508; box-shadow: 0 3px 0 #57300d; }
.login-panel .auth-switch { gap: 10px; padding-bottom: 25px; }
.login-panel .auth-switch a { min-height: 50px; border: 2px solid #d5aa4e; border-radius: 10px; background: linear-gradient(#10386f,#092350); color: #fce8a3; box-shadow: inset 0 1px #ffffff2c, 0 3px 0 #071634; font: 900 16px/1 Barlow, sans-serif; text-transform: uppercase; transition: transform .18s, filter .18s, background .18s; }
.login-panel .auth-switch a[aria-current] { border-color: #fff0a1; background: linear-gradient(#fff0a5,#f2bd48 58%,#cf7416); color: #4b250b; box-shadow: inset 0 2px #fff9d8, 0 3px 0 #733409, 0 0 15px #f8ba4570; }
.login-panel .auth-switch a:hover { filter: brightness(1.1); transform: translateY(-2px); }
.login-panel .eyebrow { margin-bottom: 8px; color: #ffe073; }
.login-panel h1 { margin: 8px 0 10px; color: #ffe18a; font-size: clamp(32px,3vw,40px); text-shadow: 0 3px 0 #672b0b; }
.login-panel .panel-intro { margin-bottom: 23px; color: #d6e9ff; font-size: 14px; }
.login-panel .portal-field { gap: 8px; margin-bottom: 17px; color: #fff0c5; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.login-panel .portal-field input { min-height: 54px; border: 2px solid #dda94b; border-radius: 9px; background: linear-gradient(#fff5d9,#f4dfb0); box-shadow: inset 0 2px 5px #88653436, 0 2px 0 #071938; color: #27334d; font-size: 15px; }
.login-panel .portal-field input::placeholder { color: #7f755e; opacity: 1; }
.login-panel .portal-field input:focus { border-color: #ffe68d; outline: 3px solid #4dcaff88; }
.login-panel .field-heading { margin: 0 0 8px; color: #fff0c5; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.login-panel .field-heading a { color: #ffdb70; font-weight: 800; }
.login-panel .password-field input { padding-right: 82px; }
.login-panel .show-password { top: 4px; right: 7px; min-height: 44px; border-left: 1px solid #c4a46a; color: #684113; }
.login-panel .portal-action { margin: 22px 0 14px; min-height: 58px; font-size: 25px; filter: drop-shadow(0 7px 5px rgba(24,12,4,.3)); transition: filter .18s, transform .18s; }
.login-panel .portal-action:hover { filter: brightness(1.1) drop-shadow(0 10px 7px rgba(24,12,4,.4)); transform: translateY(-2px); }
.login-panel .portal-action > span { text-shadow: 0 2px #853004, 0 0 4px #853004; }
.login-panel .demo-link { margin-top: 4px; color: #ffe39a; font-weight: 700; }
.login-panel .demo-link:hover { color: #fff8d8; }
.login-panel-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #d5b05e55; color: #aac9ec; font-size: 11px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #79e78a; box-shadow: 0 0 8px #79e78a; }
.login-footer { margin-top: auto; min-height: 62px; border-top: 2px solid #c3913e; background: linear-gradient(90deg,#30180eeF,#09214fea 50%,#30180eef); color: #e8d7af; }
.login-footer a { text-decoration: none; font-weight: 700; }
.login-footer a:hover { color: #ffe276; }
@media(max-width:850px) {
  body.page-login { background-attachment: scroll; }
  .login-header { min-height: 78px; padding: 12px 20px; }
  .login-layout { display: flex; justify-content: center; margin: 0 auto; padding: 20px 18px 32px; }
  .login-story { display: none; }
  .login-panel { max-width: 480px; }
}
@media(max-width:450px) {
  .login-announcement { height: 34px; flex-basis: 34px; font-size: 11px; }
  .login-announcement-track span { padding: 0 22px; }
  .login-header { padding: 15px 16px; }
  .login-header .portal-logo { width: 155px; }
  .login-header .back-link { padding: 10px 12px; font-size: 10px; }
  .login-layout { padding: 12px 12px 24px; }
  .login-panel { padding: 30px 22px 18px; }
  .login-panel .auth-switch a { min-height: 46px; font-size: 14px; }
  .login-panel h1 { font-size: 31px; }
  .login-panel .portal-action { font-size: 22px; }
  .login-footer { gap: 10px; padding: 12px 8px; font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .login-announcement-track { animation:none; } }

/* Centered approval layout: keep the familiar login flow and frame it with the game world. */
.page-login .login-announcement { position:relative; z-index:3; background:linear-gradient(90deg,#3a1d0f,#5a2a11 50%,#3a1d0f) !important; color:#fff1d1; }
.page-login .login-header { position:relative; width:100%; max-width:1320px; min-height:112px; justify-content:center; }
.page-login .login-header .portal-logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.page-login .login-header .back-link { position:absolute; right:32px; top:50%; transform:translateY(-50%); }
.page-login .login-layout { position:relative; display:flex; justify-content:center; align-items:center; min-height:0; width:100%; max-width:1320px; margin:0 auto; padding:6px 24px 38px; }
.page-login .login-story { position:absolute; left:max(18px,calc(50% - 690px)); top:50%; width:390px; height:590px; min-height:0; padding:0; transform:translateY(-48%); pointer-events:none; }
.page-login .login-story > .eyebrow,
.page-login .login-story > h2,
.page-login .login-story > p:last-of-type,
.page-login .login-world-stamp { display:none; }
.page-login .login-story .portal-character { left:0; bottom:0; width:min(29vw,390px); filter:drop-shadow(0 14px 13px rgba(4,20,49,.42)); }
.page-login .login-panel { z-index:2; width:min(100%,500px); margin:12px auto 18px; }
@media(max-width:850px) {
  .page-login .login-header { min-height:100px; }
  .page-login .login-header .back-link { right:20px; }
  .page-login .login-story { display:none; }
  .page-login .login-layout { min-height:0; padding:0 18px 26px; }
  .page-login .login-panel { margin:6px auto 22px; }
}
@media(max-width:450px) {
  .page-login .login-header { min-height:86px; }
  .page-login .login-header .portal-logo { left:44%; }
  .page-login .login-header .back-link { right:12px; }
}