/* ==========================================================================
   益智小游戏 · 统一游戏外壳  skin.css
   --------------------------------------------------------------------------
   只负责「外观一致性」，不改动任何游戏逻辑。
   分类主题色 / 底纹 / 图标徽章 / 返回药丸 / 底部导航 都在这里。
   ========================================================================== */

:root{
  --g-cream:#FFFDFA;
  --g-card:#FFFFFF;
  --g-text:#2D3436;
  --g-muted:#9aa0a6;
  --g-line:rgba(45,52,54,.07);
  --g-shadow:0 6px 16px rgba(45,52,54,.08);
  --g-shadow-hi:0 12px 26px rgba(45,52,54,.14);
  --g-accent:#FF9F43;
  --g-tint:rgba(255,159,67,.16);
  --g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%232D3436'%20stroke-opacity='.055'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2020h.01M60%2020h.01M20%2060h.01M60%2060h.01'/%3E%3Cpath%20d='M40%2012l2.2%205.4%205.8.5-4.4%203.8%201.3%205.7L40%2024.5l-4.9%202.9%201.3-5.7-4.4-3.8%205.8-.5z'/%3E%3Cpath%20d='M14%2042h12M66%2042h-12M40%2070v-6'/%3E%3Ccircle%20cx='40'%20cy='42'%20r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. 九大分类主题：主色 + 淡色底 + 专属底纹
   （同时覆盖各页自带的 --accent，保证分类内所有游戏视觉统一）
   -------------------------------------------------------------------------- */
html[data-cat="puzzle"]  { --g-accent:#FF9F43; --g-tint:rgba(255,159,67,.16);  --accent:#FF9F43; }
html[data-cat="casual"]  { --g-accent:#FF6B9D; --g-tint:rgba(255,107,157,.16); --accent:#FF6B9D; }
html[data-cat="match"]   { --g-accent:#A55EEA; --g-tint:rgba(165,94,234,.16);  --accent:#A55EEA; }
html[data-cat="action"]  { --g-accent:#1DD1A1; --g-tint:rgba(29,209,161,.16);  --accent:#1DD1A1; }
html[data-cat="shooter"] { --g-accent:#FF6B6B; --g-tint:rgba(255,107,107,.16); --accent:#FF6B6B; }
html[data-cat="board"]   { --g-accent:#576574; --g-tint:rgba(87,101,116,.16);  --accent:#576574; }
html[data-cat="strategy"]{ --g-accent:#54A0FF; --g-tint:rgba(84,160,255,.16);  --accent:#54A0FF; }
html[data-cat="word"]    { --g-accent:#2ECC71; --g-tint:rgba(46,204,113,.16);  --accent:#2ECC71; }
html[data-cat="sim"]     { --g-accent:#E1B12C; --g-tint:rgba(225,177,44,.16);  --accent:#E1B12C; }

/* 分类专属底纹：80×80 无缝 tile，用该类别的游戏元素做线稿（低透明度） */
html[data-cat="puzzle"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%23FF9F43'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M30%2012h10v5a5%205%200%201%200%2010%200v-5h10v10h5a5%205%200%201%201%200%2010h-5v10H50v-5a5%205%200%201%200-10%200v5H30V32h-5a5%205%200%201%201%200-10h5z'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="casual"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%23FF6B9D'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='26'%20cy='24'%20r='9'/%3E%3Cpath%20d='M26%2033v12'/%3E%3Cpath%20d='M23%2047h6'/%3E%3Ccircle%20cx='62'%20cy='58'%20r='7'/%3E%3Cpath%20d='M62%2065v9'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="match"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%23A55EEA'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M26%2014l12%2012-12%2012-12-12z'/%3E%3Cpath%20d='M58%2042l12%2012-12%2012-12-12z'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="action"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%231DD1A1'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2018l13%2013-13%2013'/%3E%3Cpath%20d='M36%2018l13%2013-13%2013'/%3E%3Cpath%20d='M44%2050l13%2013-13%2013'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="shooter"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%23FF6B6B'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='30'%20cy='30'%20r='12'/%3E%3Ccircle%20cx='30'%20cy='30'%20r='3.5'/%3E%3Cpath%20d='M30%2012v6M30%2042v6M12%2030h6M42%2030h6'/%3E%3Ccircle%20cx='64'%20cy='64'%20r='8'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="board"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%23576574'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2016h48M16%2040h48M16%2064h48M16%2016v48M40%2016v48M64%2016v48'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="strategy"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%2354A0FF'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M28%2014v52'/%3E%3Cpath%20d='M28%2018h26l-7%209%207%209H28z'/%3E%3Cpath%20d='M18%2070h48'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="word"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%232ECC71'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2062L36%2018l14%2044'/%3E%3Cpath%20d='M27%2048h18'/%3E%3Cpath%20d='M62%2058h10M67%2053v10'/%3E%3C/g%3E%3C/svg%3E");}
html[data-cat="sim"]{--g-art:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2080%2080'%3E%3Cg%20fill='none'%20stroke='%23E1B12C'%20stroke-opacity='.10'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2040l18-14%2018%2014'/%3E%3Cpath%20d='M25%2038v24h26V38'/%3E%3Cpath%20d='M38%2062V48h8v14'/%3E%3Cpath%20d='M14%2070h52'/%3E%3C/g%3E%3C/svg%3E");}

/* 页面底色 + 分类底纹（每类的纹样都取自该类的游戏元素）
   底纹默认按 340px 平铺时线条会被放大到 ~7px 粗、显得很重，
   这里缩到 200px（线条约 4px），并叠一层 62% 白色遮罩把纹样整体洗淡，
   想再淡/再浓只调 rgba 的 .62 一个数字即可。 */
body{
  background-color:var(--g-cream)!important;
  background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),var(--g-art)!important;
  background-repeat:repeat!important;
  background-size:auto,200px auto!important;
  background-position:center top!important;
  background-attachment:fixed!important;
}

/* --------------------------------------------------------------------------
   2. 返回分类 → 药丸按钮
   -------------------------------------------------------------------------- */
.back{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px;
  width:auto!important;
  max-width:none!important;
  align-self:center!important;
  min-height:38px;
  padding:8px 16px!important;
  border-radius:999px!important;
  background:var(--g-card)!important;
  color:var(--g-accent)!important;
  border:1px solid var(--g-line);
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.3px;
  line-height:1;
  text-decoration:none!important;
  box-shadow:var(--g-shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
@media(hover:hover){
  .back:hover{ transform:translateY(-2px)!important; box-shadow:var(--g-shadow-hi); }
}
.back:active{ transform:translateY(0)!important; }

/* --------------------------------------------------------------------------
   3. 标题图标徽章 + 分类徽标
   -------------------------------------------------------------------------- */
.g-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:1.6em!important;
  height:1.6em!important;
  margin:0 .34em 0 0!important;
  padding:0!important;
  border-radius:50%!important;
  background:var(--g-tint)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 3px 9px rgba(45,52,54,.10);
  font-size:.78em!important;
  line-height:1!important;
  vertical-align:-.32em;
  flex:none;
}
.g-cat{
  display:inline-block;
  margin-left:.7em;
  padding:.42em .85em;
  border-radius:999px;
  background:var(--g-tint);
  color:var(--g-accent);
  font-size:.44em;
  font-weight:700;
  letter-spacing:.8px;
  line-height:1;
  vertical-align:.5em;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);
}

/* --------------------------------------------------------------------------
   4. HUD 小图标（分数 / 时间 / 生命…）
   -------------------------------------------------------------------------- */
.g-ico{
  display:inline-block;
  margin-right:.32em;
  font-size:1.02em;
  line-height:1;
  transform:translateY(.03em);
}

/* --------------------------------------------------------------------------
   5. 底部导航：上一款 / 分类目录 / 下一款
   -------------------------------------------------------------------------- */
#g-nav{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  max-width:760px;
  margin:24px auto 0;
}
#g-nav .g-nb{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:9px 16px;
  border-radius:999px;
  background:var(--g-card);
  color:var(--g-text);
  border:1px solid var(--g-line);
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  text-decoration:none!important;
  box-shadow:var(--g-shadow);
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease;
}
#g-nav .g-nb .g-nbt{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:8.5em;
}
#g-nav .g-nb.g-home{ color:var(--g-accent); }
#g-nav .g-nb[aria-disabled="true"]{ opacity:.36; pointer-events:none; }
@media(hover:hover){
  #g-nav .g-nb:hover{ transform:translateY(-2px); box-shadow:var(--g-shadow-hi); color:var(--g-accent); }
}
#g-nav .g-nb:active{ transform:translateY(0); }

/* 窄屏：上一款 / 下一款 并排一行，分类目录独占一行居中，避免挤成三行 */
@media(max-width:639px){
  #g-nav{gap:8px;}
  #g-nav > .g-nb{ flex:1 1 0; min-width:0; max-width:none; justify-content:center; padding:9px 12px; }
  #g-nav > .g-nb.g-home{ order:3; flex:1 0 100%; font-size:13px; }
}

#g-foot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  max-width:760px;
  margin:12px auto 20px;
}
#g-foot .g-nb,
.g-full{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:7px 15px;
  border-radius:999px;
  background:transparent;
  color:var(--g-muted);
  border:1px solid var(--g-line);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  cursor:pointer;
  text-decoration:none!important;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
@media(hover:hover){
  #g-foot .g-nb:hover,
  .g-full:hover{ color:var(--g-accent); background:var(--g-card); transform:translateY(-2px); }
}

/* 全屏播放时收起导航，把画面让给游戏 */
html.g-fs #g-nav,
html.g-fs #g-foot,
html.g-fs .back,
html.g-fs .sub,
html.g-fs .hint{ display:none!important; }
html.g-fs body{ padding-top:10px!important; }

/* --------------------------------------------------------------------------
   6. 首页 / 分类页（九宫格）修正
   这两类页面的卡片是 aspect-ratio:1/1，子项默认 min-width:auto 会把
   grid 轨道撑得比屏幕还宽（手机上会出现横向滚动），这里统一收住。
   只作用于 .hub，游戏页里的 .grid 棋盘不受影响。
   -------------------------------------------------------------------------- */
body.hub .grid > *{ min-width:0; }
body.hub .grid{ gap:clamp(8px,2.6vw,16px); }

@media(max-width:560px){
  body.hub .grid .cell{ padding:9px; gap:5px; }
  body.hub .grid .cell .icon-wrap{
    width:clamp(34px,26%,58px);
    height:clamp(34px,26%,58px);
  }
  body.hub .grid .cell .icon-wrap svg{ width:64%; height:64%; }
  body.hub .grid .cell .name{ font-size:clamp(12px,3.4vw,17px); }
  body.hub .grid .cell .count,
  body.hub .grid .cell .go,
  body.hub .grid .cell .desc{ font-size:clamp(10px,2.6vw,12px); }
}

/* 工具条太挤就换个行，别顶出屏幕 */
.panel > .bar,
.panel > .toolbar{ flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   7. 焦点态与细节统一
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--g-accent);
  outline-offset:2px;
}
button,select,input,textarea{ font-family:inherit; }

@media(prefers-reduced-motion:reduce){
  .back,#g-nav .g-nb,#g-foot .g-nb,.g-full{ transition:none!important; }
}

/* --------------------------------------------------------------------------
   9. 多语言切换器（i18n.js 生成）+ 站点页脚
   -------------------------------------------------------------------------- */
/* 语言切换器：放在页面最底部，走文档流 ——
   悬浮在右上角时会压住 HUD（分数/状态/标题右侧），不如沉到底部干干净净。
   body 是纵向 flex 容器时 flex:0 0 auto 保证它排在页脚之后、紧贴页面最底行。 */
#pp-switch{
  position:relative;
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  width:100%;
  margin:0 auto;
  padding:2px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  font-family:inherit;
}
#pp-switch .pp-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--g-text);
  border:1px solid var(--g-line);
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--g-shadow);
  backdrop-filter:blur(6px);
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}
#pp-switch .pp-btn::after{
  content:"";
  width:0;height:0;
  margin-left:2px;
  border:4px solid transparent;
  border-top-color:currentColor;
  transform:translateY(2px);
  opacity:.6;
}
@media(hover:hover){
  #pp-switch .pp-btn:hover{ transform:translateY(-2px); box-shadow:var(--g-shadow-hi); color:var(--g-accent); }
}
#pp-switch .pp-menu{
  position:absolute;
  /* 按钮沉到底部了，菜单只能往上弹，否则会掉出视口 */
  bottom:calc(100% - 4px);
  left:50%;
  transform:translateX(-50%);
  display:none;
  min-width:132px;
  padding:5px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--g-line);
  box-shadow:var(--g-shadow-hi);
}
#pp-switch.open .pp-menu{ display:block; }
#pp-switch .pp-item{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  padding:9px 11px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--g-text);
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-align:left;
  cursor:pointer;
}
#pp-switch .pp-item:hover{ background:var(--g-tint); color:var(--g-accent); }
#pp-switch .pp-item.on{ background:var(--g-tint); color:var(--g-accent); }

