:root{
  --gold:#ffd75e;--gold2:#f5a623;--brown:#3a2410;--wood:#8a5a2b;--wood2:#6b3f18;
  --cream:#fdf6e3;--board:#f3e0b4;--slot:#dcbe83;--evil:#d94b3a;
  --num-scale:1;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:linear-gradient(180deg,#1a0f08 0%,#3a2010 55%,#1a0f08 100%);
  font-family:'ZCOOL KuaiLe','Microsoft YaHei','PingFang SC',sans-serif;
  color:var(--cream);display:flex;align-items:center;justify-content:center;
  padding:12px;min-height:100vh;
}
.page{width:100%;max-width:560px;}

/* ---------- 顶部 HUD ---------- */
.hud{
  display:flex;align-items:center;justify-content:space-between;gap:8px 12px;
  background:linear-gradient(180deg,#8a5a2b,#6b3f18);border:4px solid var(--brown);
  border-bottom:none;border-radius:14px 14px 0 0;padding:8px 14px;
  box-shadow:inset 0 2px 0 rgba(255,215,94,.22);
}
.hgroup{display:flex;gap:16px;}
.stat{display:flex;flex-direction:column;align-items:center;line-height:1.05;min-width:48px;}
.stat span{font-size:12px;color:#ffd98a;letter-spacing:3px;}
.stat b{font-size:20px;color:#fff2c4;text-shadow:0 2px 0 rgba(0,0,0,.35);}
.stat b.bump{animation:bump .32s cubic-bezier(.2,1.6,.4,1);}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.hbtns{display:flex;gap:8px;}
.iconbtn{
  background:linear-gradient(180deg,#ffd75e,#f0a120);border:3px solid var(--brown);
  border-radius:10px;width:38px;height:36px;cursor:pointer;box-shadow:0 3px 0 var(--brown);
  display:flex;align-items:center;justify-content:center;color:#4a2c0f;padding:0;
}
.iconbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown);}
.iconbtn:disabled{opacity:.45;cursor:default;box-shadow:0 3px 0 var(--brown);transform:none;}
.iconbtn svg{width:20px;height:20px;}
/* 超级奶娃模式进行中：紫色发光 */
.iconbtn.casting{
  background:linear-gradient(180deg,#c9a2ff,#8b46d6);color:#fff;
  border-color:#3d1a66;box-shadow:0 3px 0 #3d1a66,0 0 14px rgba(180,140,255,.95);
  animation:castingPulse 1.1s ease-in-out infinite;
}
@keyframes castingPulse{
  0%,100%{box-shadow:0 3px 0 #3d1a66,0 0 10px rgba(180,140,255,.7)}
  50%{box-shadow:0 3px 0 #3d1a66,0 0 22px rgba(200,160,255,1)}
}
#btnMute .icoOff{display:none;}
#btnMute.muted .icoOn{display:none;}
#btnMute.muted .icoOff{display:block;}

/* ---------- 舞台与棋盘 ---------- */
.stage{
  position:relative;border:4px solid var(--brown);border-top:none;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#7a4a21,#5c3618);box-shadow:0 14px 34px rgba(0,0,0,.5);
  padding:10px 12px 12px;
}
.boardTitle{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 4px 9px;}
.btName{font-size:24px;color:#ffe14d;text-shadow:0 3px 0 #5c3618,0 5px 0 rgba(0,0,0,.25);letter-spacing:3px;}
.btTip{font-size:12px;color:#ffd98a;letter-spacing:1px;}
.btTip b{color:#ffe14d;}

.boardWrap{position:relative;}
.board{
  position:relative;width:100%;aspect-ratio:1/1;
  background:linear-gradient(180deg,var(--board),#e8cf9c);
  border:4px solid #5c3618;border-radius:14px;overflow:hidden;
  touch-action:none;user-select:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.12);
}
.board.shake{animation:shake .3s;}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}
}
.grid{
  position:absolute;display:grid;pointer-events:none;
}
.slot{background:var(--slot);border-radius:9px;box-shadow:inset 0 2px 4px rgba(0,0,0,.16);}

.tileLayer{position:absolute;inset:0;pointer-events:none;}
.tile{
  position:absolute;top:0;left:0;
  width:var(--cell);height:var(--cell);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),var(--bg);
  box-shadow:0 3px 0 rgba(0,0,0,.22),inset 0 0 0 2px rgba(255,255,255,.35);
  display:flex;align-items:flex-start;justify-content:center;
  transition:transform .11s ease-out;
  will-change:transform;
}
.tile.royal{
  box-shadow:0 3px 0 rgba(0,0,0,.3),0 0 0 2px #ffe14d,0 0 16px rgba(255,225,77,.8);
  animation:royalGlow 1.6s ease-in-out infinite;
}
@keyframes royalGlow{0%,100%{box-shadow:0 3px 0 rgba(0,0,0,.3),0 0 0 2px #ffe14d,0 0 14px rgba(255,225,77,.55)}50%{box-shadow:0 3px 0 rgba(0,0,0,.3),0 0 0 2px #fff3a0,0 0 26px rgba(255,225,77,1)}}
/* 奶娃占上方约 2/3，数字标签独占底部一条，互不遮挡 */
.tile .face{
  width:calc(var(--cell) * 0.82);height:calc(var(--cell) * 0.64);
  margin-top:calc(var(--cell) * 0.07);
  object-fit:contain;object-position:center bottom;pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.tile .num{
  position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  font-size:calc(15px * var(--num-scale));line-height:1;color:var(--fg);
  background:rgba(255,255,255,.78);border-radius:7px;padding:1px 6px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  white-space:nowrap;
}
/* 深色方块上的数字是米色，白色药丸会看不见 —— 换成深色半透明底 */
.tile.dark .num{background:rgba(46,26,10,.66);box-shadow:0 1px 2px rgba(0,0,0,.3);}
.tile .num.long{font-size:calc(12.5px * var(--num-scale));padding:1px 4px;}
/* 4096 顶格：金底必须配深棕字，否则米色字在金底上看不见 */
.tile.maxed .num{background:#ffe14d;color:#7a4a21;box-shadow:0 0 8px rgba(255,225,77,.9);}

/* 注意：动画只动 scale / opacity 这类独立属性，不能覆盖 JS 写好的 transform 位移 */
.tile.appear{animation:tilePop .24s cubic-bezier(.2,1.6,.4,1);}
@keyframes tilePop{0%{scale:.1;opacity:0}100%{scale:1;opacity:1}}
.tile.merged{animation:mergePop .22s cubic-bezier(.2,1.7,.4,1);}
@keyframes mergePop{0%{scale:1}45%{scale:1.28}100%{scale:1}}

/* ---------- 特效：冰冰冰（大块合成） ---------- */
.iceFx{
  position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  border-radius:0 0 12px 12px;
}
.iceFx .frost{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(165,222,255,.5),rgba(165,222,255,.06) 68%);
  animation:frostFlash 1.5s ease-out forwards;
}
@keyframes frostFlash{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
.iceFx .iceText{
  position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
  font-size:46px;letter-spacing:8px;color:#eefaff;white-space:nowrap;
  text-shadow:0 0 10px #7fd4ff,0 0 26px #4db6ff,0 3px 0 #1c6ea8;
  animation:icePop 1.6s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes icePop{
  0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  20%{transform:translate(-50%,-50%) scale(1.22);opacity:1}
  36%{transform:translate(-50%,-50%) scale(1)}
  75%{opacity:1}
  100%{transform:translate(-50%,-62%) scale(1.05);opacity:0}
}
.iceFx .flake{
  position:absolute;top:-26px;color:#dcf4ff;line-height:1;
  text-shadow:0 0 6px rgba(140,210,255,.95);
  animation:flakeFall linear forwards;
}
@keyframes flakeFall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(460px) rotate(320deg);opacity:.1}
}

/* ---------- 特效：稀有奶娃展示 ---------- */
.rareShow{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(64,32,8,.9),rgba(22,10,2,.66));
  border-radius:0 0 12px 12px;
  animation:rareVeil .35s ease-out;
}
.rareShow.fadeout{animation:rareFade .45s ease-in forwards;}
@keyframes rareVeil{from{opacity:0}to{opacity:1}}
@keyframes rareFade{to{opacity:0}}
.rareShow .rareImg{
  width:168px;height:168px;object-fit:contain;
  filter:drop-shadow(0 0 30px rgba(255,215,94,.95));
  animation:rarePop .6s cubic-bezier(.2,1.6,.4,1);
}
.rareShow .rareLabel{font-size:30px;color:#ffe14d;margin-top:12px;text-shadow:0 3px 0 #7a4a21;letter-spacing:4px;}
.rareShow .rareTag{font-size:15px;color:#ff9d3d;margin-top:5px;letter-spacing:7px;}
@keyframes rarePop{0%{transform:scale(0) rotate(-14deg)}100%{transform:scale(1) rotate(0)}}

/* ---------- 弹层 ---------- */
.overlay{
  position:absolute;inset:-10px -12px -12px;display:flex;align-items:center;justify-content:center;
  background:rgba(22,11,3,.6);border-radius:0 0 12px 12px;z-index:5;padding:12px;
}
.overlay[style*="round"]{}
#ovStart{background:radial-gradient(ellipse at 50% 40%,#5c3618 0%,#150a04 78%);}
.hidden{display:none!important;}
.card{
  background:linear-gradient(180deg,#8a5a2b,#6b3f18);border:3px solid var(--brown);
  border-radius:18px;padding:18px 22px;text-align:center;max-width:94%;max-height:98%;
  overflow:auto;box-shadow:0 10px 28px rgba(0,0,0,.5);
}
h1{font-size:32px;color:#ffe14d;text-shadow:0 3px 0 #7a4a21,0 7px 0 rgba(0,0,0,.28);line-height:1.15;letter-spacing:2px;}
/* 弹层标题统一降级为 h2（SEO：全页只保留开始界面一个 h1），样式与 h1 一致 */
.card h2{font-size:32px;color:#ffe14d;text-shadow:0 3px 0 #7a4a21,0 7px 0 rgba(0,0,0,.28);line-height:1.15;letter-spacing:2px;}
.sub{font-size:14px;color:#ffe9b8;margin-top:8px;}
.row{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap;align-items:center;}

.startCard{max-width:400px;}
.startHero{display:flex;flex-direction:column;align-items:center;}
.heroImg{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 0 26px rgba(255,225,77,.75));animation:float 2.6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.startTitle{font-size:38px;letter-spacing:5px;margin-top:2px;}
.startSub{font-size:13px;color:#ffd98a;margin-top:6px;letter-spacing:1px;}
.rules{list-style:none;text-align:left;font-size:13px;color:#ffefc9;margin:12px auto 14px;max-width:320px;line-height:1.85;}
.rules li::before{content:'· ';color:#ffe14d;font-weight:bold;}
.rules b{color:#ffe14d;}

.winHero{display:flex;flex-direction:column;align-items:center;position:relative;}
.winImg{width:160px;height:160px;object-fit:contain;filter:drop-shadow(0 0 30px rgba(255,225,77,.9));animation:rarePop .7s cubic-bezier(.2,1.6,.4,1);}
.winTag{position:absolute;top:2px;right:-6px;background:linear-gradient(180deg,#ffe14d,#f5a623);color:#4a2c0f;border:3px solid var(--brown);border-radius:10px;padding:2px 10px;font-size:17px;letter-spacing:3px;transform:rotate(12deg);box-shadow:0 4px 0 var(--brown);}
@keyframes rarePop{0%{transform:scale(0) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}

/* 奶娃大笑逐帧图：sheet 是 2880×192 共 20 帧（每帧 144×192，比例 3:4）。
   框的宽高必须等于「单帧」的比例，否则角色会被裁掉一半。 */
.laughBox{
  width:120px;height:160px;margin:10px auto 2px;
  background-image:url('assets/laugh-sheet2.webp');
  background-size:2400px 320px;animation:laughplay 1.8s steps(20) infinite;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));
}
@keyframes laughplay{from{background-position:0 0}to{background-position:-2400px 0}}

/* ---------- 图鉴 ---------- */
.dexCard{max-width:460px;width:100%;padding:14px 18px;}
.dexCard h1{font-size:23px;}
.dexGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:9px auto 2px;}
.dexCell{background:rgba(0,0,0,.22);border:2px solid #7a4a21;border-radius:11px;padding:5px 2px 4px;text-align:center;}
.dexCell img{width:100%;max-width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));}
.dexCell .nm{font-size:11px;color:#ffe9b8;margin-top:2px;line-height:1.2;}
.dexCell .vv{font-size:11px;color:#ffd75e;}
.dexCell.locked img{filter:grayscale(1) brightness(.42);opacity:.75;}
.dexCell.locked .nm,.dexCell.locked .vv{color:#9c8661;}
.dexCard .setWarn{margin:6px 0 0;}

/* ---------- 按钮 ---------- */
.bigbtn{
  font-family:inherit;font-size:20px;letter-spacing:4px;color:#4a2c0f;
  background:linear-gradient(180deg,#ffe14d,#f5a623);border:3px solid #7a4a21;
  border-radius:14px;padding:10px 30px;cursor:pointer;box-shadow:0 5px 0 #7a4a21;
  transition:transform .06s;
}
.bigbtn:active{transform:translateY(4px);box-shadow:0 1px 0 #7a4a21;}
.bigbtn:hover{filter:brightness(1.06);}
.smallbtn{
  font-family:inherit;font-size:16px;color:#4a2c0f;background:linear-gradient(180deg,#ffe9a0,#f5a623);
  border:3px solid #7a4a21;border-radius:12px;padding:8px 20px;cursor:pointer;box-shadow:0 4px 0 #7a4a21;
}
.smallbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a4a21;}
.smallbtn.danger{background:linear-gradient(180deg,#ff9d8a,#d94b3a);color:#fff;border-color:#7a1a10;box-shadow:0 4px 0 #7a1a10;}
.smallbtn.danger:active{box-shadow:0 1px 0 #7a1a10;}
.smallbtn:disabled{opacity:.5;cursor:default;transform:none;}

/* ---------- 设置 ---------- */
.setWarn{font-size:12px;color:#ffd0c8;line-height:1.6;margin:10px 0 4px;}
.setDivider{border-top:1px solid rgba(122,74,33,.7);margin:14px 0 10px;}
.setCard{min-width:min(400px,86vw);}
.setRow{margin:16px 0 6px;text-align:left;}
.setLabel{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;color:#ffefc9;margin-bottom:8px;}
.setVal{font-size:14px;color:#ffe14d;min-width:52px;text-align:right;}
.setRow input[type=range]{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;border-radius:8px;
  background:#3a2410;border:2px solid #7a4a21;outline:none;cursor:pointer;
}
.setRow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#ffe14d,#f5a623);border:3px solid #4a2c0f;
  box-shadow:0 2px 0 rgba(0,0,0,.4);cursor:pointer;
}
.setRow input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#ffd75e;border:3px solid #4a2c0f;box-shadow:0 2px 0 rgba(0,0,0,.4);
}

/* ---------- 提示与致谢 ---------- */
.hint{text-align:center;font-size:12px;color:#cbb489;margin-top:10px;line-height:1.8;}
.credits{margin-top:14px;padding-top:10px;border-top:1px solid rgba(203,180,137,.25);text-align:center;}
.creditLine{font-size:11px;color:#a8906a;line-height:1.9;}
.creditLine b{color:#ffd75e;font-size:13px;letter-spacing:1px;}
.creditLine a{color:#d4b784;text-decoration:none;border-bottom:1px dotted #7a6543;}
.creditLine a:hover{color:#ffe14d;border-bottom-color:#ffe14d;}
kbd{
  background:#6b4226;border:1px solid #3a2410;border-bottom-width:3px;border-radius:5px;
  padding:1px 6px;font-family:inherit;font-size:11px;color:#ffe9b8;
}

@media (max-width:480px){
  .page{max-width:100%;}
  .stage{padding:8px 9px 10px;}
  .overlay{inset:-8px -9px -10px;}
  .hud{padding:6px 9px;gap:4px 8px;}
  .stat span{font-size:10px;letter-spacing:1px;}
  .stat b{font-size:15px;}
  .stat{min-width:38px;}
  .hgroup{gap:9px;}
  .hbtns{gap:5px;}
  .iconbtn{width:31px;height:29px;border-width:2px;}
  .iconbtn svg{width:15px;height:15px;}
  .btName{font-size:18px;letter-spacing:1px;}
  .btTip{font-size:10px;}
  .card{padding:14px 14px;}
  h1{font-size:22px;}
  .startTitle{font-size:26px;letter-spacing:3px;}
  .heroImg{width:104px;height:104px;}
  .winImg{width:112px;height:112px;}
  .bigbtn{font-size:15px;padding:8px 20px;letter-spacing:2px;}
  .smallbtn{font-size:12px;padding:6px 14px;}
  .dexGrid{grid-template-columns:repeat(4,1fr);gap:5px;}
  .dexCell img{max-width:40px;height:40px;}
  .dexCell .nm,.dexCell .vv{font-size:9px;}
  .rules{font-size:11px;line-height:1.6;margin:8px auto 10px;}
  .laughBox{width:90px;height:120px;background-size:1800px 240px;}
  @keyframes laughplay{from{background-position:0 0}to{background-position:-1800px 0}}
}
@media (max-height:640px){
  .heroImg{width:96px;height:96px;}
  .rules{line-height:1.5;margin:8px auto 10px;}
  .card{padding:12px 16px;}
}