/* 画面の文字は英語だけ（指示書）。数字は等幅の数字（tabular-nums）にして、fps が変わっても横に揺れないようにする */
:root { --ink: #fff8f0; --dim: rgba(255, 244, 232, .72); --accent: #ffcf8a; --glass: rgba(20, 12, 8, .38); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a0f0a; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
#view, #view canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 白い柱の前でも小さい行が読めるよう、左上を濃いめに暗くする（11/1: .55 では「drawn this frame」が柱に溶けた） */
#scrim { position: fixed; left: 0; top: 0; width: min(900px, 90vw); height: 380px; pointer-events: none;
  background: radial-gradient(90% 85% at 0% 0%, rgba(24, 10, 4, .72) 0%, rgba(24, 10, 4, .4) 50%, rgba(24, 10, 4, 0) 80%); }
#hud { position: fixed; left: max(28px, env(safe-area-inset-left)); top: max(24px, env(safe-area-inset-top)); pointer-events: none;
  text-shadow: 0 2px 18px rgba(40, 14, 0, .55), 0 1px 2px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
#hud .big { font-size: clamp(34px, 5.4vw, 84px); font-weight: 800; letter-spacing: -.02em; line-height: .95; }
#hud .sub { font-size: clamp(12px, 1.25vw, 18px); color: var(--dim); letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
#hud .fpsrow { margin-top: 14px; font-size: clamp(30px, 4vw, 62px); font-weight: 800; line-height: 1; color: var(--accent); }
#hud .fpsrow .unit { font-size: .42em; margin-left: .3em; color: var(--dim); letter-spacing: .12em; }
/* 小さい 2 行は薄い黒の帯の上に（白い柱の前を通っても読める） */
#hud .drawn, #hud .mode { display: table; padding: 3px 8px; margin-left: -8px; border-radius: 6px; background: rgba(22, 10, 4, .5); text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
#hud .drawn { margin-top: 10px; font-size: clamp(11px, 1.05vw, 15px); color: var(--dim); }
#hud .mode { margin-top: 4px; font-size: clamp(11px, 1.05vw, 15px); color: var(--accent); opacity: .9; }
#hud .mode.slow { color: #ff8f7a; }

#ctrl { position: fixed; right: max(24px, env(safe-area-inset-right)); top: max(24px, env(safe-area-inset-top)); display: flex; gap: 10px; }
#ctrl button { font: 600 14px/1 inherit; font-family: inherit; color: var(--ink); background: var(--glass); border: 1px solid rgba(255, 236, 214, .35);
  padding: 12px 16px; border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; letter-spacing: .02em; }
#ctrl button.on { background: rgba(255, 196, 120, .9); color: #2a1406; border-color: transparent; }
#ctrl button:disabled { opacity: .4; cursor: default; }

/* 自由カメラ（直し 1）: 「Auto camera」は右上のボタンの下に小さく。操作の説明は左下に小さく（クレジットは右下） */
#bauto { position: fixed; right: max(24px, env(safe-area-inset-right)); top: calc(max(24px, env(safe-area-inset-top)) + 54px);
  font: 600 13px/1 inherit; font-family: inherit; color: #2a1406; background: rgba(255, 236, 214, .92); border: 0;
  padding: 10px 14px; border-radius: 999px; cursor: pointer; letter-spacing: .02em; box-shadow: 0 4px 18px rgba(30, 10, 0, .35); }
#bauto[hidden] { display: none; }
#bauto:disabled { opacity: .55; cursor: default; }
#hint { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); font-size: 12px;
  color: rgba(255, 244, 232, .78); letter-spacing: .03em; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }

#notice { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px)); text-align: center;
  font-size: 14px; line-height: 1.4; padding: 12px 18px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

#credit { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); font-size: 11px;
  color: rgba(255, 244, 232, .62); letter-spacing: .03em; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(120% 90% at 50% 70%, #7a3a1c 0%, #2b130a 55%, #120805 100%); transition: opacity .9s ease; }
#loading .ltitle { font-size: clamp(40px, 8vw, 96px); font-weight: 800; letter-spacing: .32em; margin-left: .32em; }
#loading .lbar { width: min(360px, 70vw); height: 3px; background: rgba(255, 255, 255, .15); border-radius: 3px; overflow: hidden; }
#loading .lbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
#loadtxt { font-size: 13px; color: var(--dim); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
body.ready #loading { opacity: 0; pointer-events: none; }

/* スマホ縦（390px 前後）: ボタンは下へ、文字は小さく。クレジットはボタンの下に重ならないよう一番下 */
@media (max-width: 640px) {
  #hud { left: 18px; top: max(18px, env(safe-area-inset-top)); }
  #ctrl { top: auto; right: 50%; transform: translateX(50%); bottom: max(40px, calc(env(safe-area-inset-bottom) + 30px)); }
  #ctrl button { font-size: 13px; padding: 11px 14px; white-space: nowrap; }
  #credit { left: 16px; right: 16px; transform: none; text-align: center; font-size: 10px; line-height: 1.35; }
  #notice { bottom: 140px; font-size: 13px; }
  /* スマホ: 「Auto camera」は右上の角（HUD は左上・切り替えは下）。説明の 1 行は切り替えボタンの上に中央寄せ（クレジットと重ねない） */
  #bauto { top: max(18px, env(safe-area-inset-top)); right: 14px; font-size: 12px; padding: 9px 12px; }
  #hint { left: 16px; right: 16px; text-align: center; font-size: 11px; bottom: max(100px, calc(env(safe-area-inset-bottom) + 90px)); }
}