/* 站点页脚 */
#pp-foot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  max-width:760px;
  margin:22px auto 10px;
  color:var(--g-muted);
  font-size:12px;
  line-height:1.6;
  text-align:center;
}
#pp-foot b{ color:var(--g-text); font-weight:700; }
#pp-foot .pp-dot{ opacity:.5; }

/* 全屏时收起切换器，把画面让给游戏 */
html.g-fs #pp-switch{ display:none!important; }

/* 超小屏：切换器别压住标题 */
@media(max-width:360px){
  #pp-switch{ padding:2px 8px calc(12px + env(safe-area-inset-bottom, 0px)); }
  #pp-switch .pp-btn{ min-height:30px; padding:6px 10px; font-size:12px; }
}

/* --------------------------------------------------------------------------
   8. 移动端点击高亮
   浏览器默认的 -webkit-tap-highlight-color 是 rgba(0,0,0,.18)：手指按下时
   会在元素上盖一层 18% 黑灰，白卡片看起来就像「背景被抠掉了」。
   该属性可继承，在 html 上关一次即可全站生效，再用 * 兜底防止局部覆盖。
   加 !important 是因为 10 个经营类游戏自己写了金色高亮（rgba(225,177,44,.3)），
   在皮肤层统一压掉，保持全站一致。
   -------------------------------------------------------------------------- */
