/* ============================================================================
   帕驴风云 · 全站共用的东西（浅色版，对齐后台 admin.html 的 DeepSeek 风格）
     ① 设计变量（各页面直接 var(--xxx)）
     ② 底部那排切换按钮（游戏 / 好友 / 兑换 / 我的）
     ③ 各页面共用的卡片、按钮、输入框、弹窗、提示条
   ============================================================================ */

/* ============================================================
   设计变量：和 admin.html 的 :root 是同一套，改这里全站一起变。
   ============================================================ */
:root{
  --bg:#F6F8FC; --surface:#FFFFFF; --surface2:#F8FAFD;
  --line:#E4EAF3; --line2:#D8E2EF;
  --text:#1E293B; --sub:#64748B; --muted:#94A3B8;
  --blue:#4D6BFE; --blue2:#3B5BFD; --blueSoft:#EEF2FF;
  --red:#EF5B6B; --redSoft:#FFF1F3;
  --green:#12A06A; --greenSoft:#EAFBF3;
  --amber:#D99A2B; --amberSoft:#FFF7E6;
  --purple:#7C5CFC; --purpleSoft:#F1EEFF;
  /* 彩色描边 / 禁用底 / 遮罩：深浅两套都靠这组，页面里别再写死 */
  --amberLine:#F3DFB4;
  --blueLine:#DCE5FF; --redLine:#FFD2D8;
  --greenLine:#CFF3E2; --purpleLine:#D9D0FF;
  --disabledBg:#E9EEF7; --overlay:rgba(15,23,42,.45);
  --navBg:rgba(255,255,255,.96);
  --navShadow:0 -6px 24px rgba(15,23,42,.06);
  --shadow:0 1px 2px rgba(15,23,42,.03);
  --shadow-lg:0 12px 32px rgba(15,23,42,.10);
}

/* 深色主题：玩家在「我的 → 外观」里选。默认浅色，所以这里只覆盖变量。
   theme.js 会在 <head> 里先把 html[data-theme] 定好，避免首屏闪一下。 */
html[data-theme="dark"]{
  --bg:#060a12; --surface:#141f2f; --surface2:#0f1825;
  --line:#26364a; --line2:#2b3b52;
  --text:#e8eef6; --sub:#8fa2b8; --muted:#5d6d80;
  --blue:#5b7cff; --blue2:#7d97ff; --blueSoft:rgba(77,107,254,.16);
  --red:#f0736f; --redSoft:rgba(240,115,111,.14);
  --green:#4ec98a; --greenSoft:rgba(78,201,138,.14);
  --amber:#e8b53a; --amberSoft:rgba(232,181,58,.10);
  --purple:#b79bff; --purpleSoft:rgba(160,130,255,.13);
  --amberLine:rgba(232,181,58,.30);
  --blueLine:rgba(91,124,255,.35); --redLine:rgba(240,115,111,.35);
  --greenLine:rgba(78,201,138,.30); --purpleLine:rgba(183,155,255,.32);
  --disabledBg:#1b2738; --overlay:rgba(0,0,0,.72);
  --navBg:rgba(9,15,26,.94);
  --navShadow:0 -6px 24px rgba(0,0,0,.5);
  --shadow:0 8px 26px rgba(0,0,0,.32);
  --shadow-lg:0 18px 50px rgba(0,0,0,.55);
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

/* ============================================================
   切页面：不要「白一下再画」
   点底部按钮是整页跳转。浏览器在新页面准备好之前画的是默认白底。
   浅色主题下这一闪已经不明显，但保留视图过渡，切页更顺。

   支持的：Chrome 126+ / Safari 18+ / 安卓 Chrome。
   不支持的浏览器直接忽略这几行，跳转行为和以前一模一样，不会更差。
   ============================================================ */
@view-transition{navigation:auto}

/* 淡得快一点。默认 0.25s 偏慢，连着点几个页面会觉得黏。 */
::view-transition-old(root),
::view-transition-new(root){animation-duration:.16s}

/* 底部这排按钮在两边的位置、大小完全一样，给它起个名字让它【原地不动】。
   不加这句它会跟着整页一起淡出再淡入，看着就是「闪了一下」。
   起了名字的元素会自动从整页快照里摘出来单独处理，所以不用管别的地方。
   顺带一个副作用：高亮从旧的那项滑到新的那项，切页面有「选了个 tab」的感觉。 */
.palu-tabbar{view-transition-name:palu-tabbar}

/* ============ 让 hidden 真的管用 ============ */
/* 浏览器默认样式表里那条 [hidden]{display:none} 的优先级是「一个属性选择器」，
   而 .palu-btn.tap{display:inline-flex} 是「两个类」，比它高 —— 于是
   任何带 .palu-btn 的按钮写上 hidden 都【照样显示】。
   踩到的样子：游戏结算面板上的「重试上报成绩」对所有人一直是可见的
   （它本该只在上报失败时出现），「看看排行榜」在好友同玩里也藏不掉。
   加这条兜底，以后 hidden 就按字面意思办事，不用每个元素单独补一条
   .xxx[hidden]{display:none}。 */
[hidden]{display:none !important}

/* ============ 底部导航 ============ */
/* 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:var(--navBg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:var(--navShadow);
  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:var(--sub);
  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(1) opacity(.6);transition:filter .16s,transform .16s}
.palu-tabbar a.on{color:var(--blue2);background:var(--blueSoft)}
.palu-tabbar a.on .ti{filter:none;transform:translateY(-1px)}
.palu-tabbar a:active{background:var(--surface2)}
/* 未读小红点 */
.palu-badge{
  position:absolute;top:2px;left:50%;margin-left:5px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--red);color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--surface);
  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 上，所以哪个页面都能弹（包括正在玩别的游戏的时候）。
   用弹窗而不是顶部小条：邀请是「要你做个决定」的事，
   顶部小条太容易被当成提示一眼划过去。
   z-index 压到 80 —— 比底部导航（40）和几个页面的弹层（50/60）都高。
   不显示时整块移出交互 + 透明，免得拦住页面上的点击。 */
