/* 玩具铺公共皮肤 —— toys.html / muyu.html / zhuqingting.html 共用。
   index.html（竹知了）不引用本文件：它是单文件直开的主玩具，样式留在它自己那边，
   两边只保证「看起来是一家的」，不共享代码。新增玩具页直接 <link> 本文件，别再复制一份。

   命名和 index.html 有意错开（.badges/.badge vs .ghlink），避免以后合并时同名不同义。 */

:root{
  --ink:#0a1028;
  --paper:#f0e6d2;
  --accent:#e2603f;
  --accent-dim:#b34a30;
  --gold:#ffcf9e;
  --serif:"Songti SC","Noto Serif SC","Noto Serif CJK SC","STSong","SimSun",serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%; background:var(--ink); color:var(--paper);
  font-family:var(--serif);
  /* ⚠️ body 上这条 overscroll-behavior 是给全屏画布页挡下拉刷新的，但它对**可滚动的页面**
     有个陷阱：那种页面只要在 body 上写了任何 overflow（哪怕只是 overflow-x:hidden），
     body 就变成一个可滚动范围为 0 的滚动容器，这条会把滚动链截断在 body 上，
     滚轮/触摸滑动被吞、整页滚不动（键盘还能滚，很难发现）。
     可滚动的页面请把 overflow-x:hidden 只写在 html 上，见 toys.html。 */
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
/* 画布类玩具页加这个：整页锁死不滚动。玩具铺(可滚动列表)不加 */
body.play{ overflow:hidden; }

canvas#cv{
  position:fixed; inset:0; display:block;
  touch-action:none; cursor:pointer;
}

/* —— 竖排标题 —— */
.masthead{
  position:fixed;
  top:calc(26px + env(safe-area-inset-top));
  left:calc(20px + env(safe-area-inset-left));
  display:flex; gap:14px; pointer-events:none; z-index:2;
  color:var(--paper);
}
.masthead h1{
  writing-mode:vertical-rl;
  font-size:clamp(30px, 5.4vh, 46px);
  font-weight:700; letter-spacing:.32em;
  text-shadow:0 0 24px rgba(255,170,100,.25);
}
.masthead .sub{
  writing-mode:vertical-rl;
  font-size:clamp(12px, 1.8vh, 15px);
  letter-spacing:.5em; opacity:.62; padding-top:10px;
}
.masthead .seal{
  writing-mode:vertical-rl;
  align-self:flex-start;
  font-size:11px; letter-spacing:.28em;
  color:var(--ink); background:var(--accent);
  padding:8px 3px; border-radius:3px; opacity:.92;
}

/* —— 右上角标：flex 竖排，加一条就多一条，不用手算 top —— */
.badges{
  position:fixed;
  top:calc(24px + env(safe-area-inset-top));
  right:calc(20px + env(safe-area-inset-right));
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  z-index:3;
}
.badge{
  font-size:12px; letter-spacing:.26em;
  color:var(--paper); opacity:.5; text-decoration:none;
  border:1px solid rgba(240,230,210,.35); border-radius:999px;
  padding:6px 12px 6px 15px; white-space:nowrap;
  transition:all .25s ease; cursor:pointer;
}
.badge:hover{ opacity:1; border-color:var(--accent); color:var(--gold); box-shadow:0 0 16px rgba(226,96,63,.25); }
/* 主入口：橙框常亮，跟其它角标拉开层级 */
.badge.hot{ opacity:.95; color:var(--gold); border-color:rgba(226,96,63,.75); }
.badge.hot:hover{ box-shadow:0 0 20px rgba(226,96,63,.4); }
/* 玩具之间的跳转挤成横排的一行。竖着排会占三行，把角标一路顶到月亮上 */
.badge-row{ display:flex; gap:8px; }