html{ -webkit-tap-highlight-color:transparent!important; }
*,*::before,*::after{ -webkit-tap-highlight-color:transparent!important; }

/* 关掉系统灰块后有个副作用：**触摸不会再触发 :active**（Chrome/Safari 都把
   它和 tap-highlight 的实现绑在一起，实测按住 600ms 也拿不到 :active），
   所以按下反馈改由 .g-press 类显式提供，见 shell.js 第 0 节 / 各页内联脚本。
   用 filter 而不是 transform，避免和卡片自身的入场 animation 抢 transform。 */
.g-press{ filter:brightness(.955)!important; }
@media(prefers-reduced-motion:no-preference){
  .g-press .icon-wrap{ transform:scale(.96); }
}

/* --------------------------------------------------------------------------
   10. 闯关庆祝层（cheer.js）
   统一弹窗 + 战绩卡分享，100 款游戏共用一套视觉。
   -------------------------------------------------------------------------- */
.pp-cheer-mask{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(45,52,54,.52);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .26s ease;
}
.pp-cheer-mask.on{ opacity:1; }

.pp-cheer-card{
  position:relative;
  width:min(94vw,430px);
  max-height:92vh; overflow-y:auto;
  padding:24px 20px 18px;
  border-radius:28px;
  background:var(--g-card);
  box-shadow:0 26px 60px rgba(45,52,54,.34);
  text-align:center;
  transform:scale(.86) translateY(16px);
  opacity:0;
  transition:transform .3s cubic-bezier(.2,1.3,.4,1), opacity .26s ease;
}
.pp-cheer-mask.on .pp-cheer-card{ transform:none; opacity:1; }

