/* ============================================================
   喵星大冒险 — 移动端横版闯关
   响应式：画布随屏幕比例自适应，控件用独立层保证触控尺寸
   ============================================================ */

:root{
  --ink:#1b1030;
  --ink-2:#2a1b45;
  --line:#4a3570;
  --cream:#fff3e2;
  --pink:#ff6b86;
  --pink-d:#d93a52;
  --mint:#57e0c0;
  --sky:#63c7ff;
  --gold:#ffd451;
  --btn-size: clamp(56px, 15vmin, 92px);
  --btn-size-lg: clamp(66px, 18vmin, 108px);
  --gap: clamp(10px, 3vmin, 22px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

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

html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC",
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

#app{
  position:fixed; inset:0;
  overflow:hidden;
  background:#0f0a1e;
}

/* ---------- 画布：铺满，像素锐利 ---------- */
#game{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  object-fit:contain;      /* 任何屏幕比例都不变形，必要时留边 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  touch-action:none;
}

/* ---------- 触屏控制层 ---------- */
#controls{
  position:absolute; inset:0;
  pointer-events:none; /* 子按钮自行开启 */
  z-index:20;
}
.pad{
  position:absolute;
  bottom: calc(var(--gap) + var(--safe-b));
  display:flex; align-items:flex-end;
  gap: var(--gap);
}
.pad-left{ left: calc(var(--gap) + var(--safe-l)); }
.pad-right{
  right: calc(var(--gap) + var(--safe-r));
  align-items:flex-end;
}

.btn{
  pointer-events:auto;
  -webkit-appearance:none; appearance:none;
  position:relative;
  width:var(--btn-size); height:var(--btn-size);
  border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.42), rgba(255,255,255,.06) 58%),
    rgba(28,16,52,.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 2px 6px rgba(255,255,255,.22);
  transition: transform .06s ease, box-shadow .06s ease, background-color .1s ease;
  touch-action:none;
}
.btn svg{ width:52%; height:52%; fill:currentColor; display:block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.btn-tag{
  position:absolute; bottom:-2px; left:0; right:0;
  font-size: clamp(9px, 2.4vmin, 12px);
  letter-spacing:.04em;
  opacity:.85;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;
}
.btn-atk{
  border-color: rgba(255,168,190,.75);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,215,230,.5), rgba(255,107,134,.16) 58%),
    rgba(150,30,60,.34);
}
.btn-jmp{
  width:var(--btn-size-lg); height:var(--btn-size-lg);
  border-color: rgba(150,240,220,.8);
  background:
    radial-gradient(circle at 34% 28%, rgba(200,255,245,.52), rgba(87,224,192,.16) 58%),
    rgba(20,110,95,.34);
  margin-bottom: clamp(6px, 2.4vmin, 18px);
}
/* 二段跳可用：跳跃按钮金光脉动提示 */
.btn-jmp.can-air{
  border-color:#fff3b0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,250,210,.7), rgba(255,212,81,.3) 58%),
    rgba(60,140,120,.42);
  animation: airpulse .9s ease-in-out infinite;
}
@keyframes airpulse{
  0%,100%{ box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 2px 6px rgba(255,255,255,.22), 0 0 0 3px rgba(255,212,81,.45), 0 0 14px rgba(255,212,81,.4); }
  50%{ box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 2px 6px rgba(255,255,255,.22), 0 0 0 5px rgba(255,212,81,.75), 0 0 24px rgba(255,212,81,.75); }
}
.btn.is-active{
  transform: translateY(4px) scale(.96);
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 3px 10px rgba(0,0,0,.35);
  background-color: rgba(255,255,255,.16);
}
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* 横屏时攻击键稍微下沉，形成手柄式斜排 */
.pad-right .btn-atk{ margin-bottom: clamp(24px, 7vmin, 52px); }

/* ---------- 顶部工具条 ---------- */
#topbar{
  position:absolute;
  top: calc(6px + var(--safe-t));
  right: calc(8px + var(--safe-r));
  display:flex; gap:6px;
  z-index:22;
}
.chip{
  -webkit-appearance:none; appearance:none;
  pointer-events:auto;
  min-width:34px; height:34px;
  padding:0 8px;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.3);
  background:rgba(20,12,40,.5);
  color:var(--cream);
  font-size:14px; font-weight:700;
  letter-spacing:.06em;
  display:grid; place-items:center;
  backdrop-filter: blur(3px);
}
.chip[aria-pressed="false"]{ opacity:.45; text-decoration:line-through; }
.chip:active{ transform:translateY(2px); }

