/* 小猫抓老鼠 — 界面样式（手绘笔记本风格）
 *
 * 兼容基线：Android 8.1 出厂 Chrome / WebView 61。
 * 基线层只用 Chrome 61 可解析的写法；现代能力放在 @supports 增强层，且基线始终可用。
 * 具体规避：inset / min() / aspect-ratio / Flex gap / env() 直接参与 calc。
 */
:root {
  --paper: #f6f0df;
  --paper-2: #fffdf6;
  --ink: #1d1a15;
  --ink-soft: #6b6353;
  --line: #ded3b7;
  --accent: #e2613c;
  --accent-dark: #a8401f;
  --good: #1d9e75;
  --card: rgba(255, 253, 246, 0.88);
  --yarn: #d9534f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
#game-root { position: relative; width: 100%; height: 100%; }
/* 逻辑属性 inset 是 Chrome 87+，这里用物理边属性 */
#game-canvas {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; display: block; touch-action: none;
}

/* ---------- 顶部 HUD ---------- */
.hud {
  position: absolute; left: 14px; right: 14px;
  top: 12px;
  top: calc(var(--safe-area-inset-top, 0px) + 12px);
  display: flex; align-items: center;
  pointer-events: none; z-index: 4;
}
/* Flex gap 是 Chrome 84+，基线用相邻兄弟 margin；支持时由 .supports-flex-gap 换成 gap */
.hud > * + * { margin-left: 10px; }
.hud-btn {
  pointer-events: auto; cursor: pointer;
  width: 56px; flex: 0 0 56px; padding: 7px 0 5px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px;
  color: var(--ink); font-family: inherit; font-size: 10px; letter-spacing: .5px;
  box-shadow: 1.5px 2px 0 rgba(29, 26, 21, .18);
}
.hud-btn > * + * { margin-top: 1px; }
.hud-btn b { font-size: 15px; font-weight: 500; line-height: 1; }
.hud-btn:active { transform: translate(1px, 1px); box-shadow: none; }

