* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%;
  background:#0b0806;
  overflow:hidden;
  touch-action:none;
  font-family:"Trebuchet MS", "PingFang SC", sans-serif;
}
#wrap {
  position:fixed; left:0; top:0; width:100%;
  /* svh = 工具栏展开后的可视高度：iOS Safari 的 100vh 比实际能看到的高，
     直接用会把画面底部（暂停提示、文档链接）顶到屏幕外面去 */
  height:100vh; height:100svh;
  display:flex; align-items:center; justify-content:center;
}
canvas {
  image-rendering:auto;
  /* fill the viewport while keeping the 960:576 (5:3) aspect ratio */
  width:min(100vw, calc(100vh * 5 / 3));
  height:min(100vh, calc(100vw * 3 / 5));
  width:min(100vw, calc(100svh * 5 / 3));
  height:min(100svh, calc(100vw * 3 / 5));
  box-shadow:0 0 80px rgba(0,0,0,.9);
}
#touch-ui {
  position:fixed; left:0; top:0; width:100%;
  height:100vh; height:100svh;
  pointer-events:none; z-index:10;
  /* 控件尺寸跟着屏幕短边缩放：小屏手机上按钮不会把画面挤没 */
  --ctl:clamp(30px, 12vh, 56px);
  --ctl:clamp(30px, 12svh, 56px);
  --knob:calc(var(--ctl) * .84);
  --stick:calc(var(--ctl) * 2);
  --corner:clamp(30px, 9vh, 42px);
  --corner:clamp(30px, 9svh, 42px);
}
#touch-ui.hidden { display:none; }
#stick-zone {
  position:absolute; left:0; bottom:0; width:45%; height:60%;
  pointer-events:auto;
}
/* 石板质感：暗底 + 羊皮纸描边，半透明，脚下的地板和弹幕都还看得见 */
#stick-base, #stick-knob, .fire-btn, .action-btn {
  background:rgba(16,11,7,.36);
  border:2px solid rgba(232,220,192,.3);
  box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 0 12px rgba(0,0,0,.3);
  /* 按下态原来是硬切；给一层短过渡，手指下去能看到控件「回应」了一下 */
  transition:background .12s ease, border-color .12s ease, color .12s ease, opacity .18s ease;
}
#stick-base {
  position:absolute;
  left:calc(var(--ctl) * .8);
  bottom:calc(var(--ctl) * 1.1 + env(safe-area-inset-bottom, 0px));
  width:var(--stick); height:var(--stick); border-radius:50%;
}
#stick-knob {
  position:absolute; left:50%; top:50%;
  width:var(--knob); height:var(--knob);
  margin:calc(var(--knob) / -2) 0 0 calc(var(--knob) / -2);
  border-radius:50%;
  background:rgba(232,220,192,.2);
}
#fire-pad {
  position:absolute;
  right:calc(var(--ctl) * .6 + env(safe-area-inset-right, 0px));
  bottom:calc(var(--ctl) * .8 + env(safe-area-inset-bottom, 0px));
  pointer-events:auto;
  display:grid;
  grid-template-areas:". up ." "left . right" ". down .";
  grid-template-columns:repeat(3, var(--ctl));
  grid-template-rows:repeat(3, var(--ctl));
}
.fire-btn {
  position:relative;
  border-radius:50%;
  -webkit-user-select:none; user-select:none;
  touch-action:none;
}
/* 三角形由 clip-path 裁出，不依赖字体：手机上 ◀ / ▶ 会被 emoji 字体接走 */
.fire-btn::before {
  content:'';
  position:absolute; left:50%; top:50%;
  width:calc(var(--ctl) * .4); height:calc(var(--ctl) * .4);
  transform:translate(-50%, -50%);
  background:rgba(236,224,196,.82);
}
/* 按下时亮成 HUD 那种金色，和画面里的高亮同一套色 */
.fire-btn:active, .action-btn:active {
  background:rgba(244,208,63,.26);
  border-color:rgba(244,208,63,.72);
}
.fire-btn[data-dir="up"]{grid-area:up}
.fire-btn[data-dir="down"]{grid-area:down}
.fire-btn[data-dir="left"]{grid-area:left}
.fire-btn[data-dir="right"]{grid-area:right}
.fire-btn[data-dir="up"]::before{clip-path:polygon(50% 8%, 96% 92%, 4% 92%)}
.fire-btn[data-dir="down"]::before{clip-path:polygon(4% 8%, 96% 8%, 50% 92%)}
.fire-btn[data-dir="left"]::before{clip-path:polygon(92% 4%, 92% 96%, 8% 50%)}
.fire-btn[data-dir="right"]::before{clip-path:polygon(8% 4%, 8% 96%, 92% 50%)}
#action-pad {
  position:absolute;
  right:calc(var(--ctl) * 3.9 + env(safe-area-inset-right, 0px));
  bottom:calc(var(--ctl) * 1.1 + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:calc(var(--ctl) * .3);
  pointer-events:auto;
}
.action-btn {
  width:var(--ctl); height:var(--ctl); border-radius:50%;
  color:rgba(236,224,196,.9);
  font:bold calc(var(--ctl) * .3)/1 Georgia, "PingFang SC", serif;
  -webkit-user-select:none; user-select:none;
  touch-action:none;
}
/* 暂停 / 图鉴：左上角的暗色石牌，不透明、描边收边，跟 HUD 的道具框一个路子 */
#top-pad {
  position:absolute;
  left:calc(10px + env(safe-area-inset-left, 0px));
  top:calc(8px + env(safe-area-inset-top, 0px));
  display:flex; gap:12px;
  pointer-events:auto;
}
.corner-btn {
  position:relative;
  width:var(--corner); height:var(--corner);
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  background:#17100b;
  border:2px solid rgba(232,220,192,.5);
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  color:#e8dcc0;
  -webkit-user-select:none; user-select:none;
  touch-action:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
/* 命中区比视觉大一圈：小屏上角落按钮只有 ~35px，低于 44px 的可点下限。
   伪元素不可见，只负责把可点范围补足。注意它定位的包含块是按钮的 padding box
   （border-box 下比视觉框窄 2×border=4px），所以 inset:-6px 实测得到 43px 的
   可点区域；#top-pad 的 gap 同步加到 12px，两个按钮扩出来的命中区才不会互相咬住
   （视觉间距 12px − 两侧各外扩 4px = 中间留 4px 死区） */
.corner-btn::after { content:''; position:absolute; inset:-6px; }
.corner-btn:active { background:#2b1e12; border-color:#f4d03f; color:#f4d03f; }
.corner-btn svg { width:60%; height:60%; fill:currentColor; }
/* 暂停时图标换成继续箭头 */
.corner-btn .i-play { display:none; }
#touch-ui.overlay .corner-btn .i-pause { display:none; }
#touch-ui.overlay .corner-btn .i-play { display:initial; }
/* 暂停 / 图鉴 / 全图 打开时收起摇杆和射击键，免得压住面板 */
#touch-ui.overlay #stick-zone,
#touch-ui.overlay #fire-pad,
#touch-ui.overlay #action-pad { display:none; }

/* phones are landscape-only, but plenty of mobile browsers never rotate the
   viewport (portrait-locked in-app webviews, iOS orientation lock). So a
   portrait viewport plays in fake landscape instead: body.rot90 (set from JS)
   rotates the whole stage 90° and swaps every viewport-derived length.
   Touch coordinates are mapped back in js/game-core.js. */
body.rot90 #wrap {
  width:100vh; width:100svh;
  height:100vw;
  transform:rotate(90deg) translateY(-100%);
  transform-origin:top left;
}
body.rot90 canvas {
  width:min(100vh, calc(100vw * 5 / 3));
  height:min(100vw, calc(100vh * 3 / 5));
  width:min(100svh, calc(100vw * 5 / 3));
  height:min(100vw, calc(100svh * 3 / 5));
}
/* #touch-ui is position:fixed, but a transformed ancestor becomes its
   containing block, so it rotates along with #wrap; only its lengths need
   swapping (control size follows the screen's short edge = vw in portrait) */
body.rot90 #touch-ui {
  height:100vw;
  --ctl:clamp(30px, 12vw, 56px);
  --corner:clamp(30px, 9vw, 42px);
}

