/* ============================================================================
   pm-header.css ── playMingle 全域 HEADER（Neon Pop）
   全站共用、自帶調色變數，不依賴任何頁面樣式。
   結構：playMingle logo ＋ 語言切換 ＋ 會員中心 ＋ 使用者 ＋ 登出，一條搞定。
   假設平台為深色底；若有淺色頁面，見檔尾「淺色頁」註記。
   ============================================================================ */

.pm-header{
  /* 調色盤（與遊戲棋盤一致；只作用於 header 內，不外洩） */
  --pmh-pink:#ff2d8a;
  --pmh-magenta:#c026d3;
  --pmh-violet:#7c3aed;
  --pmh-rose:#ff5fae;
  --pmh-cyan:#67e8f9;
  --pmh-gold:#ffd166;

  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 12px;
  font-family:'Baloo 2','Lexend','PingFang TC','Noto Sans TC',sans-serif;
  color:#fff;
  background:linear-gradient(180deg, rgba(14,6,32,.95) 0%, rgba(14,6,32,.62) 70%, rgba(14,6,32,0) 100%);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.pm-header *{ box-sizing:border-box; }

/* 內容置中容器（桌機寬螢幕用） */
.pm-header__inner{
  width:100%; max-width:1160px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
}

/* ---------- logo（保留 playMingle 識別） ---------- */
.pm-header__logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.pm-header__mark{
  width:38px; height:38px; border-radius:13px; flex:0 0 auto;
  display:grid; place-items:center; font-size:19px; overflow:hidden;
  background:linear-gradient(135deg,var(--pmh-pink),#9c27b0);
  box-shadow:0 4px 0 rgba(0,0,0,.28), 0 0 18px rgba(233,30,99,.6), inset 0 2px 0 rgba(255,255,255,.4);
}
.pm-header__mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-header__word{ display:flex; flex-direction:column; line-height:1.05; }
.pm-header__word .en{ font-size:16px; font-weight:800; letter-spacing:.3px; color:#fff; }
.pm-header__word .cn{
  font-size:12px; font-weight:700; letter-spacing:3px;
  background:linear-gradient(90deg,var(--pmh-rose),var(--pmh-cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.pm-header__spacer{ margin-left:auto; }
.pm-header__right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* ---------- 語言切換 ---------- */
.pm-header__lang{
  display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.pm-header__lang b{ color:#fff; }
.pm-header__lang a{ color:rgba(255,255,255,.4); text-decoration:none; }
.pm-header__lang a:hover{ color:rgba(255,255,255,.75); }
.pm-header__lang i{ color:rgba(255,255,255,.22); font-style:normal; }

/* ---------- 會員中心膠囊 ---------- */
.pm-header__member{
  display:flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none;
  padding:4px 6px 4px 4px; border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,209,102,.45);
  box-shadow:0 0 14px rgba(255,209,102,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .1s ease, box-shadow .15s ease;
}
.pm-header__member:hover{ box-shadow:0 0 18px rgba(255,209,102,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.pm-header__member:active{ transform:translateY(1px); }
.pm-header__avatar{
  width:30px; height:30px; border-radius:999px; flex:0 0 auto; overflow:hidden;
  background:linear-gradient(135deg,var(--pmh-rose),var(--pmh-violet));
  display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff;
  box-shadow:0 0 0 2px rgba(255,209,102,.55);
}
.pm-header__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-header__who{ display:flex; flex-direction:column; line-height:1.1; max-width:120px; }
.pm-header__who .uname{ font-size:12px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-header__who .role{ font-size:9.5px; font-weight:700; letter-spacing:1px; color:var(--pmh-gold); }

/* ---------- 登出 ---------- */
.pm-header__logout{
  display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
  border:0; cursor:pointer; border-radius:999px; color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.06); box-shadow:0 3px 0 rgba(0,0,0,.26); font-size:15px;
  text-decoration:none; font-family:inherit;
  transition:transform .1s ease, box-shadow .15s ease, color .15s;
}
.pm-header__logout:hover{ color:#fff; }
.pm-header__logout:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.26); }

/* ---------- 未登入狀態：登入 / 註冊 ---------- */
.pm-header__login{
  display:inline-flex; align-items:center; height:34px; padding:0 16px; border-radius:999px;
  font-size:13px; font-weight:800; color:#fff; text-decoration:none; font-family:inherit; border:0; cursor:pointer;
  background:linear-gradient(100deg,var(--pmh-pink),var(--pmh-violet));
  box-shadow:0 0 18px rgba(233,30,99,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.pm-header__login:active{ transform:translateY(2px); box-shadow:0 0 10px rgba(233,30,99,.3); }

/* ---------- 可選：返回鈕（子頁面用，放 logo 左側） ---------- */
.pm-header__back{
  display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700;
  color:#fff; padding:8px 13px 8px 10px; border-radius:999px; cursor:pointer;
  border:0; background:rgba(255,255,255,.08); box-shadow:0 3px 0 rgba(0,0,0,.28);
  font-family:inherit; text-decoration:none; flex:0 0 auto;
}
.pm-header__back:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28); }

/* ---------- 窄螢幕 ---------- */
@media (max-width:400px){
  .pm-header__who{ display:none; }            /* 收起名字，只留頭像 */
  .pm-header__member{ padding:4px; }
  .pm-header__word .en{ font-size:15px; }
}
@media (max-width:340px){
  .pm-header__lang{ display:none; }           /* 極窄：語言切換移到會員中心內 */
}

/* ---------- 桌機加大一點呼吸感 ---------- */
@media (min-width:768px){
  .pm-header{ padding-left:24px; padding-right:24px; }
  .pm-header__right{ gap:10px; }
}

@media (prefers-reduced-motion: reduce){
  .pm-header__member, .pm-header__logout, .pm-header__login, .pm-header__back{ transition:none; }
}

/* ============================================================================
   淺色頁面：若某些頁面是淺底，給該頁的 <body> 或外層加 .pm-on-light，
   header 底色換成淺色玻璃、文字轉深色。
   ============================================================================ */
.pm-on-light .pm-header{
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.6) 70%, rgba(255,255,255,0) 100%);
  color:#1a0a14;
}
.pm-on-light .pm-header__word .en{ color:#1a0a14; }
.pm-on-light .pm-header__lang b{ color:#1a0a14; }
.pm-on-light .pm-header__lang{ background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); }
.pm-on-light .pm-header__logout{ color:rgba(0,0,0,.6); background:rgba(0,0,0,.05); }