.pp-ch-trophy{
  font-size:58px; line-height:1;
  margin:2px 0 6px;
  animation:ppBounce 1.5s ease-in-out infinite;
}
@keyframes ppBounce{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%    { transform:translateY(-11px) rotate(3deg); }
}
.pp-ch-title{
  margin:0 0 4px;
  font-size:24px; font-weight:800; letter-spacing:.5px;
  color:var(--g-text);
}
.pp-ch-sub{ margin:0 0 10px; color:var(--g-muted); font-size:13px; font-weight:700; }
.pp-ch-who{
  display:inline-block; margin:0 0 14px;
  padding:5px 14px; border-radius:999px;
  background:var(--g-tint); color:var(--g-accent);
  font-size:13px; font-weight:800; letter-spacing:.3px;
}

.pp-ch-stats{ margin:0 0 16px; }
.pp-ch-cap{
  margin-bottom:8px; color:var(--g-muted);
  font-size:11px; font-weight:800; letter-spacing:1.4px;
}
.pp-ch-row{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
}
.pp-ch-item{
  padding:11px 8px; border-radius:16px;
  background:var(--g-cream);
  box-shadow:inset 0 0 0 1px var(--g-line);
}
.pp-ch-item b{
  display:block; font-size:22px; font-weight:800;
  color:var(--g-accent); line-height:1.1;
}
.pp-ch-item span{ display:block; margin-top:3px; font-size:11px; color:var(--g-muted); font-weight:700; }