/* —— 装进桌面的指引卡 —— */
.installtip{
  position:fixed; left:50%; top:26%; transform:translateX(-50%);
  max-width:78vw; padding:14px 22px; border-radius:14px;
  font-size:14px; letter-spacing:.12em; line-height:2;
  color:var(--paper); background:rgba(14,20,44,.92);
  border:1px solid rgba(226,96,63,.55);
  box-shadow:0 0 30px rgba(0,0,0,.5);
  z-index:6; text-align:center; cursor:pointer;
  transition:opacity .4s ease;
}
.installtip.gone{ opacity:0; pointer-events:none; }

/* —— 底部玩法提示 —— */
.hint{
  position:fixed; left:50%; bottom:calc(9vh + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  padding:11px 24px; border-radius:999px;
  color:var(--paper);
  font-size:15px; letter-spacing:.22em; white-space:nowrap;
  background:rgba(14,20,44,.55);
  border:1px solid rgba(240,230,210,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  pointer-events:none; z-index:2;
  animation:bob 3.2s ease-in-out infinite;
  transition:opacity 1.2s ease;
}
.hint .snd{ font-size:12px; opacity:.55; letter-spacing:.1em; }
.hint.gone{ opacity:0; }
@keyframes bob{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-7px)} }

/* —— 右下控制区 —— */
.panel{
  position:fixed; right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  color:var(--paper); z-index:3;
}
.meter{ text-align:right; line-height:1.15; }
.meter b{
  font-size:30px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--gold); text-shadow:0 0 14px rgba(255,180,110,.35);
}
.meter label{ display:block; font-size:11px; letter-spacing:.32em; opacity:.55; }
.panel button{
  font-family:var(--serif); font-size:14px; letter-spacing:.3em;
  padding:10px 18px 10px 22px; border-radius:999px;
  color:var(--paper); background:rgba(14,20,44,.55);
  border:1px solid rgba(226,96,63,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer; transition:all .25s ease;
  touch-action:manipulation;
}
.panel button:hover{ border-color:var(--accent); box-shadow:0 0 18px rgba(226,96,63,.25); }
.panel button.on{
  background:var(--accent); border-color:var(--accent); color:#1b0f0a;
  box-shadow:0 0 26px rgba(226,96,63,.5);
}

/* —— 排行榜浮层（Toy.leaderboardPanel）——
   ⚠️ index.html 里有一份同构观感（竹知了页不引 kit），改样式两边一起改 —— */
.lb{
  position:fixed; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,22,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.lb-card{
  /* 只有榜单列表（.lb-list）内部滚动：tab/「我的」行/按钮/右上 × 始终可见，
     20 条时手机上不用下拉找关闭 */
  position:relative; display:flex; flex-direction:column;
  min-width:min(88vw,320px); max-width:88vw; max-height:min(76vh, 76dvh);
  padding:26px 20px 18px; border-radius:16px; text-align:center;
  color:var(--paper); background:rgba(14,20,44,.94);
  border:1px solid rgba(226,96,63,.55); box-shadow:0 0 40px rgba(0,0,0,.55);
  font-size:14px; letter-spacing:.08em;
}
.lb-x{
  position:absolute; top:2px; right:4px; font-family:var(--serif); font-size:22px;
  line-height:1; padding:8px 12px; background:none; border:none;
  color:inherit; opacity:.55; cursor:pointer;
}
.lb-tabs{ display:flex; gap:6px; justify-content:center; margin:2px 0 10px; }
.lb-tab{
  font-family:var(--serif); font-size:12px; letter-spacing:.12em; padding:5px 10px;
  border-radius:999px; border:1px solid rgba(240,230,210,.28);
  background:none; color:inherit; opacity:.65; cursor:pointer;
}
.lb-tab.on{ opacity:1; border-color:var(--accent); color:var(--accent); }
.lb-list{ margin:6px 0 4px; padding:0; list-style:none; font-size:12.5px; text-align:left;
  overflow-y:auto; flex:1 1 auto; min-height:0; -webkit-overflow-scrolling:touch; }
.lb-list li{ display:flex; justify-content:space-between; gap:10px; padding:3px 0;
  border-bottom:1px dashed rgba(240,230,210,.12); }
.lb-list li.me{ color:var(--accent); border-bottom-color:rgba(226,96,63,.4); }
.lb-mine{ margin:8px 0 12px; padding-top:8px; border-top:1px dashed rgba(240,230,210,.2);
  font-size:12.5px; display:flex; justify-content:space-between; gap:10px; }
.lb-btn{
  font-family:var(--serif); font-size:13px; letter-spacing:.2em; padding:9px 16px;
  border-radius:999px; color:var(--paper); background:none;
  border:1px solid rgba(240,230,210,.35); cursor:pointer; margin:2px 4px;
}

/* —— 首次开声引导（仅触屏且音频未解锁时露出） —— */
.unlock{
  position:fixed; left:50%; top:26%; transform:translateX(-50%);
  padding:12px 26px; border-radius:999px;
  font-size:15px; letter-spacing:.2em;
  color:#1b0f0a; background:var(--accent);
  box-shadow:0 0 30px rgba(226,96,63,.55);
  cursor:pointer; z-index:5; white-space:nowrap;
  animation:pulse 1.8s ease-in-out infinite;
  transition:opacity .5s ease;
}
.unlock.gone{ opacity:0; pointer-events:none; }
@keyframes pulse{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%{ transform:translateX(-50%) scale(1.06); }
}

/* —— 底部计数行 —— */
.stats{
  position:fixed; left:50%; bottom:calc(8px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  font-size:11.5px; letter-spacing:.14em;
  color:rgba(240,230,210,.55); white-space:nowrap;
  pointer-events:none; z-index:2;
}
.stats b{ font-weight:700; color:rgba(255,207,158,.72); font-variant-numeric:tabular-nums; display:inline-block; }
/* 每段连同它后面的间隔点是一个整体：窄屏换行时数字不会跟单位拆开，
   行首也不会孤零零冒出一个「·」 */
.stats span{ white-space:nowrap; }
.stats .pop{ animation:statpop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes statpop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.45); color:#ff8a50; } 100%{ transform:scale(1); } }
/* 全站数字变动得频繁，只闪一下颜色，别跟着蹦——蹦起来整行会抖 */
.stats b.flash{ animation:statflash .5s ease; }
@keyframes statflash{ 0%{ color:#ff8a50; text-shadow:0 0 12px rgba(255,138,80,.8); } 100%{} }

/* —— 左下注脚 —— */
.lore{
  position:fixed;
  left:calc(22px + env(safe-area-inset-left));
  bottom:calc(22px + env(safe-area-inset-bottom));
  pointer-events:none; z-index:2;
  font-size:11.5px; letter-spacing:.24em;
  color:var(--paper); opacity:.42; line-height:2;
}

@media (max-width:640px){
  .lore{ display:none; }
  .badge{ font-size:10.5px; padding:5px 10px 5px 13px; letter-spacing:.2em; }
  .badges{ gap:7px; }
  .badge-row{ gap:6px; }
  .stats{
    left:calc(12px + env(safe-area-inset-left));
    transform:none;
    bottom:calc(14px + env(safe-area-inset-bottom));
    max-width:56vw; white-space:normal; line-height:2; text-align:left;
  }
  .hint{
    font-size:13px; letter-spacing:.14em; padding:10px 18px;
    bottom:calc(132px + env(safe-area-inset-bottom));   /* 避开右下控制区 */
  }
  .hint .snd{ display:none; }
}
/* 只放真正「更窄才需要」的收紧。⚠️ 手机通用规则一律留在上面 640px 那块：
   这一档覆盖不到主流手机（430pt 宽的 iPhone 根本不进来），
   2026-08-06 index.html 就是把 .stats/.hint 误放进同类查询，
   大屏手机上整个失效、统计行撑出了屏幕。 */
@media (max-width:400px){
  .badge-row{ gap:5px; }
  .badge-row .badge{ letter-spacing:.06em; padding:5px 8px; }
}
@media (prefers-reduced-motion:reduce){
  .hint, .unlock{ animation:none; }
}