/* ---------- 覆盖面板 ---------- */
#overlay, #rotate{
  position:absolute; inset:0;
  z-index:40;
  display:none;
  place-items:center;
  padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  background:
    radial-gradient(ellipse at 50% 30%, rgba(80,40,130,.55), rgba(10,6,22,.9) 70%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#overlay.show, #rotate.show{ display:grid; }

.panel{
  width:min(560px, 92vw);
  max-height: 92%;
  overflow:auto;
  text-align:center;
  padding: clamp(14px, 3.4vmin, 26px);
  border-radius:18px;
  border:3px solid var(--line);
  background: linear-gradient(180deg, #2c1b4c, #1d1235);
  box-shadow: 0 14px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.12);
  animation: pop .22s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pop{ from{ transform:scale(.9) translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }

.panel h1{
  margin:2px 0 8px;
  font-size: clamp(22px, 6.4vmin, 38px);
  letter-spacing:.08em;
  color:var(--gold);
  text-shadow: 0 3px 0 #8a4a10, 0 0 18px rgba(255,212,81,.35);
}
.panel p{
  margin:0 0 10px;
  font-size: clamp(12px, 3.4vmin, 15px);
  line-height:1.6;
  color:#e6dcff;
}
.tips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 8px; margin:10px 0 14px;
}
.tips span{
  font-size: clamp(10px, 2.9vmin, 13px);
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#dfd4ff;
}
.tips b{ color:var(--mint); }

.ov-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cta{
  -webkit-appearance:none; appearance:none;
  pointer-events:auto;
  padding: clamp(11px, 2.8vmin, 15px) clamp(20px, 6vmin, 34px);
  font-size: clamp(14px, 3.8vmin, 18px);
  font-weight:800; letter-spacing:.1em;
  color:#3a1b00;
  background: linear-gradient(180deg, #ffe07a, #ffb628);
  border:3px solid #a35d00;
  border-radius:14px;
  box-shadow: 0 6px 0 #8a4a00;
  transition: transform .06s, box-shadow .06s;
}
.cta:active{ transform:translateY(4px); box-shadow:0 2px 0 #8a4a00; }
.cta.ghost{
  color:#ffe6c9;
  background:rgba(255,255,255,.08);
  border-color:var(--line);
  box-shadow:0 6px 0 rgba(0,0,0,.3);
}
.cta:focus-visible{ outline:3px solid var(--mint); outline-offset:3px; }
.hint{ margin-top:12px !important; font-size: clamp(10px,2.6vmin,12px) !important; opacity:.6; }
.hidden{ display:none !important; }

/* ---------- 竖屏旋转提示 ---------- */
.rot-inner{ text-align:center; }
.phone{
  width:58px; height:100px; margin:0 auto 16px;
  border:4px solid var(--cream); border-radius:10px;
  display:grid; place-items:center;
  animation: tilt 1.8s ease-in-out infinite;
}
.phone-scr{ width:70%; height:76%; background:rgba(255,255,255,.22); border-radius:3px; }
@keyframes tilt{
  0%,25%{ transform:rotate(0) }
  60%,100%{ transform:rotate(-90deg) }
}
#rotate p{ font-size: clamp(14px,4vmin,18px); line-height:1.7; margin-bottom:16px; }
#rotate small{ opacity:.6; font-size:.8em; }

/* 竖屏且未忽略时显示 */
@media (orientation: portrait){
  body:not(.ignore-rotate) #rotate{ display:grid; }
  /* 竖屏兜底：按钮上移，避免遮挡过多画面 */
  body.ignore-rotate .pad{ bottom: calc(var(--gap) + 4vh + var(--safe-b)); }
}

/* 极矮屏（横屏小手机）压缩按钮 */
@media (max-height: 380px){
  :root{ --btn-size: clamp(48px, 22vh, 68px); --btn-size-lg: clamp(56px, 26vh, 80px); --gap: 10px; }
}

/* ---------- 武器栏（攻击键上方） ---------- */
.weaponbar{
  position:absolute; left:0; bottom:calc(100% + 6px);
  display:flex; gap:6px; pointer-events:auto;
  z-index:23;
}
.wslot{
  -webkit-appearance:none; appearance:none;
  pointer-events:auto;
  width:38px; height:38px; padding:0;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(20,12,40,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:grid; place-items:center;
  box-shadow:0 3px 0 rgba(0,0,0,.3), inset 0 1px 3px rgba(255,255,255,.18);
  transition:transform .08s, box-shadow .08s, border-color .1s;
  touch-action:none;
}
.wslot canvas{ width:30px; height:30px; image-rendering:pixelated; display:block; }
.wslot.locked{ opacity:.32; filter:grayscale(.7); }
.wslot.active{
  border-color:var(--gold);
  background:rgba(90,60,20,.6);
  box-shadow:0 3px 0 rgba(0,0,0,.3), 0 0 0 2px rgba(255,212,81,.5), 0 0 12px rgba(255,212,81,.45);
}
.wslot:active{ transform:translateY(2px); }

@media (prefers-reduced-motion: reduce){
  .panel{ animation:none } .phone{ animation:none }
}