/* ============================================================
   小宝盒 xbh-kit.css —— 平台公共样式（公共工具脚本的界面部分）
   所有游戏页与首页共享；游戏自身样式请写在自己的 game.css 里
============================================================ */
@import url('fonts/zcool.css');   /* 站酷快乐体（OFL，自托管分片，按需加载） */

:root {
  --xbh-bg1:#bde8ff; --xbh-bg2:#ffe3f3;
  --xbh-ink:#4a5578; --xbh-ink-light:#8d99b8;
  --xbh-accent:#ff6b6b; --xbh-green:#06d6a0; --xbh-gold:#ffd166;
  --xbh-card:#ffffff;
  --xbh-radius:22px;
  --xbh-shadow:0 5px 0 rgba(120,140,190,.3);
  --xbh-font:'ZCOOL KuaiLe','Comic Sans MS','Chalkboard SE','Yuanti SC','YouYuan','PingFang SC','Microsoft YaHei',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; -webkit-touch-callout:none; }
body {
  font-family:var(--xbh-font);
  background:linear-gradient(160deg,var(--xbh-bg1) 0%,#e7f0ff 45%,var(--xbh-bg2) 100%);
  color:var(--xbh-ink); user-select:none; -webkit-user-select:none;
}

/* ---- 悬浮回家按钮（kit 自动注入到游戏页） ---- */
.xbh-home-btn {
  position:fixed; top:12px; right:12px; z-index:900;
  width:52px; height:52px; border-radius:50%;
  background:#fff; border:none; font-size:26px; cursor:pointer;
  box-shadow:0 4px 0 rgba(120,140,190,.35);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:transform .12s;
}
.xbh-home-btn:active { transform:scale(.88); }

/* ---- 通用遮罩与弹窗（家长门/设置面板用） ---- */
.xbh-mask {
  position:fixed; inset:0; z-index:9999;   /* 必须高于休息遮罩(9995)，否则家长门被挡住无法解锁 */
  background:rgba(30,35,70,.5); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  animation:xbhFade .25s;
}
@keyframes xbhFade { from{opacity:0} to{opacity:1} }
.xbh-modal {
  position:relative;
  background:#fff; border-radius:28px; padding:26px 28px;
  width:min(92vw,420px); max-height:84vh; overflow-y:auto;
  box-shadow:0 14px 40px rgba(30,40,90,.35);
  animation:xbhPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes xbhPop { from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1} }
.xbh-modal h3 { font-size:24px; text-align:center; margin-bottom:6px; }
.xbh-modal .xbh-sub { font-size:15px; color:var(--xbh-ink-light); text-align:center; margin-bottom:16px; }
.xbh-close {
  position:absolute; top:14px; right:14px; border:none; background:#f0f3fa; color:var(--xbh-ink-light);
  width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer;
}

/* ---- 家长门选项按钮 ---- */
.xbh-gate-q { font-size:44px; font-weight:900; text-align:center; letter-spacing:4px; margin:6px 0 18px; color:#3a3f5c; }
.xbh-gate-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.xbh-gate-opts button {
  border:none; border-radius:16px; padding:16px 0; font-size:26px; font-weight:900;
  font-family:var(--xbh-font); background:#f0f3fa; color:#3a3f5c; cursor:pointer;
  box-shadow:0 3px 0 rgba(120,140,190,.3); transition:transform .1s;
}
.xbh-gate-opts button:active { transform:scale(.94); }
.xbh-gate-opts button.good { background:#d3f8e2; color:#0a7a52; }
.xbh-gate-opts button.bad { background:#ffdde0; color:#b62633; animation:xbhShake .4s; }
@keyframes xbhShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* ---- 休息遮罩（时长看护到点） ---- */
.xbh-rest {
  position:fixed; inset:0; z-index:9995;
  background:linear-gradient(180deg,#2b2f6e,#4a3f8f);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  animation:xbhFade .5s;
}
.xbh-rest .moon { font-size:110px; animation:xbhFloaty 3s ease-in-out infinite; }
@keyframes xbhFloaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.xbh-rest h2 { color:#fff; font-size:32px; text-shadow:0 3px 0 rgba(0,0,0,.25); }
.xbh-rest p { color:#cfd3ff; font-size:17px; }
.xbh-rest .xbh-unlock {
  margin-top:22px; border:none; border-radius:999px; padding:13px 32px;
  font-size:19px; font-weight:900; font-family:var(--xbh-font);
  background:var(--xbh-gold); color:#7a4b00; cursor:pointer;
  box-shadow:0 5px 0 rgba(180,130,20,.5);
}
.xbh-rest .xbh-unlock:active { transform:scale(.94); }

/* ---- 通用按钮 ---- */
.xbh-btn {
  border:none; border-radius:999px; padding:12px 28px;
  font-size:18px; font-weight:900; font-family:var(--xbh-font); cursor:pointer;
  background:linear-gradient(135deg,#43e97b,#38f9d7); color:#0a5c46;
  box-shadow:0 4px 0 rgba(20,150,110,.45);
}
.xbh-btn:active { transform:scale(.94); }
.xbh-btn.warn { background:linear-gradient(135deg,#ff9a9e,#fad0c4); color:#a6373f; box-shadow:0 4px 0 rgba(170,80,80,.4); }
.xbh-btn.plain { background:#f0f3fa; color:#4a5578; box-shadow:0 4px 0 rgba(120,140,190,.3); }