/* 按下也没用的时候：不在对局中 / 炸弹为 0 / 主动道具没充能 —— 灰掉，
   别让玩家按完才从 toast 里知道（状态由 syncTouchButtons 同步） */
.action-btn.off {
  background:rgba(16,11,7,.2);
  border-color:rgba(232,220,192,.14);
  color:rgba(236,224,196,.32);
}
.action-btn.off:active {
  background:rgba(16,11,7,.2);
  border-color:rgba(232,220,192,.14);
}

/* 触控 UI 里的真按钮在桌面上是 display:none，但触屏笔记本 + 外接键盘、
   以及读屏的虚拟光标仍然会聚焦它们：给一个看得见的焦点环 */
.corner-btn:focus-visible, .fire-btn:focus-visible, .action-btn:focus-visible {
  outline:2px solid #f4d03f;
  outline-offset:2px;
}

/* 假横屏下「视觉上的左上角」不是物理左上角：本地 x 轴朝屏幕下方、本地 y 轴
   朝屏幕左侧，所以 left 吃到的是物理顶部的刘海，top 吃到的是物理右侧。
   原来的 left/top 各吃自己的 inset，在刘海屏上按钮会被挖孔压住。 */
body.rot90 #top-pad {
  left:calc(10px + env(safe-area-inset-top, 0px));
  top:calc(8px + env(safe-area-inset-right, 0px));
}

/* 读屏专用：canvas 里的 HUD 对辅助技术完全不可见，状态播报走这个隐藏节点 */
.sr-only {
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}