:root{color-scheme:light;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#704010;background:#314b2c}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100%;min-height:100dvh;background-color:#8fd05a;background-image:url("/images/ssfight/ui/bitmap/3182_0.hd.jpg");background-repeat:no-repeat;background-position:center center;background-size:cover;background-attachment:scroll}
.login-fit{min-height:100%;min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-stage{position:relative;width:min(760px,100%)}
.login-mates{pointer-events:none}
.login-squirrel,.login-wood{position:absolute;bottom:18px;height:auto;z-index:0}
.login-squirrel{left:0;width:168px}
.login-wood{right:0;width:124px;transform-origin:50% 85%;animation:login-sway 3.1s ease-in-out infinite}
@keyframes login-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.login-brand{display:flex;align-items:center;justify-content:center;gap:8px}
.login-acorn{width:46px;height:auto}
.account-panel{position:relative;z-index:1;width:460px;max-width:100%;margin:36px auto 0;padding:26px 32px;border:4px solid #704010;border-radius:30px;background:linear-gradient(#fffdf2,#f8edcd);box-shadow:0 6px 0 #0003}
.login-back{position:fixed;top:16px;left:16px;z-index:5;display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0;background:none;color:#5a3010;text-shadow:0 1px 0 #fff8dc,1px 0 #fff8dc,-1px 0 #fff8dc,0 -1px #fff8dc;font-size:20px}
.login-back img{width:31px;height:31px;display:block}
h1{margin:0;text-align:center;font-size:40px;color:#8d4d13;text-shadow:1px 2px #ffe79d}
h2{margin:12px 0;text-align:center;font-size:24px}
.account-subtitle{text-align:center;margin:6px 0 20px}
button{font-family:inherit;font-size:18px;font-weight:700;line-height:1.4;cursor:pointer;color:#704010}
label{display:block;font-weight:700;margin:14px 0 7px}
.account-field{position:relative;margin-bottom:20px}
.existing-account{position:absolute;right:2px;top:100%;margin-top:4px;padding:0;border:0;background:none;color:#8d4d13;font:700 12px/1 "Microsoft YaHei",sans-serif;text-decoration:underline}
.password-field{position:relative}
.password-field input{padding-right:46px}
.password-field input.secret-input{-webkit-text-security:disc}
.password-field input.secret-input.is-plain{-webkit-text-security:none}
.password-toggle{position:absolute;top:3px;bottom:3px;right:6px;width:36px;height:auto;margin:0;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;line-height:0}
.password-toggle svg{width:22px;height:22px;fill:none;stroke:#704010;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.password-toggle .eye-shut{display:none}
.password-toggle.is-visible .eye-open{display:none}
.password-toggle.is-visible .eye-shut{display:block}
.remember-password{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin:6px 0 0;font:700 13px/1 "Microsoft YaHei",sans-serif;color:#8d4d13;cursor:pointer}
.remember-password input{width:16px;height:16px;margin:0;padding:0;flex:0 0 16px;accent-color:#8d4d13}
input{width:100%;min-width:0;padding:11px 13px;border:3px solid #704010;border-radius:12px;background:#fffaf0;color:#704010;font:600 18px/1.3 "Microsoft YaHei",sans-serif}
input:focus{outline:none;background:#fff2cb;box-shadow:inset 0 0 0 2px #e6c574}
.account-note{font-size:13px;line-height:1.65;margin:12px 0}
.account-error{color:#ae2513;min-height:22px;font-size:14px;line-height:1.5}
.account-gold{display:block;width:100%;margin-top:18px;padding:12px;border:3px solid #704010;border-radius:24px;background:linear-gradient(#fff7af,#ffd649 45%,#f49a17);box-shadow:inset 0 2px #fff9d7,0 3px #70401055;color:#fffdf0;text-shadow:-1px -1px #704010,1px -1px #704010,-1px 1px #704010,1px 1px #704010;font:900 22px/1.4 "Microsoft YaHei",sans-serif}
button:disabled{opacity:.55;cursor:not-allowed}
button.is-busy,button.is-busy:disabled{cursor:wait}
button:focus-visible{outline:3px solid #b38a45;outline-offset:3px}
button:active:not(:disabled){transform:translateY(2px)}
button.password-toggle:active:not(:disabled){transform:none}
.copy-field{position:relative}
.copy-field input{padding-right:46px}
.copy-field button{position:absolute;top:3px;bottom:3px;right:6px;width:36px;height:auto;margin:0;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;line-height:0}
.copy-field button:active:not(:disabled){transform:none}
.copy-field svg{width:22px;height:22px;fill:none;stroke:#704010;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#created-password{letter-spacing:3px}
#copy-status{min-height:20px;font-size:14px}
[hidden]{display:none!important}
/* mobile-login-orient: portrait phone + short landscape */
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh}
@media(max-width:720px){
  body{
    place-items:start center;
    align-content:start;
    padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    overflow-x:hidden;
    overflow-y:auto;
  }
  .login-stage{width:100%}
  .login-mates{display:flex;justify-content:center;align-items:flex-end;gap:28px;margin-bottom:-12px}
  .login-squirrel,.login-wood{position:static}
  .login-squirrel{width:108px}
  .login-wood{width:84px}
  .account-panel{width:100%;max-width:460px;margin:0 auto;box-sizing:border-box}
  .login-back{top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px))}
  .login-toast-host#ui .toast,.toast{top:max(72px,env(safe-area-inset-top,0px) + 56px);max-width:min(92%,420px);font-size:18px;padding:12px 18px}
}
@media(max-width:480px){
  .login-fit{padding:max(10px,env(safe-area-inset-top,0px)) 10px max(14px,env(safe-area-inset-bottom,0px))}
  .account-panel{padding:18px 16px}
  h1{font-size:30px}
  .login-acorn{width:32px}
  .login-squirrel{width:88px}
  .login-wood{width:68px}
  .account-subtitle{font-size:14px;margin:4px 0 14px}
  /* 16px inputs avoid iOS focus zoom */
  input{font-size:16px;padding:12px}
  .account-gold{font-size:20px;padding:14px;min-height:48px}
  .existing-account{font-size:13px;padding:6px 0}
  .remember-password{font-size:14px}
}
@media(max-width:720px) and (orientation:portrait){
  .login-mates{gap:20px;margin-bottom:-6px}
  .account-note{font-size:12px}
}
/* 桌面壳窗口约 1015×620。登录和注册成功共用这张卡片，收进视口并垂直居中。 */
@media(min-width:721px) and (max-height:720px){
  html,body{height:100%;overflow:hidden}
  .login-fit{padding:8px 16px;place-items:center;align-content:center}
  .login-stage{width:min(720px,100%);display:flex;align-items:center;justify-content:center}
  .login-squirrel,.login-wood{max-height:46vh}
  .login-squirrel{width:128px}
  .login-wood{width:96px}
  .account-panel{width:400px;margin:0;padding:12px 22px 14px;border-radius:22px}
  .login-acorn{width:32px}
  h1{font-size:30px}
  h2{margin:2px 0 4px;font-size:20px}
  .account-subtitle{margin:2px 0 8px;font-size:14px}
  label{margin:6px 0 3px;font-size:14px}
  input{padding:7px 11px;font-size:16px}
  .account-field{margin-bottom:8px}
  .account-note{font-size:12px;line-height:1.35;margin:4px 0}
  .account-error{min-height:0;font-size:13px}
  .account-gold{margin-top:8px;padding:8px 12px;font-size:18px}
  #copy-status{min-height:16px;margin:2px 0 0;font-size:13px}
  #nickname-note{margin:0;font-size:14px;text-align:center}
}
@media(max-height:560px) and (orientation:landscape){
  .login-mates{display:none}
  .login-fit{padding:8px;place-items:center}
  .account-panel{margin:0 auto;padding:14px 18px}
  h1{font-size:28px}
  .account-subtitle{margin:2px 0 10px}
  label{margin:8px 0 4px}
  .account-gold{margin-top:10px;padding:10px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){.login-squirrel,.login-wood{animation:none}}


/* Public UI.toast host on login (kick-toast): same wood-board .toast as game */
.login-toast-host#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.login-toast-host#ui .toast,
.toast {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  min-width: 240px;
  max-width: 78%;
  text-align: center;
  padding: 15px 28px 16px;
  color: #5b3510;
  font: 400 22px/1.45 "Microsoft YaHei","PingFang SC",sans-serif;
  letter-spacing: -1px;
  background: linear-gradient(#fffdf0, #f7edcf);
  border: 5px solid #542201;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 4px #fffceb,
    0 5px 0 rgba(70, 42, 18, .34),
    0 10px 18px rgba(56, 84, 38, .22);
  opacity: 0;
  transition: opacity .28s, transform .28s;
  z-index: 99;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 250, 230, .55);
}
.login-toast-host#ui .toast.show,
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* mobile-login-orient */