/* ============================================================
 *  奶蛙消消乐 · 样式
 *  整页永远不滚动，舞台（棋盘）按可用空间算成正方形，由 game.js 的 fit() 设置尺寸。
 *
 *  布局档位：
 *   · 桌面 / 平板（≥720px 宽）      左边舞台、右边 316px 侧栏
 *   · 竖屏手机（<720px 且高 >520px）  上下排列：顶部紧凑状态栏（标题 + 3 个 44×44 小按钮 / 4 项数据 / 目标进度），
 *                                    下面是占满宽度（左右各 8px）的棋盘，页脚在最下；≤359px 再收一档
 *   · 横屏手机 / 很矮的窗口（高 ≤520px）  左右布局，侧栏压缩成图标按钮一行；高 ≤360px 再收紧
 *  触控：按钮 ≥44×44、间距 ≥6px；安全区用 env(safe-area-inset-*)；hover 效果只在支持 hover 的设备上生效。
 * ============================================================ */
:root {
  --ink: #4a3325;
  --ink-soft: #8a7566;
  --cream: #fff7ec;
  --brand: #ff6b6b;
  --brand-dark: #e14b4b;
  --card: rgba(255, 255, 255, .74);
  --shadow: 0 18px 50px rgba(126, 84, 44, .18);
  --gold: #e79a1f;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html {
  overflow: hidden; overscroll-behavior: none;       /* 整页不滚动、不橡皮筋、不下拉刷新 */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }   /* 长按图片不弹菜单、不能拖走 */
