/* ===== Stage 2 auth chrome ===== */
.auth-chip{position:fixed;top:max(14px, env(safe-area-inset-top, 0px));right:max(14px, env(safe-area-inset-right, 0px));z-index:40;display:flex;align-items:center;gap:8px}
.auth-login-btn,.auth-user-btn,.auth-primary,.auth-secondary,.auth-danger,.auth-dice{
  font:inherit;cursor:pointer;border:1.5px solid var(--ink,#2a2a2a);background:var(--paper,#f7f1e6);
  color:var(--ink,#2a2a2a);
  border-radius:999px;padding:6px 12px;box-shadow:2px 2px 0 rgba(0,0,0,.12)
}
.auth-user-btn{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px}
.auth-login-btn[hidden],.auth-user-btn[hidden]{display:none!important}
.auth-avatar{width:28px;height:28px;border-radius:50%;border:1px solid #666;object-fit:cover;background:#111}
.auth-modal{position:fixed;inset:0;background:rgba(20,16,12,.45);z-index:150;display:flex;align-items:center;justify-content:center;padding:16px}
.auth-modal[hidden]{display:none!important}
.auth-dialog{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;background:var(--paper,#f7f1e6);color:var(--ink,#222);
  border:2px solid #2a2a2a;border-radius:16px;padding:20px 18px 18px;box-shadow:6px 6px 0 rgba(0,0,0,.18)}
.auth-close{position:absolute;right:10px;top:8px;border:none;background:transparent;font-size:22px;cursor:pointer}
.auth-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.auth-tabs[hidden]{display:none!important}
.auth-tab{border:1px dashed #666;background:transparent;border-radius:999px;padding:4px 10px;cursor:pointer}
.auth-tab.active{border-style:solid;background:#2a2a2a;color:#f7f1e6}
.auth-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.auth-form[hidden],
#authSettingsPanel[hidden],
.auth-tabs[hidden] {
  display: none !important;
}
.auth-form label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.auth-form input[type=text],.auth-form input[type=password],.auth-form input:not([type]){
  border:1.5px solid #444;border-radius:8px;padding:8px 10px;background:#fffdf8;font:inherit}
.auth-check{flex-direction:row!important;align-items:center;gap:8px!important}
.auth-error{color:#b33;background:#ffe8e0;border:1px solid #e8a090;padding:8px 10px;border-radius:8px;font-size:13px}
.auth-nick-row{display:flex;align-items:flex-end;gap:8px}
.auth-nick-field{flex:1;display:flex;flex-direction:column;gap:4px;font-size:13px}
.avatar-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.avatar-preview-btn{
  padding:0;border:none;background:transparent;cursor:pointer;border-radius:50%;
  box-shadow:none;line-height:0;display:inline-flex;
  width:64px;height:64px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;position:relative;z-index:1;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.avatar-preview-btn:focus-visible{outline:2px solid #2a2a2a;outline-offset:3px}
.avatar-preview{width:64px;height:64px;border-radius:50%;border:1.5px solid #666;object-fit:cover;background:#111;pointer-events:none;display:block}
.auth-danger{background:#f6d6d0}
.auth-secondary{margin-top:6px}
@media (max-width:640px){
  .auth-chip{
    top:max(8px, env(safe-area-inset-top, 0px));
    right:max(8px, env(safe-area-inset-right, 0px));
    left:auto;
    max-width:min(72vw, calc(100vw - 7.5rem));
    flex-wrap:wrap;
    justify-content:flex-end;
    align-content:flex-start;
    gap:4px;
    row-gap:4px;
  }
  .auth-login-btn,.auth-user-btn{
    padding:5px 10px;
    font-size:12px;
    min-height:36px;
    box-shadow:1px 1px 0 rgba(0,0,0,.1);
  }
  .auth-user-btn{
    padding:3px 8px 3px 3px;
    max-width:100%;
  }
  .auth-avatar{width:26px;height:26px;flex-shrink:0}
  #authNickname{
    max-width:4.5em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}
@media (max-width:420px){
  .auth-chip{max-width:min(68vw, calc(100vw - 6.75rem)); gap:3px}
  #authNickname{display:none}
  .auth-user-btn{padding:3px;border-radius:999px}
  .auth-login-btn{padding:5px 8px;letter-spacing:0}
}

.auth-success{color:#1f6b3a;background:#e4f6ea;border:1px solid #8dcaa3;padding:8px 10px;border-radius:8px;font-size:13px}
.avatar-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.auth-upload-btn{
  font:inherit;cursor:pointer;border:1.5px dashed var(--ink,#2a2a2a);background:var(--paper,#f7f1e6);
  color:var(--ink,#2a2a2a);
  border-radius:999px;padding:6px 12px;box-shadow:1px 1px 0 rgba(0,0,0,.08)
}
.auth-toast-host{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(420px,92vw)
}
.auth-toast{
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;
  border:1.5px solid #2a2a2a;border-radius:12px;padding:10px 14px;font-size:14px;
  box-shadow:3px 3px 0 rgba(0,0,0,.14);text-align:center;width:100%
}
.auth-toast.show{opacity:1;transform:translateY(0)}
.auth-toast--success{background:#3db86a;color:#0f2a18;border-color:#1f6b3a}
.auth-toast--error{background:#e05252;color:#fff8f6;border-color:#8a2a2a}

/* Busy / disabled feedback for auth actions */
.auth-primary.is-busy,
.auth-danger.is-busy,
.auth-primary:disabled,
.auth-danger:disabled {
  opacity: 0.72;
  cursor: wait;
  box-shadow: none;
}
.auth-form:has(.is-busy) {
  pointer-events: none;
}
#authSettingsPanel:has(.is-busy) {
  pointer-events: none;
}
#authSettingsPanel:has(.is-busy) .auth-primary.is-busy,
#authSettingsPanel:has(.is-busy) .auth-danger.is-busy {
  pointer-events: auto;
}

/* Visually hide file input but keep it activatable via label (Android WebView). */
.avatar-file-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  opacity:0;pointer-events:none
}
.avatar-picker{position:relative}
.auth-items-line{margin:2px 0 4px;font-size:13px;opacity:.85}

/* ===== 资料设置：紧凑卡片布局（头像+昵称同行，入口做成小方块，保存/退出并排） ===== */
#authSettingsPanel { gap: 8px; }
.auth-profile-head { display: flex; align-items: center; gap: 12px; }
.auth-profile-head .avatar-picker { position: relative; flex: none; gap: 0; }
.auth-profile-head .avatar-preview-btn { width: 56px; height: 56px; }
.auth-profile-head .avatar-preview { width: 56px; height: 56px; }
.auth-profile-head .avatar-actions { position: absolute; right: -8px; bottom: -6px; z-index: 2; }
.auth-profile-head .avatar-actions .auth-dice { padding: 2px; width: 28px; height: 28px; min-width: 28px; display: inline-flex; align-items: center; justify-content: center; }
.auth-profile-head .auth-nick-row { flex: 1; min-width: 0; }
#authSettingsPanel .auth-nick-field { gap: 2px; }
#authSettingsPanel .auth-items-line { margin: 0; }
.auth-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.auth-tiles > [hidden] { display: none !important; }
.auth-tiles .auth-tile.ctl {
  margin: 0;
  min-height: 58px;
  padding: 6px 4px;
  flex-direction: column;
  gap: 2px;
  letter-spacing: 0.06em;
  font-size: 13px;
  text-align: center;
  width: 100%;
}
.auth-tiles .ctl-label, .auth-actions .ctl-label { letter-spacing: 0.04em; white-space: nowrap; }
.auth-profile-head .auth-nick-field { flex: 1; min-width: 0; }
.auth-profile-head .auth-nick-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.auth-profile-head .auth-nick-row .auth-dice { flex: none; }
.auth-tile-sub { position: relative; z-index: 1; font-size: 10px; font-weight: 500; letter-spacing: 0; opacity: .7; pointer-events: none; }
.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.auth-actions .ctl { margin: 0; width: 100%; min-height: 48px; }
#authSettingsPanel .pvp-settings {
  margin: 0;
  padding: 8px 12px;
  border: 1.5px solid color-mix(in srgb, var(--ink, #2a2a2a) 35%, transparent);
  border-radius: 10px;
}
#authSettingsPanel .pvp-settings-title { margin: 0; font-size: 12px; opacity: .7; }
#authSettingsPanel .pvp-settings-rank { margin: 2px 0 0; font-size: 1.1rem; letter-spacing: 0.1em; }
.auth-nick-hint{display:block;margin-top:4px;font-size:.72rem;font-weight:400;color:var(--mute,#7a7066)}