/* 小猫陷阱跑酷 · 深色冷静基调（烧脑，不搞笑） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
:root { --bg:#0e1016; --panel:#1a1e2a; --text:#d8dbe2; --dim:#8a90a0; --accent:#e8b04b; --bad:#e05555; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  overflow: hidden; padding-bottom: 30px; }
.hidden { display: none !important; }
.screen { min-height: calc(100vh - 30px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.center { text-align: center; max-width: 560px; }
h1 { font-size: 2rem; letter-spacing: .05em; }
h2 { color: var(--accent); margin-bottom: 14px; }
.sub { color: var(--dim); margin: 14px 0; line-height: 1.8; }
.btn { border: none; cursor: pointer; background: var(--accent); color: #14100a; font-weight: 600;
  font-size: 1rem; padding: 12px 30px; border-radius: 8px; margin: 8px 6px; min-height: 44px; letter-spacing: .1em; }
.btn.big { font-size: 1.15rem; padding: 14px 44px; }
.btn.ghost { background: transparent; color: var(--dim); border: 1px solid #333a48; }

/* 选关 */
#scr-select { justify-content: flex-start; overflow-y: auto; max-height: calc(100vh - 30px); padding-top: 20px; }
#level-grid { display: grid; grid-template-columns: repeat(10, minmax(52px, 84px)); gap: 8px; padding-bottom: 30px; }
.lv-btn { background: var(--panel); border: 1px solid #2a3140; border-radius: 8px; color: var(--text);
  padding: 6px 2px; cursor: pointer; min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lv-btn b { color: var(--accent); font-size: 1.2rem; }
.lv-btn span { font-size: .55rem; color: var(--dim); }
.lv-btn i { font-size: .65rem; color: var(--bad); font-style: normal; }
.lv-btn.locked { opacity: .4; cursor: default; }

/* 游戏 */
#scr-game { padding: 0; }
#game-wrap { position: relative; width: 100%; max-width: 1000px; }
#game-canvas { display: block; margin: 0 auto; border-radius: 6px; touch-action: none;
  width: min(100%, calc((100vh - 44px) * 1.818)); } /* 按视口高收缩，保证虚拟按键始终在屏内 */
#hud { position: absolute; top: 6px; left: 10px; right: 10px; display: flex; gap: 14px; align-items: center;
  font-size: .85rem; color: var(--dim); text-shadow: 0 1px 2px #000; }
#hud-level { color: var(--accent); }
#btn-pause { margin-left: auto; background: rgba(26,30,42,.8); color: var(--text); border: 1px solid #333a48;
  border-radius: 8px; font-size: 1.1rem; min-width: 44px; min-height: 44px; cursor: pointer; }
#toast { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-size: 2rem;
  color: var(--accent); text-shadow: 0 2px 8px #000; pointer-events: none; }
#congrats-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.congrats { font-size: 2.4rem; color: var(--accent); text-shadow: 0 4px 16px #000; animation: pop .4s; }
@keyframes pop { from { transform: scale(.3); } to { transform: scale(1); } }
#pause-layer { position: absolute; inset: 0; background: rgba(8,10,16,.88); display: flex; align-items: center; justify-content: center; }
#pause-layer .panel { text-align: center; }
#pause-layer h3 { margin-bottom: 16px; color: var(--dim); font-weight: 400; font-size: .95rem; }

/* 触控 */
#touch-controls { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: space-between;
  padding: 0 12px; pointer-events: none; }
#touch-controls button { pointer-events: auto; width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid #39404f; background: rgba(26,30,42,.55); color: var(--text); font-size: 1.5rem; cursor: pointer; }
#touch-controls button.on { background: rgba(232,176,75,.5); }
.tc-left { display: flex; gap: 14px; }
@media (hover: hover) and (pointer: fine) { #touch-controls { display: none; } } /* 桌面隐藏虚拟键 */

#rotate-hint { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem; color: var(--accent); }
#site-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center;
  justify-content: center; font-size: .65rem; color: #4a5060; background: #0a0c12; }