* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #4a3728; user-select: none; touch-action: manipulation;
}

body {
  background: radial-gradient(120% 80% at 10% 0%, #fff3d6, transparent 55%),
    radial-gradient(120% 90% at 100% 100%, #dff1ff, transparent 60%),
    linear-gradient(160deg, #fff7e8, #ffeaf1 55%, #eaf6ff);
}

#app {
  /* 棋盘与提示框共用宽度：按 app 内容区实际宽度计算（100vw - 左右 padding 20px），
     不再用 94vw，避免窄屏时棋盘宽于容器而偏右 */
  --size: min(470px, calc(100vw - 20px));
  height: 100%; max-width: 520px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 10px);
  display: flex; flex-direction: column; gap: 8px;
}

.card {
  background: rgba(255, 255, 255, .9);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(120, 78, 40, .16);
}

/* ---------- 顶栏 ---------- */
.top { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.row1 { display: flex; align-items: center; gap: 8px; }
.mid { flex: 1; text-align: center; }

.level {
  font-size: 16px; font-weight: 800; color: #ff8f3f;
  white-space: nowrap;
}

.timebox { text-align: right; }
.timetxt { font-size: 12px; color: #9c8878; font-variant-numeric: tabular-nums; }
.multx { display: block; font-size: 11px; font-weight: 800; color: #ff8f3f; }

/* 第二排：动物头 / 剪影 */
.prow { display: flex; justify-content: center; gap: 6px; min-height: 24px; }
.ptoken { font-size: 22px; line-height: 1; animation: look 2.6s ease-in-out infinite; }
.ptoken.sil { filter: grayscale(1) brightness(.3); opacity: .45; animation: none; }

.mult {
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ffc247, #ff8f3f);
  padding: 4px 9px; border-radius: 999px;
  transition: transform .15s;
}
.mult.bump { transform: scale(1.25); }

/* ---------- 血量：实心 ❤ / 空心底 ---------- */
.hearts { display: flex; justify-content: center; gap: 4px; margin-top: 2px; font-size: 16px; line-height: 1; }
.hp { color: #ff5f5f; transition: transform .2s, color .2s; }
.hp.empty { color: #e6d8c6; }
.hp.hit { animation: heartbreak .45s ease-out; }
@keyframes heartbreak {
  0% { transform: scale(1); }
  35% { transform: scale(1.55) rotate(-12deg); }
  100% { transform: scale(1) rotate(-18deg); }
}

.icon {
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .9); font-size: 16px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(120, 78, 40, .16);
}

.timebar { height: 7px; border-radius: 999px; background: #f1e3d0; overflow: hidden; }
.timebar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #7fe3d4, #ffc247);
  transition: width 1s linear;
}
.timebar.low i { background: linear-gradient(90deg, #ff8f6b, #ff5f5f); }
.time { text-align: center; font-size: 11px; color: #9c8878; margin-top: 3px; }

/* ---------- 棋盘 ---------- */
.board-wrap {
  flex: 1; min-height: 0; min-width: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}

.board {
  position: relative;
  width: var(--size); height: var(--size);
  max-width: 100%;
  padding: 5px; border-radius: 20px;
  background: #efe0cb; touch-action: none; /* 底盘改为暖米色，避免白色系 */
  box-shadow: 0 10px 26px rgba(120, 78, 40, .2);
}

/* 两层：cells 在底，pieces（动物 / ✕）在上，二者网格完全重合 */
.layer {
  position: absolute; inset: 5px;
  display: grid;
  /* minmax(0,1fr)：格子永不撑破棋盘，棋盘始终严格居中 */
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  gap: 3px;
}
.pieces { pointer-events: none; } /* 点击/拖拽始终落到下层格子上 */

.cell {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  border-radius: 7px; cursor: pointer;
  overflow: hidden;
  transition: filter .12s;
}
.cell:active { filter: brightness(.94); }

/* 上层：动物与 ✕ */
.slot {
  position: relative; z-index: 6;
  display: grid; place-items: center;
  font-size: calc(var(--size) / var(--n) * .58);
  line-height: 1;
}
.slot .x {
  font-size: calc(var(--size) / var(--n) * .8);
  font-weight: 900; color: #fff; line-height: 1;
  text-shadow: 0 0 3px rgba(60, 40, 20, .28);
}

/* 动物：常态左右东张西望 */
.slot .pet { display: block; position: relative; animation: look 2.6s ease-in-out infinite; }
@keyframes look {
  0%, 100% { transform: rotate(-9deg) translateX(-4%); }
  50% { transform: rotate(9deg) translateX(4%); }
}

/* 睡觉：无操作一段时间后趴下打呼 */
.pet.sleep { animation: sleep 2.8s ease-in-out infinite !important; }
@keyframes sleep {
  0%, 100% { transform: rotate(-6deg) translateY(5%) scale(.93); }
  50% { transform: rotate(-6deg) translateY(5%) scale(1); }
}
.pet.sleep::after {
  content: '💤'; position: absolute; top: -.5em; right: -.55em;
  font-size: .42em; animation: zzz 2.8s ease-in-out infinite;
}
@keyframes zzz {
  0%, 100% { opacity: .25; transform: translateY(0) scale(.75); }
  50% { opacity: 1; transform: translateY(-.45em) scale(1); }
}

/* 沮丧：放错时垂头丧气 */
.pet.sad { animation: sad .8s ease-in-out infinite !important; filter: grayscale(.35) brightness(.9); }
@keyframes sad {
  0%, 100% { transform: translateY(9%) rotate(-5deg) scale(.94); }
  50% { transform: translateY(9%) rotate(5deg) scale(.94); }
}

/* 通关：开心放大摇晃 3 秒 */
.pet.happy {
  animation: happy .9s ease-in-out infinite !important;
  font-size: 1.12em;
}
@keyframes happy {
  0%, 100% { transform: rotate(-7deg) scale(1.12); }
  50% { transform: rotate(7deg) scale(1.12); }
}

/* ---------- 新手教学：全屏半透明遮罩 + 可操作区透出 ---------- */
.tut-veil {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: rgba(32, 20, 8, .55);
  animation: fade .25s;
}
.cell.dim { pointer-events: none; }
/* 教学遮罩 z-index 8：透出的格子与它上面的动物/叉都要更高 */
.cell.lit, .cell.target { z-index: 9; }
.slot.lit, .slot.target { z-index: 10; }
.cell.target {
  box-shadow: inset 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .45);
}

/* 提示叉：同款白色加粗，半透明 50% */
.slot.ghost::after {
  content: '✕';
  position: absolute;
  font-size: calc(var(--size) / var(--n) * .8);
  font-weight: 900; line-height: 1;
  color: rgba(255, 255, 255, .5);
  text-shadow: 0 0 3px rgba(60, 40, 20, .28);
  animation: ghostfade 1s ease-in-out forwards;
}
@keyframes ghostfade {
  0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; }
}

.paw {
  position: fixed; z-index: 15; font-size: 30px; pointer-events: none;
  animation: pawtap 3s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes pawtap {
  0%   { transform: translate(-50%, -60%) rotate(-6deg); }
  7%   { transform: translate(-50%, -95%) rotate(6deg); }
  14%  { transform: translate(-50%, -60%) rotate(-6deg); }
  21%  { transform: translate(-50%, -95%) rotate(6deg); }
  28%, 100% { transform: translate(-50%, -60%) rotate(-6deg); }
}

.paw-label {
  position: fixed; z-index: 15; transform: translate(-50%, 0);
  background: #fff; border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 800; color: #ff8f3f; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(120, 78, 40, .22); pointer-events: none;
  animation: floaty 1.1s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* 动物首次出现：果冻轻微抖动 */
.slot .pet.pop { animation: jelly .55s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes jelly {
  0%   { transform: scale(.35); opacity: .4; }
  30%  { transform: scale(1.16, .84); opacity: 1; }
  48%  { transform: scale(.9, 1.12); }
  64%  { transform: scale(1.07, .95); }
  82%  { transform: scale(.97, 1.02); }
  100% { transform: scale(1); }
}

/* 扩散光环 */
.ring {
  position: fixed; z-index: 14; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255, 206, 110, .95); pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ringout .55s ease-out forwards;
}
@keyframes ringout {
  from { width: 10px; height: 10px; opacity: .95; }
  to { width: 86px; height: 86px; opacity: 0; }
}

/* 闪亮小点 */
.spark {
  position: fixed; z-index: 14; width: 5px; height: 5px; border-radius: 50%;
  background: #fff6d0; box-shadow: 0 0 7px #ffd166; pointer-events: none;
  transform: translate(-50%, -50%);
  animation: sparkout .6s ease-out forwards;
}
@keyframes sparkout {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; }
}

.star {
  position: fixed; z-index: 14; font-size: 15px; pointer-events: none;
  animation: starburst .75s ease-out forwards;
}
@keyframes starburst {
  from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity: 0; }
}

.unbel {
  font-size: 32px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(135deg, #ff8f3f, #ffc247 45%, #7fe3d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 12px rgba(255, 143, 63, .18);
}
.booster { position: relative; }
.booster .n {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 999px; background: #ff5f5f; color: #fff;
  font-size: 10px; line-height: 17px; font-weight: 800;
}
.booster.empty { opacity: .45; }
.cell.ok { box-shadow: inset 0 0 0 3px #4cc38a; }
.cell.err { animation: shake .3s; box-shadow: inset 0 0 0 3px #ff6b5e; }
.cell.hint { box-shadow: inset 0 0 0 3px #ffb347; }
.cell.free { box-shadow: inset 0 0 0 3px #7fe3d4; }
/* 放大镜：可推理的格子 */
.cell.look {
  box-shadow: inset 0 0 0 3px #6fc3ff, 0 0 12px rgba(111, 195, 255, .5);
  z-index: 5; animation: pulse 1.3s ease-in-out infinite;
}
.slot.lookx::after {
  content: '✕'; position: absolute;
  font-size: calc(var(--size) / var(--n) * .8);
  font-weight: 900; line-height: 1;
  color: rgba(255, 255, 255, .5);
  text-shadow: 0 0 3px rgba(60, 40, 20, .28);
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
/* 通关庆祝时允许动物浮到相邻格子之上 */
.slot.show { z-index: 11; }

/* 错误摆放：整格泛红 + 动物变红，1 秒后消失 */
.cell.err::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(255, 62, 48, .34);
}
.slot .pet.bad {
  filter: sepia(1) saturate(6) hue-rotate(-40deg) brightness(.95);
  animation: badfade 1s ease-out forwards;
}
@keyframes badfade {
  0% { transform: scale(.5); opacity: .4; }
  20% { transform: scale(1.1); opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(.9); }
}

@keyframes pop { from { transform: scale(.4); opacity: .3; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- 底部 ---------- */
.bottom { display: flex; gap: 6px; }
.btn2 {
  flex: 1; border: none; border-radius: 14px; padding: 9px 0;
  background: #fff; font-size: 12px; font-weight: 700; color: #6b5645;
  box-shadow: 0 6px 14px rgba(120, 78, 40, .16); cursor: pointer;
  display: grid; justify-items: center; gap: 2px;
}
.btn2 i { font-style: normal; font-size: 17px; }
.btn2:active { transform: scale(.95); }
.tip {
  position: relative; z-index: 10; /* 高于教学遮罩，始终可见 */
  text-align: center; font-size: 13px; font-weight: 700; color: #5b4636;
  /* 紧贴棋盘上方，宽度与棋盘一致 */
  width: var(--size); margin: 0 auto -2px; padding: 9px 14px;
  border-radius: 13px 13px 4px 4px;
  background: #fffdf8; min-height: 0;
  box-shadow: 0 6px 14px rgba(120, 78, 40, .16);
}

/* ---------- 弹窗 ---------- */
.mask {
  /* 需高于全屏主界面(.menu, z-index 30) */
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  padding: 20px; background: rgba(60, 40, 25, .5); backdrop-filter: blur(3px);
  animation: fade .2s;
}
@keyframes fade { from { opacity: 0; } }

.panel {
  width: 100%; max-width: 340px; padding: 20px; border-radius: 22px;
  background: #fffdf8; text-align: center;
  box-shadow: 0 20px 40px rgba(80, 50, 20, .3);
  animation: rise .25s ease-out;
}
@keyframes rise { from { transform: translateY(18px) scale(.95); opacity: 0; } }

.panel h2 { margin: 6px 0 4px; font-size: 22px; }
.panel p { margin: 4px 0; font-size: 13px; color: #8a7462; }
.big { font-size: 40px; }

.rank { text-align: left; font-size: 12px; color: #6b5645; line-height: 1.9; padding-left: 18px; }
.rows { margin: 10px 0; font-size: 13px; }
.row {
  display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 10px;
}
.row:nth-child(odd) { background: #f7efe3; }
.row.me { background: linear-gradient(135deg, #ffd977, #ffab3d); color: #fff; font-weight: 700; }

.btns { display: flex; gap: 8px; margin-top: 14px; }
.btns.col { flex-direction: column; gap: 10px; }
.sub { text-align: center; font-size: 11px; color: #9c8878; margin-top: 4px; }
.title {
  font-size: 28px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(135deg, #ff8f3f, #ffc247 45%, #7fe3d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 主界面：全屏，与关卡界面互斥 ---------- */
.menu {
  position: fixed; inset: 0; z-index: 30; display: none;
  align-items: center; justify-content: center; padding: 24px; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 0%, #fffaf0 0%, #ffe8c8 42%, #ffd0b4 100%);
}
.menu.on { display: flex; animation: fade .25s; }
/* 背景柔和光斑 */
.menu::before, .menu::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(2px);
}
.menu::before {
  width: 300px; height: 300px; top: -90px; left: -70px;
  background: radial-gradient(circle, rgba(127, 227, 212, .45), transparent 70%);
}
.menu::after {
  width: 340px; height: 340px; bottom: -120px; right: -90px;
  background: radial-gradient(circle, rgba(255, 194, 71, .4), transparent 70%);
}

.menucard {
  position: relative; z-index: 1;
  width: 100%; max-width: 320px; text-align: center;
  padding: 26px 20px 20px; border-radius: 28px;
  background: rgba(255, 253, 248, .92);
  box-shadow: 0 18px 40px rgba(140, 88, 40, .22), inset 0 1px 0 #fff;
  animation: rise .3s ease-out;
}

.logo { display: flex; justify-content: center; gap: 2px; margin-bottom: 4px; }
.logo-pet {
  display: block; font-size: 40px; line-height: 1;
  animation: look 2.6s ease-in-out infinite;
  filter: drop-shadow(0 5px 6px rgba(120, 78, 40, .22));
}

.menucard .title {
  margin: 2px 0 4px; font-size: 34px; font-weight: 900; letter-spacing: 1.5px;
  -webkit-text-stroke: 0;
  text-shadow: 0 3px 0 rgba(255, 194, 71, .35);
}
.tagline { font-size: 12px; color: #a08a74; margin-bottom: 20px; }

.menubtns { display: flex; flex-direction: column; gap: 10px; }
.menubtn {
  width: 100%; border: none; border-radius: 18px; padding: 12px 0;
  display: grid; gap: 3px; cursor: pointer; font-family: inherit;
}
.menubtn .bt { font-size: 18px; font-weight: 900; letter-spacing: 1px; }
.menubtn.single { padding: 18px 0; } /* 单行主按钮加高，保持分量 */
.menubtn .bs {
  justify-self: center; font-size: 12px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.menubtn.primary {
  color: #fff;
  background: linear-gradient(135deg, #ffc247, #ff8f3f);
  box-shadow: 0 8px 0 #e8792b, 0 14px 22px rgba(232, 121, 43, .34);
}
.menubtn.primary .bs { background: rgba(255, 255, 255, .22); color: #fff8ec; }
.menubtn.ghost {
  color: #8a7462; background: #fff;
  box-shadow: 0 4px 0 #ece0cf, 0 10px 18px rgba(120, 78, 40, .12);
  font-size: 15px; font-weight: 700; padding: 14px 0;
}
.menubtn:active { transform: translateY(3px); }
.menubtn.primary:active { box-shadow: 0 5px 0 #e8792b, 0 8px 14px rgba(232, 121, 43, .3); }
.menubtn.ghost:active { box-shadow: 0 1px 0 #ece0cf; }

.menufoot { margin-top: 16px; font-size: 11px; color: #b09a84; line-height: 1.6; }
.hide { display: none !important; }
.primary {
  flex: 1; border: none; border-radius: 14px; padding: 12px 0;
  font-size: 15px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #ffc247, #ff8f3f);
}
.ghost {
  flex: 1; border: none; border-radius: 14px; padding: 12px 0;
  font-size: 15px; font-weight: 700; color: #8a7462; background: #f2e7d8; cursor: pointer;
}
.primary:active, .ghost:active { transform: scale(.97); }

.hide { display: none !important; }
/* 烟花要盖在结算 / 过关面板（.mask z-index 40）之上 */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* ===================== 多语言：切换器 ===================== */
.langsel { display: block; margin: 14px auto 2px; width: 100%; max-width: 250px; }
.langsel select {
  width: 100%; padding: 10px 34px 10px 12px; border: 1px solid #ece0cf; border-radius: 12px;
  background-color: #fffdf8; color: #5b4636; font-size: 13px; font-weight: 700; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #b09a84 50%),
    linear-gradient(135deg, #b09a84 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.lang-fab {
  flex: none; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .9); font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(120, 78, 40, .16);
}
.lang-fab:active { transform: scale(.92); }

.langpop {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px;
  background: rgba(60, 40, 25, .5); backdrop-filter: blur(3px); animation: fade .2s;
}
.langpop-card {
  width: 100%; max-width: 320px; max-height: 70vh; display: flex; flex-direction: column;
  border-radius: 22px; background: #fffdf8; overflow: hidden;
  box-shadow: 0 20px 40px rgba(80, 50, 20, .3); animation: rise .25s ease-out;
}
.langpop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; font-size: 14px; font-weight: 800; color: #5b4636;
  border-bottom: 1px solid #f1e6d6;
}
.langpop-x {
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: #f4ece0; color: #8a7462; cursor: pointer;
}
.langpop-list { overflow: auto; padding: 8px; display: grid; gap: 4px; }
.langopt {
  border: none; background: transparent; text-align: left;
  padding: 10px 12px; border-radius: 12px; font-size: 14px; color: #5b4636; cursor: pointer;
}
.langopt.on { background: linear-gradient(135deg, #ffd977, #ffab3d); color: #fff; font-weight: 800; }

/* RTL：阿拉伯语 / 乌尔都语整体右到左 */
body.rtl .row1, body.rtl .menucard, body.rtl .panel, body.rtl .tip { direction: rtl; }
body.rtl .timetxt, body.rtl .multx, body.rtl .level { direction: ltr; unicode-bidi: embed; }
body.rtl .row { flex-direction: row-reverse; }

/* ===================== 广告位 ===================== */
.adslot { display: none; }
.adslot.ad-on { display: block; }
.adslot-menu, .adslot-game {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 6px 0 calc(env(safe-area-inset-bottom) + 6px);
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 -4px 14px rgba(120, 78, 40, .1);
}
.adslot-menu { z-index: 31; }
.adslot-game { z-index: 20; }
.adslot .adbox { min-height: 50px; }
/* 主界面时隐藏关卡广告，反之亦然 */
body.at-menu #ad-game.ad-on { display: none; }
body:not(.at-menu) #ad-menu.ad-on { display: none; }
/* 底部有广告时给内容区留位，避免遮住操作按钮 */
body.has-ad #app { padding-bottom: calc(env(safe-area-inset-bottom) + 64px); }

/* ===================== 无 JS / 爬虫可读正文 ===================== */
.seoonly { max-width: 560px; margin: 0 auto; padding: 20px; line-height: 1.8; color: #4a3728; }
.seoonly h1 { font-size: 24px; }
.seoonly h2 { font-size: 18px; margin-top: 18px; }