.yarn-card {
  pointer-events: none; flex: 1 1 auto; min-width: 0;
  padding: 7px 12px 8px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px;
  box-shadow: 1.5px 2px 0 rgba(29, 26, 21, .18);
}
.yarn-label {
  display: flex; align-items: center;
  font-size: 10px; letter-spacing: 2px; color: var(--ink-soft);
}
/* 标签前面那颗小毛线球（伪元素是 flex 子项，间距挂在它自己身上） */
.yarn-label::before {
  content: ''; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%;
  background: var(--yarn); border: 1.2px solid var(--ink);
}
.yarn-bar {
  height: 8px; margin: 4px 0 3px; border-radius: 5px;
  background: rgba(29, 26, 21, .1); overflow: hidden;
}
.yarn-fill {
  height: 100%; width: 100%; border-radius: 5px;
  background: var(--yarn); transition: width .12s linear;
}
.yarn-count { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.yarn-card.warning { border-color: var(--accent-dark); }
.yarn-card.warning .yarn-fill { background: var(--accent-dark); }
.yarn-card.warning .yarn-count { color: var(--accent-dark); }

/* ---------- 左上角关卡牌 ---------- */
.level-tag {
  position: absolute; left: 14px;
  top: 74px;
  top: calc(var(--safe-area-inset-top, 0px) + 74px);
  z-index: 4; cursor: pointer;
  padding: 5px 12px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px;
  font-family: inherit; font-size: 12px; color: var(--ink);
  box-shadow: 1.5px 2px 0 rgba(29, 26, 21, .18);
}
.level-tag:active { transform: translate(1px, 1px); box-shadow: none; }

/* ---------- 底部 ---------- */
.hint-bar {
  position: absolute; left: 20px; right: 20px;
  bottom: 84px;
  bottom: calc(var(--safe-area-inset-bottom, 0px) + 84px);
  z-index: 3; text-align: center; pointer-events: none;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
}
.bottom-bar {
  position: absolute; left: 0; right: 0;
  bottom: 18px;
  bottom: calc(var(--safe-area-inset-bottom, 0px) + 18px);
  z-index: 4; display: flex; justify-content: center;
}
.launch-btn {
  cursor: pointer; padding: 12px 40px;
  font-family: inherit; font-size: 16px; letter-spacing: 2px; color: var(--paper-2);
  background: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: 2px 3px 0 rgba(29, 26, 21, .25);
}
.launch-btn:active { transform: translate(1px, 1px); box-shadow: none; }
.launch-btn:disabled { opacity: .35; }
.launch-btn.is-ready { animation: readyPulse 1.4s ease-in-out infinite; }
@keyframes readyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

/* ---------- 弹窗 ---------- */
.overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(246, 240, 223, .82);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.overlay.visible { opacity: 1; pointer-events: auto; }
.panel {
  /* 基线：百分比宽度 + max-width（min() 是 Chrome 79+） */
  width: 84%; max-width: 340px;
  padding: 26px 22px 22px; text-align: center;
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: 20px;
  box-shadow: 4px 5px 0 rgba(29, 26, 21, .2);
}
.panel h2 { font-size: 21px; font-weight: 500; letter-spacing: 1px; color: var(--ink); }
.panel .sub { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.panel .sub b { color: var(--ink); font-weight: 500; }
.stars { display: flex; justify-content: center; margin: 14px 0 2px; }
.stars i + i { margin-left: 8px; }
.stars i {
  font-style: normal; font-size: 30px; color: rgba(29, 26, 21, .16);
  transform: scale(.7); transition: transform .25s ease, color .25s ease;
}
.stars i.show { transform: scale(1); }
.stars i.earned { color: #f0a92c; }
.row { display: flex; justify-content: center; margin-top: 18px; }
.row > * + * { margin-left: 10px; }
.btn {
  cursor: pointer; padding: 10px 22px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(29, 26, 21, .18);
}
.btn:active { transform: translate(1px, 1px); box-shadow: none; }
.btn.primary { background: var(--ink); color: var(--paper-2); }
.overlay .panel > .btn { margin-top: 18px; }

.level-grid {
  /* Grid 间距用 grid-gap（Chrome 61 可解析；gap 简写在 Grid 里要 Chrome 66+） */
  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 9px;
  margin: 16px 0 4px;
}
/* aspect-ratio 是 Chrome 88+：改用 padding-top 百分比比例盒，内容绝对定位 */
.level-pick-btn {
  position: relative; cursor: pointer;
  width: 100%; height: 0; padding-top: 100%;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 10px;
}
.level-pick-btn .level-num {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.level-pick-btn.current { background: var(--ink); color: var(--paper-2); }
.level-pick-btn.locked {
  cursor: not-allowed; color: rgba(29, 26, 21, .25);
  border-color: rgba(29, 26, 21, .2); border-style: dashed;
}

/* ============================================================
 * 增强层：仅在支持的浏览器生效，基线层不依赖这里任何一条
 * ============================================================ */

/* 安全区：模拟器注入 --safe-area-inset-*，真机用 env()，两者取较大值。
 * 条件同时要求 max()（Chrome 79+）与 env()，这样 Chrome 61~78 一律走上面的静态兜底值，
 * 不会因为「认 env() 但不认 max()」而让整条声明失效。 */
@supports (top: max(0px, env(safe-area-inset-top, 0px))) {
  .hud {
    top: calc(max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px)) + 12px);
  }
  .level-tag {
    top: calc(max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px)) + 74px);
  }
  .hint-bar {
    bottom: calc(max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)) + 84px);
  }
  .bottom-bar {
    bottom: calc(max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)) + 18px);
  }
}

/* Flex gap：由 compat.js 实测布局行为后在 html 上挂 .supports-flex-gap */
.supports-flex-gap .hud { column-gap: 10px; }
.supports-flex-gap .hud > * + * { margin-left: 0; }
.supports-flex-gap .hud-btn { row-gap: 1px; }
.supports-flex-gap .hud-btn > * + * { margin-top: 0; }
.supports-flex-gap .yarn-label { column-gap: 5px; }
.supports-flex-gap .yarn-label::before { margin-right: 0; }
.supports-flex-gap .stars { column-gap: 8px; }
.supports-flex-gap .stars i + i { margin-left: 0; }
.supports-flex-gap .row { column-gap: 10px; }
.supports-flex-gap .row > * + * { margin-left: 0; }