html, body {
  margin: 0; height: 100%; background: #07060c; overflow: hidden; overscroll-behavior: none;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
/* ゲーム画面全体の箱。大きさ・回転は js/game.js の resize() が決める（--sw = 箱の横幅、--edge = 画面端からの余白） */
#stage { position: fixed; left: 50%; top: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); overflow: hidden; --sw: 100vw; --edge: 14px; }
#game { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; background: #000; touch-action: none; width: 100%; aspect-ratio: 16 / 9; }
#mute {
  --oct: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: clamp(30px, calc(var(--sw) * .045), 42px); height: clamp(30px, calc(var(--sw) * .045), 42px); padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: linear-gradient(#b4c6f2, #2a3c78); clip-path: var(--oct); filter: drop-shadow(0 0 4px #3a7aff);
}
#mute::before { content: ''; position: absolute; inset: 2.5px; background: radial-gradient(circle at 50% 30%, #30458a, #0a1030 75%); clip-path: var(--oct); }
#mute svg { position: relative; width: 58%; height: 58%; }
#mute .x, #mute.off .wave { display: none; }
#mute.off .x { display: inline; }
.fontload { position: absolute; left: -9999px; top: 0; opacity: 0; pointer-events: none; }

/* ---- スマホ用タッチボタン ---- */
#touch { display: none; position: absolute; inset: 0; pointer-events: none; }
body.touch #touch { display: block; }
.pad { position: absolute; bottom: 14px; pointer-events: none; }
.pad.left { left: var(--edge); display: grid; grid-template-columns: repeat(3, auto); gap: 2px; }
/* 十字キーの判定範囲（見えない）。ボタンのまわり40%ぶん外側まで反応する */
#dzone { position: absolute; inset: -40%; pointer-events: auto; touch-action: none; z-index: 2; }
.pad.left button { pointer-events: none; }
.pad.left .up { grid-area: 1 / 2; } .pad.left .lf { grid-area: 2 / 1; } .pad.left .rt { grid-area: 2 / 3; } .pad.left .dn { grid-area: 3 / 2; }
.pad.right { right: var(--edge); display: grid; grid-template-columns: repeat(2, auto); gap: 8px 10px; align-items: end; }
.pad button {
  pointer-events: auto; touch-action: none; width: clamp(58px, calc(var(--sw) * .11), 86px); height: clamp(58px, calc(var(--sw) * .11), 86px); padding: 0;
  border-radius: 50%; border: 2px solid rgba(255, 201, 60, .6); background: rgba(10, 14, 40, .28); color: rgba(255, 255, 255, .9); box-shadow: 0 0 6px rgba(255, 170, 40, .3); text-shadow: 0 1px 3px #000; /* 下のキャラクターが透けて見える濃さ */
  font: bold clamp(11px, calc(var(--sw) * .021), 15px) inherit; font-family: inherit;
}
.pad.left button { width: clamp(42px, calc(var(--sw) * .075), 60px); height: clamp(42px, calc(var(--sw) * .075), 60px); font-size: clamp(20px, calc(var(--sw) * .04), 30px); }
.pad.right #btnSpecial { grid-area: 1 / 2; justify-self: end; width: clamp(50px, calc(var(--sw) * .09), 70px); height: clamp(50px, calc(var(--sw) * .09), 70px); }
.pad.right .jp { grid-area: 2 / 1; }
.pad.right .atk { grid-area: 2 / 2; width: clamp(70px, calc(var(--sw) * .13), 100px); height: clamp(70px, calc(var(--sw) * .13), 100px); background: rgba(200, 40, 30, .32); }
.pad.left button.on, .pad.right button.on { background: rgba(255, 200, 60, .6); }
#btnSpecial { opacity: .4; }
#btnSpecial.ready { opacity: 1; background: rgba(255, 110, 20, .8); box-shadow: 0 0 16px #ffb030; }