/* ============================================================
   共享响应式页面头部样式  (assets/header.css)
   由 math-warrior-php-v10 的 index / sudoku / poetry / math
   页面共用，解决窄屏下标题竖排、按钮被挤压换行的老问题。
   class 清单:
     .header .logo .logo-emoji .logo-title .greeting
     .btn-icon .header-right .warrior-hud
   设计原则: mobile-first，先保证小屏一行/两排整齐，
   再随断点(min-width:520 / 640)逐步放大；≤360 头部换行、
   按钮整排居中、问候语隐藏以省空间。
   ============================================================ */

.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0 10px;gap:8px;
}
.logo{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:18px;font-weight:800;color:var(--c-accent);
  white-space:nowrap;line-height:1.1;
}
.logo-emoji{font-size:24px;flex-shrink:0}
.logo-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.greeting{font-size:12px;color:#888;font-weight:400;margin-left:4px;white-space:nowrap}
.btn-icon{
  width:34px;height:34px;border-radius:50%;border:none;
  background:var(--c-card);box-shadow:var(--shadow);
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .15s;flex-shrink:0;
}
.btn-icon:active{transform:scale(.9)}
.header-right{display:flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap}
.warrior-hud{
  font-size:12px;font-weight:700;color:var(--c-star);
  display:flex;align-items:center;gap:3px;background:#fff;box-shadow:var(--shadow);
  border-radius:18px;padding:3px 8px;flex-shrink:0;white-space:nowrap;
}

/* 超窄屏:头部换行，按钮整排居中，隐藏问候语省空间 */
@media(max-width:360px){
  .header{flex-wrap:wrap;padding:6px 0 8px}
  .header-right{width:100%;justify-content:center;margin-top:6px;gap:8px}
  .greeting{display:none}
  .btn-icon{width:40px;height:40px;font-size:18px}
  .warrior-hud{font-size:12px;padding:3px 8px}
}

/* 中小屏回升 */
@media(min-width:520px){
  .logo{font-size:20px;gap:6px}
  .logo-emoji{font-size:26px}
  .greeting{font-size:13px}
  .btn-icon{width:36px;height:36px;font-size:18px}
  .header-right{gap:6px}
  .warrior-hud{font-size:13px;padding:3px 8px}
}

/* 大屏 / 桌面:完整展开，问候语常显 */
@media(min-width:640px){
  .logo{font-size:22px}
  .logo-emoji{font-size:28px}
  .greeting{font-size:13px;display:inline}
  .btn-icon{width:40px;height:40px;font-size:20px}
  .header-right{gap:8px}
  .warrior-hud{font-size:14px;padding:4px 10px}
}