.pp-ch-acts{ display:flex; flex-direction:column; gap:9px; }
.pp-ch-more{ display:flex; gap:9px; margin-top:9px; }

.pp-ch-btn{
  min-height:48px; padding:12px 16px;
  border:none; border-radius:16px;
  background:var(--g-cream); color:var(--g-text);
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.3px;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--g-line);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.pp-ch-btn.primary{
  background:var(--g-accent); color:#fff;
  box-shadow:0 8px 20px rgba(45,52,54,.18);
  font-size:16px;
}
.pp-ch-btn.ghost{ color:var(--g-muted); }
.pp-ch-btn.mini{
  flex:1 1 0; min-height:40px; padding:9px 10px;
  font-size:13px; font-weight:700; color:var(--g-muted);
}
@media(hover:hover){
  .pp-ch-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(45,52,54,.16); }
}
.pp-ch-btn:active{ transform:translateY(1px); }

.pp-ch-x, .pp-ch-snd{
  position:absolute; top:10px;
  width:34px; height:34px; padding:0;
  border:none; border-radius:50%;
  background:var(--g-cream); color:var(--g-muted);
  font-family:inherit; font-size:15px; line-height:1;
  cursor:pointer;
}
.pp-ch-x{ right:10px; }
.pp-ch-snd{ left:10px; font-size:16px; }
.pp-ch-x:active, .pp-ch-snd:active{ filter:brightness(.94); }

@media(prefers-reduced-motion:reduce){
  .pp-cheer-card, .pp-cheer-mask{ transition:none!important; }
  .pp-ch-trophy{ animation:none!important; }
}

/* --------------------------------------------------------------------------
   11. 移动端虚拟手柄（pad.js）
   只在触摸设备出现，桌面有实体键盘时不渲染。
   -------------------------------------------------------------------------- */
#pp-pad{
  /* env() 让手柄躲开 iPhone 底部的小横条 */
  position:fixed; left:0; right:0;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  z-index:880;
  display:flex; align-items:flex-end; justify-content:center;
  gap:8px; padding:0 10px;
  pointer-events:none;
}
#pp-pad > *{ pointer-events:auto; }
.pp-pad-body{
  display:flex; align-items:flex-end; gap:14px;
  max-width:100%;
  padding:11px 13px;
  border-radius:24px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--g-line);
  box-shadow:var(--g-shadow-hi);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pp-dpad{
  display:grid;
  grid-template-columns:repeat(3,46px);
  grid-template-rows:repeat(3,46px);
  gap:5px;
}
.pp-dpad .u{ grid-area:1/2; }
.pp-dpad .l{ grid-area:2/1; }
.pp-dpad .r{ grid-area:2/3; }
.pp-dpad .d{ grid-area:3/2; }
.pp-key{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  border:none; border-radius:15px;
  background:var(--g-cream); color:var(--g-text);
  font-family:inherit; font-size:17px; font-weight:800; line-height:1;
  cursor:pointer; touch-action:none;
  box-shadow:inset 0 0 0 1px var(--g-line), 0 2px 6px rgba(45,52,54,.08);
  transition:transform .1s ease, background .1s ease;
}
.pp-key.on{ transform:scale(.92); background:var(--g-tint); color:var(--g-accent); }
.pp-acts{ display:flex; align-items:flex-end; gap:8px; }
.pp-acts .big{
  width:66px; height:66px; border-radius:50%;
  background:var(--g-tint); color:var(--g-accent);
  font-size:23px;
  box-shadow:inset 0 0 0 1px var(--g-line), 0 4px 12px rgba(45,52,54,.12);
}
.pp-acts .pp-key:not(.big){ width:52px; height:52px; border-radius:50%; font-size:19px; }
.pp-pad-tog{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  border:1px solid var(--g-line); border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--g-text);
  font-family:inherit; font-size:17px; line-height:1;
  cursor:pointer;
  box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
#pp-pad.pp-collapsed .pp-pad-body{ display:none; }
@media(max-width:400px){
  .pp-dpad{ grid-template-columns:repeat(3,42px); grid-template-rows:repeat(3,42px); }
  .pp-key{ width:42px; height:42px; }
  .pp-acts .big{ width:58px; height:58px; }
  .pp-acts .pp-key:not(.big){ width:46px; height:46px; }
}
/* 全屏时手柄让位给画面 */
html.g-fs #pp-pad{ display:none!important; }