/* 上下2画面の枠。画面の大きさ(--scr-w/--scr-h)は js/engine/screen.js が決める。 */
:root {
  --bg: #0e1016; --ink: #e8ecf5; --key: #39425a; --key-hi: #5a6788;
  --btn-a: #d2564b; --btn-b: #d9a441; --btn-x: #4a88d6; --btn-y: #4aa67a;
  --font-ui: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --ctl-h: 172px;   /* 縦画面で、操作ボタンの列に取る高さ */
  --side-w: 190px;  /* 横画面で、左右の操作ボタンの列に取る幅 */
  --gap: 6px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-ui); overflow: hidden; }
body { overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; }

/* 縦画面（既定）：画面を縦に2枚、その下に十字キーと A・B・X・Y */
.app {
  /* 縦画面では画面を横いっぱいに使う（左右の余白は安全領域だけ） */
  height: 100%; padding: 8px 0; /* env/max 非対応のブラウザ向けの余白 */
  padding: max(8px, env(safe-area-inset-top)) env(safe-area-inset-right) max(8px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr var(--ctl-h);
  grid-template-areas: "screens screens" "left right"; row-gap: var(--gap); justify-items: center;
}
/* 縦持ちのタッチ端末では、安全領域のさらに下に無地の余白を取る。
   Safari の上端のぼかしがゲーム内の文字に重ならないようにするための試験調整。 */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .app:not(.wide) {
    padding-top: 24px;
    padding-top: calc(env(safe-area-inset-top) + 24px);
  }
}
.screens { grid-area: screens; display: flex; flex-direction: column; gap: var(--gap); align-items: center; justify-content: center; min-height: 0; }
.side.left { grid-area: left; } .side.right { grid-area: right; }
.side { display: flex; align-items: center; justify-content: center; }
[hidden] { display: none !important; }
.pad-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.move-stick { width: 132px; height: 132px; position: relative; border-radius: 50%; background: #1b2030; border: 3px solid var(--key); box-shadow: inset 0 0 0 3px #101420, 0 3px 0 #00000066; touch-action: none; }
.stick-marks { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 13px, #4a5474 4px, transparent 5px), radial-gradient(circle at 50% calc(100% - 13px), #4a5474 4px, transparent 5px),
    radial-gradient(circle at 13px 50%, #4a5474 4px, transparent 5px), radial-gradient(circle at calc(100% - 13px) 50%, #4a5474 4px, transparent 5px); }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; border: 3px solid #59637f; background: var(--key);
  box-shadow: inset 0 3px 0 #6c7690, 0 4px 0 #00000066; pointer-events: none; transform: translate(var(--stick-x, 0px), var(--stick-y, 0px)); }
.move-stick.on .stick-knob { background: var(--key-hi); border-color: #b4bfd7; }
/* 仮の切り替えボタン（設定画面ができたら置き換える） */
.toggle { font-family: var(--font-ui); font-size: 11px; color: var(--ink); background: transparent; border: 1px dashed #59637f; border-radius: 999px; padding: 5px 10px; }
/* 横画面・PC：画面を中央に縦に2枚、左右に操作ボタン */
.app.wide { grid-template-columns: var(--side-w) 1fr var(--side-w); grid-template-rows: 1fr; grid-template-areas: "left screens right"; column-gap: 0; }

/* 拡大してもドットをぼかさない */
.scr { display: block; background: #000; image-rendering: pixelated; image-rendering: crisp-edges; border: 0; touch-action: none; }
#bottom { outline: 1px solid #2c3550; }

.dpad { width: 132px; height: 132px; display: grid; grid-template: repeat(3, 44px) / repeat(3, 44px); }
.dpad .up { grid-area: 1 / 2; } .dpad .left { grid-area: 2 / 1; } .dpad .hub { grid-area: 2 / 2; background: var(--key); }
.dpad .right { grid-area: 2 / 3; } .dpad .down { grid-area: 3 / 2; }
.arm { border: 0; padding: 0; color: var(--ink); background: var(--key); font-size: 16px; font-family: var(--font-ui); }
.arm.up { border-radius: 8px 8px 0 0; } .arm.down { border-radius: 0 0 8px 8px; }
.arm.left { border-radius: 8px 0 0 8px; } .arm.right { border-radius: 0 8px 8px 0; }
.arm.on, .round.on { background: var(--key-hi); filter: brightness(1.35); }

.abxy { width: 126px; height: 126px; position: relative; }
.round { position: absolute; width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff; font-family: var(--font-ui); font-size: 15px; box-shadow: 0 3px 0 #00000066; }
.round.x { left: 42px; top: 0; background: var(--btn-x); }
.round.y { left: 0; top: 42px; background: var(--btn-y); }
.round.a { right: 0; top: 42px; background: var(--btn-a); }
.round.b { left: 42px; bottom: 0; background: var(--btn-b); }
button { touch-action: none; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 小さい縦持ち端末（幅 360px 以下）でも収める */
@media (max-width: 360px) { .app:not(.wide) .abxy, .app:not(.wide) .dpad { transform: scale(.9); } }

#err { position: fixed; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 8px 12px; background: #5a1e22; color: #fff; font-size: 13px; border-radius: 6px; z-index: 9; }
#err[hidden] { display: none; }