/* ============================================================================
   帕驴风云 · 四个页面共用的东西
     ① 底部那排切换按钮（游戏 / 好友 / 兑换 / 我的）
     ② 新页面（好友、我的）用的卡片、按钮、输入框
   游戏页和兑换页有自己的样式，这里只管新增的两个页面别长得不一样。
   ============================================================================ */

/* ============ 底部导航 ============ */
/* z-index 故意压到 40：游戏页的结果图弹层是 50/60，要让它盖住这排按钮。
   弹层关掉之后导航自己就露出来了，不用另外控制。 */
.palu-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  max-width:460px;margin:0 auto;
  display:flex;
  background:rgba(9,15,26,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.09);
  box-shadow:0 -6px 24px rgba(0,0,0,.5);
  padding:5px 4px calc(5px + env(safe-area-inset-bottom));
}
.palu-tabbar a{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 2px 4px;border-radius:12px;
  text-decoration:none;color:#7d8fa5;
  font-size:10.5px;letter-spacing:.5px;
  transition:color .16s,background .16s;
}
.palu-tabbar a .ti{font-size:19px;line-height:1.1;filter:grayscale(.55) opacity(.75);transition:filter .16s,transform .16s}
.palu-tabbar a.on{color:#f3d67a;background:rgba(232,181,58,.10)}
.palu-tabbar a.on .ti{filter:none;transform:translateY(-1px)}
.palu-tabbar a:active{background:rgba(255,255,255,.06)}
/* 未读小红点 */
.palu-badge{
  position:absolute;top:2px;left:50%;margin-left:5px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:#e5484d;color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px rgba(9,15,26,.94);
  display:none;
}
.palu-badge.show{display:block;animation:paluPop .28s cubic-bezier(.34,1.5,.64,1)}
@keyframes paluPop{from{transform:scale(.4)}to{transform:scale(1)}}

/* 页面底部给导航留出的空档（新页面在 body 上挂这个类） */
body.palu-page{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* ============ 新页面共用的基础样式 ============ */
.palu-wrap{width:100%;max-width:460px;margin:0 auto;position:relative;z-index:1}
.palu-hd{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:4px 0 14px;
}
.palu-hd h1{font-size:22px;font-weight:800;letter-spacing:.08em;margin:0;color:#f3d67a}
.palu-hd .sub{font-size:11.5px;color:#7d8fa5}

.palu-card{
  background:linear-gradient(160deg,rgba(28,42,62,.9),rgba(18,28,44,.9));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:13px 14px;margin-bottom:10px;
}
.palu-card.tight{padding:9px 12px}

.palu-btn{
  appearance:none;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#e8eef6;
  border-radius:11px;padding:9px 14px;
  font-size:13px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:transform .12s,background .16s,opacity .16s;
}
.palu-btn:active{transform:scale(.96)}
.palu-btn.primary{
  background:linear-gradient(160deg,#f0c455,#d99f22);color:#20180a;border-color:#f0c455;
}
.palu-btn.ghost{background:transparent;color:#9fb0c4}
.palu-btn.danger{background:rgba(229,72,77,.14);border-color:rgba(229,72,77,.5);color:#ff8f92}
.palu-btn:disabled{opacity:.45;cursor:default;transform:none}
.palu-btn.sm{padding:6px 11px;font-size:12px;border-radius:9px}

.palu-input{
  width:100%;box-sizing:border-box;
  background:rgba(6,12,22,.75);color:#e8eef6;
  border:1px solid rgba(255,255,255,.13);border-radius:11px;
  padding:10px 12px;font-size:15px;font-family:inherit;
  outline:none;transition:border-color .16s;
}
.palu-input:focus{border-color:#e8b53a}
.palu-input::placeholder{color:#5d6d80}

.palu-empty{
  text-align:center;color:#6b7c90;font-size:12.5px;
  padding:26px 12px;line-height:1.8;
}
.palu-err{color:#f0736f;font-size:12px;min-height:16px;margin-top:7px}

/* 顶部小提示（各页面共用，比弹窗轻） */
.palu-toast{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  z-index:200;pointer-events:none;
  background:rgba(12,20,34,.97);color:#e8eef6;
  border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:10px 16px;font-size:13px;max-width:80vw;text-align:center;
  opacity:0;transition:opacity .22s,transform .22s;
  box-shadow:0 8px 26px rgba(0,0,0,.55);
}
.palu-toast.show{opacity:1;transform:translate(-50%,0)}