body {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%;   /* 钉住页面：iOS 上不会被拖动回弹 */
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  background:
    radial-gradient(1200px 700px at 8% -12%, #ffe9bd 0%, transparent 60%),
    radial-gradient(900px 600px at 104% -6%, #d5f0ff 0%, transparent 55%),
    radial-gradient(1000px 780px at 50% 118%, #ffdbe6 0%, transparent 62%),
    #fff9f1;
  background-attachment: fixed;
  overflow: hidden;                       /* 整页不滚动 */
  overscroll-behavior: none;              /* 禁止下拉刷新 / 回弹 */
  -webkit-user-select: none; user-select: none;   /* 禁止误选文字 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;             /* 禁止双击缩放 */
}
button, a { font-family: inherit; }

/* ---------------- 布局 ---------------- */
.app {
  height: 100vh; height: 100dvh;                       /* dvh 跟随手机浏览器地址栏的收放；不支持时退回 vh */
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  /* 刘海 / 底部横条：四边都避开安全区（不支持 env() 的浏览器沿用上一行） */
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.layout {
  display: flex; gap: 24px; align-items: stretch;
  width: 100%; height: 100%;
  max-width: 1180px; max-height: 840px;
}
.stage-wrap { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; }
.stage {
  position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0; margin: auto;   /* 宽高由 game.js 按可用空间算成正方形 */
  width: 320px; height: 320px; max-width: 100%; max-height: 100%;   /* 即使 JS 还没来得及重算，也不会撑出容器 */
  border-radius: 24px;
  background: #fff3df;
  box-shadow: 0 26px 64px rgba(122, 80, 40, .3);
  overflow: hidden;
  touch-action: none;
}
#cv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }

.side { flex: 0 0 316px; width: 316px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* ---------------- 侧栏（玻璃卡片） ---------------- */
.panel {
  flex: 1 1 auto; min-height: 0;
  display: grid; align-content: start; gap: 14px;
  grid-template-areas: "head" "stats" "goal" "btns" "legend";
  padding: 22px 20px;
  border-radius: 24px;
  background: var(--card);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--shadow);
  overflow-y: auto; scrollbar-width: none;
}
.panel::-webkit-scrollbar { display: none; }
.head { grid-area: head; display: flex; align-items: center; gap: 12px; }
.logo { width: 46px; height: 46px; flex: none; object-fit: contain; animation: wobble 2.4s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(122, 80, 40, .25)); }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(7deg) scale(1.06); } }
.titles { min-width: 0; }
h1 {
  margin: 0; font-size: 26px; line-height: 1.15; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(100deg, #ff7a59, #ff4d6d 55%, #b13bff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sub { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

.stats { grid-area: stats; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  border-radius: 16px; background: rgba(255, 255, 255, .82);
  padding: 10px 14px 9px; box-shadow: 0 2px 0 rgba(126, 84, 44, .06);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.lbl { font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }
.stat b { font-size: 26px; line-height: 1.15; font-weight: 900; font-variant-numeric: tabular-nums; transform-origin: left center; }   /* 弹跳动画从左边缘放大，数字不会左右乱窜 */
.stat b.gold, .gold { color: var(--gold); }
#movesCard.low b { color: var(--brand-dark); animation: throb .7s ease-in-out infinite; }
@keyframes throb { 50% { transform: scale(1.14); } }
.stat b.bump { animation: bump .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

.goal { grid-area: goal; border-radius: 16px; background: rgba(255, 255, 255, .82); padding: 10px 14px 12px; }
.goal-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.goal-text { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { height: 12px; border-radius: 99px; background: #f2e3cf; overflow: hidden; box-shadow: inset 0 1px 2px rgba(126, 84, 44, .18); }
.bar i {
  display: block; height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, #ffb23c, #ff6b6b 60%, #ff4d9a);
  transition: width .45s cubic-bezier(.3, 1.3, .5, 1);
  position: relative;
}
.bar i::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.bar.done i { background: linear-gradient(90deg, #7be06a, #34c07a); }

.btns { grid-area: btns; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; text-decoration: none; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 9px 12px; border-radius: 14px;
  border: 1px solid rgba(126, 84, 44, .16); background: rgba(255, 255, 255, .9); color: var(--ink);
  font-size: 14px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(126, 84, 44, .1);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
@media (hover: hover) { .btn:hover { transform: translateY(-1px); filter: brightness(1.03); } }   /* 触屏上不留「悬停」残影 */
.btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 rgba(126, 84, 44, .1); }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.btn.primary {
  color: #fff; border-color: transparent; text-shadow: 0 1px 0 rgba(150, 30, 30, .35);
  background: linear-gradient(135deg, #ff8a5b, #ff6b6b 55%, #e14b4b);
  box-shadow: 0 4px 0 #c43a3a, 0 10px 18px rgba(225, 75, 75, .28);
}
.btn.primary:active { box-shadow: 0 1px 0 #c43a3a, 0 4px 8px rgba(225, 75, 75, .25); }
.btn.big { min-height: 50px; font-size: 17px; padding: 11px 26px; }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--ink-soft); font-size: 13px; min-height: 34px; text-decoration: underline; text-underline-offset: 3px; }
#btnHome { grid-column: 1 / -1; }

/* 玩法图例 */
.legend { grid-area: legend; border-radius: 16px; background: rgba(255, 255, 255, .6); padding: 12px 14px; display: grid; gap: 9px; }
.lg-title { font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); font-weight: 800; }
.lg-row { display: flex; align-items: center; gap: 10px; }
.lg-row p { margin: 0; font-size: 12.5px; line-height: 1.35; }
.lg-row p b { font-weight: 900; color: var(--brand-dark); margin-right: 4px; }
.lg-row p span { color: var(--ink-soft); font-size: 12px; }
.mini { width: 40px; height: 40px; flex: none; }
.lg-tip { font-size: 12px; line-height: 1.5; color: var(--ink-soft); border-top: 1px dashed rgba(126, 84, 44, .2); padding-top: 8px; }

.foot { text-align: center; font-size: 12px; color: var(--ink-soft); line-height: 1.6; padding: 0 6px; }

/* ---------------- 舞台上的浮层 / 提示 ---------------- */
.loading {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--ink-soft); background: #fff3df; z-index: 5;
  transition: opacity .35s ease;
}
.loading.hide { opacity: 0; pointer-events: none; }

.toast {
  position: absolute; left: 50%; top: 5%; z-index: 4; max-width: 88%;
  transform: translate(-50%, -14px) scale(.92); opacity: 0; pointer-events: none; text-align: center;
  padding: 9px 18px; border-radius: 99px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(122, 80, 40, .22);
  font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--ink);
  transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }

.overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 243, 223, .72);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.ov-card {
  width: min(88%, 380px); text-align: center;
  padding: 18px 22px 20px; border-radius: 24px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 22px 60px rgba(122, 80, 40, .32);
  transform: scale(.7) translateY(30px); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  display: flex; flex-direction: column; align-items: center;
}
.overlay.show .ov-card { transform: scale(var(--fit, 1)); }     /* --fit 由 game.js 按舞台大小算出，卡片太高时整体缩小，绝不被裁掉 */
.ov-sprite {
  width: 104px; height: 104px; object-fit: contain; animation: bob 1.6s ease-in-out infinite;
  border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(255, 214, 102, .55), rgba(255, 214, 102, 0) 68%);   /* 暖色光晕，让发光的神奶蛙不发灰 */
  filter: drop-shadow(0 6px 8px rgba(122, 80, 40, .25));
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(5deg); } }
.ov-title {
  margin: 4px 0 2px; font-size: 40px; line-height: 1.15; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(100deg, #ff7a59, #ff4d6d 55%, #b13bff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ov-sub { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.ov-nums { display: flex; gap: 12px; width: 100%; margin-bottom: 8px; }
.ov-nums > div { flex: 1; border-radius: 16px; background: #fff7ec; padding: 8px 10px 7px; display: flex; flex-direction: column; gap: 1px; }
.ov-nums b { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ov-record { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: var(--brand-dark); animation: throb 1s ease-in-out infinite; }
.ov-record[hidden], .ov-btns .btn[hidden] { display: none; }
.ov-btns { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 4px; }

/* ---------------- 窄屏：上下排列，侧栏精简 ----------------
 * 只在「又窄又高」的竖屏手机上启用；手机横屏（高度 ≤ 520px）仍用左右布局，否则棋盘会被挤得很小 */
@media (max-width: 719px) and (min-height: 521px) {
  .app {
    padding: 8px;                                       /* 棋盘左右只留 8px，格子尽量大 */
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .layout { flex-direction: column; gap: 8px; max-width: 640px; max-height: none; justify-content: center; }
  .side { display: contents; }
  /* 状态栏：第一行 标题 + 三个小按钮，第二行 分数/最高分/关卡/步数，第三行 目标进度 */
  .panel {
    order: -1; flex: 0 0 auto; width: 100%; padding: 8px 10px; gap: 6px; border-radius: 18px; overflow: visible;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "head btns" "stats stats" "goal goal";
  }
  /* 舞台块高度跟着宽度走（正方形），整组（状态栏 + 棋盘 + 页脚）在屏幕里垂直居中；屏幕太矮时才压缩棋盘 */
  .stage-wrap { order: 0; flex: 0 1 auto; width: 100%; aspect-ratio: 1 / 1; min-height: 0; }
  .stage { border-radius: 18px; }
  .foot { order: 2; font-size: 11px; padding: 0; }
  .logo { width: 34px; height: 34px; }
  h1 { font-size: 20px; white-space: nowrap; }
  .sub, .legend { display: none; }
  .head { gap: 8px; }
  .stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat { border-radius: 12px; padding: 5px 8px 4px; }
  .lbl { font-size: 10px; letter-spacing: .08em; }
  .stat b { font-size: 20px; }
  .goal { border-radius: 12px; padding: 5px 10px 6px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
  .goal-row { margin: 0; gap: 8px; }
  .goal .bar { height: 10px; }
  /* 触控：按钮点击区不小于 44×44，之间留 8px 间距防误触；只显示图标 */
  .btns { display: flex; gap: 8px; }
  .btn { min-height: 44px; min-width: 44px; padding: 6px 10px; border-radius: 13px; font-size: 20px; }
  .btn .t { display: none; }
  #btnHome { grid-column: auto; }
  .toast { font-size: 13px; padding: 7px 14px; }
  .ov-card { padding: 12px 16px; width: min(92%, 340px); }
  .ov-sprite { width: 64px; height: 64px; }
  .ov-title { font-size: 30px; margin-top: 2px; }
  .ov-sub { font-size: 13px; margin-bottom: 8px; }
  .ov-nums { gap: 8px; margin-bottom: 6px; }
  .ov-nums b { font-size: 22px; }
  .ov-record { margin-bottom: 4px; font-size: 14px; }
  .btn.ghost { min-height: 48px; }        /* 浮层偶尔会为了装下而整体缩小一点点，所以这里留足余量，缩小后仍 ≥ 44px */
}
/* 老浏览器（不支持 aspect-ratio，如 iOS 15 以前）：退回「舞台块撑满剩余高度，棋盘取宽高较小者」的布局 */
@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 719px) and (min-height: 521px) {
    .stage-wrap { flex: 1 1 0; aspect-ratio: auto; }
  }
}
/* 桌面窗口不够高：侧栏先收紧，再收起图例，保证内容不被截断 */
@media (min-width: 720px) and (max-height: 800px) {
  .panel { padding: 16px 18px; gap: 11px; }
  .legend { padding: 9px 12px; gap: 6px; }
  .lg-tip { display: none; }
  .mini { width: 34px; height: 34px; }
}
@media (min-width: 720px) and (max-height: 680px) {
  .legend { display: none; }
}
/* 很窄的手机（≤359px）：收起 logo、按钮再小一点，标题保持一行 */
@media (max-width: 359px) {
  .logo { display: none; }
  h1 { font-size: 19px; }
  .btns { gap: 6px; }
  .btn { min-width: 44px; min-height: 44px; padding: 4px 6px; font-size: 18px; }   /* 仍然保证 44×44 */
  .stat b { font-size: 18px; }
  .goal-text { font-size: 13px; }
}
/* 手机横屏 / 很矮的窗口：左右布局，侧栏压缩 */
@media (min-width: 720px) and (max-height: 620px), (max-height: 520px) {
  .app {
    padding: 10px;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .layout { gap: 14px; }
  .side { flex-basis: 262px; width: 262px; gap: 6px; }
  .panel { padding: 10px 12px; gap: 8px; border-radius: 20px; }
  .stage { border-radius: 20px; }
  .sub, .legend { display: none; }
  .head { gap: 8px; }
  .logo { width: 36px; height: 36px; }
  h1 { font-size: 21px; white-space: nowrap; }
  .stats { gap: 6px; }
  .stat { padding: 5px 10px 4px; border-radius: 12px; }
  .stat b { font-size: 21px; }
  .lbl { font-size: 10px; }
  .goal { padding: 7px 12px 9px; border-radius: 12px; }
  .goal-row { margin-bottom: 5px; }
  .btns { gap: 6px; }
  .btn { min-height: 36px; padding: 5px 8px; font-size: 13px; border-radius: 12px; }
  .foot { font-size: 11px; }
  .toast { font-size: 13px; padding: 7px 14px; }
}
/* 手机横屏（高度 ≤ 520px）：三个按钮并成一行 44×44 的图标按钮；浮层卡片也相应收紧 */
@media (max-height: 520px) {
  .btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .btn { min-height: 44px; min-width: 44px; padding: 5px 6px; font-size: 18px; }
  .btn .t { display: none; }
  #btnHome { grid-column: auto; }
  .btn.ghost { min-height: 44px; }
  .ov-card { padding: 10px 14px 12px; }
  .ov-sprite { width: 56px; height: 56px; }
  .ov-title { font-size: 27px; margin-top: 0; }
  .ov-sub { font-size: 12px; margin-bottom: 6px; }
  .ov-nums { gap: 8px; margin-bottom: 6px; }
  .ov-nums > div { padding: 5px 8px 4px; }
  .ov-nums b { font-size: 20px; }
  .ov-record { font-size: 13px; margin-bottom: 4px; }
  .btn.big { min-height: 44px; font-size: 16px; padding: 8px 22px; }
}
/* 横屏而且特别矮（≤360px，如 568×320）：再收紧一档，面板不裁切 */
@media (max-height: 360px) {
  .logo { display: none; }
  .panel { padding: 8px 10px; gap: 6px; }
  h1 { font-size: 19px; }
  .stats { gap: 5px; }
  .stat { padding: 3px 8px 2px; }
  .stat b { font-size: 18px; line-height: 1.1; }
  .goal { padding: 4px 10px 6px; }
  .goal-row { margin-bottom: 3px; }
  .goal .bar { height: 9px; }
  .foot { font-size: 10px; line-height: 1.3; }
  .ov-sprite { display: none; }                         /* 舞台只有 ~270px 高：浮层去掉大头像，按钮才能保持 44px 不被缩小 */
  .ov-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo, .ov-sprite, .ov-record { animation: none; }
}