/* ============================================================
   CatPawCity · 夜光猫城 游戏页公共主题
   与首页 index.html 同一套设计语言：深夜蓝紫底 + 霓虹渐变 + 无框玻璃
   ============================================================ */
:root{
  --bg:#0B0E1E; --bg2:#121735;
  --glass:rgba(255,255,255,.055); --glass-line:rgba(255,255,255,.11);
  --glass-2:rgba(255,255,255,.09);
  --pink:#FF6B9D; --purple:#8B7CFF; --teal:#3FE0C5; --amber:#FFB44C; --blue:#5BB8FF;
  --ink:#F2F3FF; --muted:#9BA1C6; --dim:#6B7194;
  --grad:linear-gradient(100deg,#FF6B9D,#8B7CFF 55%,#3FE0C5);
  --radius:20px;
}

html,body{min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Segoe UI",sans-serif;
  color:var(--ink);
  line-height:1.6;
  background-color:var(--bg);
  background-image:
    radial-gradient(1.1px 1.1px at 24px 36px, rgba(255,255,255,.16) 50%, transparent 51%),
    radial-gradient(1px 1px at 130px 170px, rgba(255,255,255,.10) 50%, transparent 51%),
    radial-gradient(900px 520px at 88% -8%, rgba(139,124,255,.24) 0%, transparent 62%),
    radial-gradient(760px 480px at -6% 24%, rgba(63,224,197,.13) 0%, transparent 58%),
    radial-gradient(1100px 760px at 50% 118%, rgba(255,107,157,.12) 0%, transparent 62%),
    linear-gradient(180deg,#0B0E1E 0%,#121735 100%);
  background-size:210px 210px, 330px 330px, auto, auto, auto, auto;
  background-repeat:repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(139,124,255,.45)}
h1,h2,h3{font-weight:800;letter-spacing:.3px}

/* ===== 顶部玻璃导航条 ===== */
.top{
  position:sticky;top:0;z-index:80;width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;
  background:rgba(11,14,30,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-line);
}
.mini{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--glass);border:1px solid var(--glass-line);
  border-radius:999px;padding:8px 16px;
  font-size:13.5px;font-weight:700;color:var(--ink);
  cursor:pointer;transition:.2s;font-family:inherit;
}
.mini:hover{background:var(--glass-2);border-color:rgba(139,124,255,.55);transform:translateY(-1px)}
.mini:active{transform:scale(.96)}
.mini.accent{border-color:transparent;background:var(--grad);color:#0B0E1E;box-shadow:0 6px 20px rgba(139,124,255,.35)}

/* ===== 页面标题 ===== */
h1{
  font-size:clamp(21px,5.4vw,27px);text-align:center;margin:20px 0 6px;
  text-shadow:0 0 26px rgba(139,124,255,.45);
}
.sub{
  font-size:12.5px;color:var(--muted);margin-bottom:16px;
  text-align:center;padding:0 24px;max-width:560px;
}

/* ===== 数值药丸 ===== */
.pill{
  background:var(--glass);border:1.5px solid var(--glass-line);
  border-radius:16px;padding:8px 20px;text-align:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pill b{font-size:20px;color:var(--amber);text-shadow:0 0 18px rgba(255,180,76,.35)}
.pill span{display:block;font-size:11px;color:var(--dim)}

/* ===== 主按钮 ===== */
.big{
  display:inline-block;background:var(--grad);color:#0B0E1E;
  font-size:16px;font-weight:800;border:none;border-radius:999px;
  padding:13px 36px;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 30px rgba(139,124,255,.38),0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .15s,box-shadow .2s;
}
.big:hover{box-shadow:0 14px 38px rgba(255,107,157,.42),0 0 0 1px rgba(255,255,255,.12) inset}
.big:active{transform:scale(.96)}

/* ===== 玻璃弹层 ===== */
.over,.overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(6,8,20,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
.panel{
  background:rgba(18,23,53,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--glass-line);border-radius:26px;
  padding:34px 30px;text-align:center;max-width:340px;width:86%;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
}
.panel h1,.panel h2{font-size:22px;margin-bottom:10px;color:var(--ink);text-shadow:0 0 22px rgba(139,124,255,.4)}
.panel p{font-size:13.5px;color:var(--muted);line-height:1.75;margin-bottom:22px}
.panel .back{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--dim);text-decoration:none}
.panel .back:hover{color:var(--muted)}

/* ===== 提示条 ===== */
.toast{
  position:fixed;top:74px;left:50%;z-index:150;
  transform:translateX(-50%) translateY(-12px);
  background:rgba(18,23,53,.92);color:var(--ink);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:13.5px;font-weight:700;border-radius:999px;
  padding:11px 22px;opacity:0;transition:all .3s;
  pointer-events:none;white-space:nowrap;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 玻璃卡片 / 芯片按钮 ===== */
.chipbtn{
  background:var(--glass);border:1.5px solid var(--glass-line);
  border-radius:999px;padding:9px 18px;font-size:13px;font-weight:700;
  color:var(--muted);cursor:pointer;font-family:inherit;transition:.2s;
}
.chipbtn:hover{color:var(--ink);border-color:rgba(139,124,255,.5)}
.chipbtn.on{
  color:var(--ink);border-color:rgba(139,124,255,.75);
  background:linear-gradient(100deg,rgba(255,107,157,.22),rgba(139,124,255,.24));
  box-shadow:0 0 20px rgba(139,124,255,.3);
}