.palu-duel{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  background:var(--overlay);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.palu-duel.show{opacity:1;pointer-events:auto}
.palu-duel .pd-card{
  width:100%;max-width:300px;text-align:center;
  padding:20px 18px 16px;border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transform:translateY(10px) scale(.97);
  transition:transform .22s cubic-bezier(.2,.9,.3,1);
}
.palu-duel.show .pd-card{transform:none}
.palu-duel .pd-ic{font-size:30px;line-height:1;margin-bottom:8px}
.palu-duel .pd-tt{font-size:15px;font-weight:800;color:var(--text);letter-spacing:.06em}
.palu-duel .pd-tx{font-size:13px;color:var(--sub);margin-top:9px;line-height:1.5}
.palu-duel .pd-tx b{color:var(--text)}
/* 房号要念给朋友听，所以给到最大最清楚 */
.palu-duel .pd-code{
  font-size:32px;font-weight:900;letter-spacing:.18em;color:var(--blue2);
  font-variant-numeric:tabular-nums;margin:10px 0 14px;
}
.palu-duel .pd-go{
  display:block;width:100%;padding:12px 0;border:0;border-radius:11px;cursor:pointer;
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:800;letter-spacing:.06em;
  box-shadow:0 6px 16px rgba(77,107,254,.22);
}
.palu-duel .pd-go:active{transform:translateY(1px)}
.palu-duel .pd-x{
  display:block;width:100%;margin-top:9px;padding:10px 0;border:0;border-radius:11px;cursor:pointer;
  background:var(--surface2);color:var(--sub);font-size:13.5px;
}

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

/* ============ 从游戏大厅点进来的页面，左上角那个「返回」 ============ */
/* 竖着排：返回按钮在最上面，标题和规则按钮在它下面。
   （用户要求「文字放在下面，不要放右边」） */
.hd-left{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.gback{
  flex:0 0 auto;width:34px;height:34px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;text-decoration:none;padding-bottom:2px;
  background:var(--surface);border:1px solid var(--line2);
  color:var(--sub);font-size:20px;line-height:1;
  transition:background .16s,transform .12s;
}
.gback:active{background:var(--surface2);transform:scale(.94)}

/* ============ 新页面共用的基础样式 ============ */
.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:var(--text)}
.palu-hd .sub{font-size:11.5px;color:var(--muted)}

.palu-card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:14px;padding:13px 14px;margin-bottom:10px;
}
.palu-card.tight{padding:9px 12px}

.palu-btn{
  appearance:none;border:1px solid var(--line2);
  background:var(--surface);color:var(--text);
  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:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 6px 16px rgba(77,107,254,.20);
}
.palu-btn.primary:active{background:var(--blue2)}
.palu-btn.ghost{background:transparent;color:var(--sub)}
.palu-btn.danger{background:var(--redSoft);border-color:var(--redLine);color:var(--red)}
.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:var(--surface);color:var(--text);
  border:1px solid var(--line2);border-radius:11px;
  padding:10px 12px;font-size:15px;font-family:inherit;
  outline:none;transition:border-color .16s,box-shadow .16s;
}
.palu-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,107,254,.10)}
.palu-input::placeholder{color:var(--muted)}

.palu-empty{
  text-align:center;color:var(--muted);font-size:12.5px;
  padding:26px 12px;line-height:1.8;
}
.palu-err{color:var(--red);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(30,41,59,.96);color:#fff;
  border:1px solid rgba(255,255,255,.10);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(15,23,42,.28);
}
.palu-toast.show{opacity:1;transform:translate(-50%,0)}