@font-face {
  font-family: "NukkyLatin";
  src: local("dotfont"), url("./assets/dotfont.ttf?v=118") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NukkyJP";
  src: local("KFhimajiDOT"), url("./assets/KFhimajiDOT.otf?v=118") format("opentype");
  font-display: swap;
}
* { box-sizing: border-box; }
html, body {
  width: 100%; min-height: 100%; margin: 0;
  background: #050805; color: #f4f1cf; overscroll-behavior: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100svh; display: grid; place-items: center; overflow: hidden;
  font-family: "NukkyLatin", "NukkyJP", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}
button { font-family: "NukkyLatin", "NukkyJP", ui-monospace, monospace; }
.app {
  width: 100%; min-height: 100svh; display: grid; place-items: center; align-content: center;
  gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
           max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
.game-shell {
  position: relative; width: min(100%, 430px); aspect-ratio: 224 / 384; background: #000;
  border: 3px solid #c9c49c; outline: none;
  box-shadow: 0 0 0 3px #242a1e, 0 10px 35px rgba(0,0,0,.45);
  overflow: hidden; touch-action: none; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.game-shell:focus-visible {
  box-shadow: 0 0 0 3px #242a1e, 0 0 0 5px #e6d36e, 0 10px 35px rgba(0,0,0,.45);
}
canvas {
  display: block; width: 100%; height: 100%; image-rendering: pixelated;
  image-rendering: crisp-edges; touch-action: none; background: #000;
}
.canvas-text-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  font-family: "NukkyLatin", "NukkyJP", ui-monospace, monospace;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
.canvas-dom-text {
  position: absolute;
  margin: 0;
  padding: 0;
  white-space: pre;
  line-height: 1;
  font-family: inherit;
  font-weight: inherit;
}
.sound-btn,
.game-end-btn,
.save-btn,
.score-btn {
  position: absolute; bottom: 8px; z-index: 8;
  width: 23%; min-width: 0; padding: 5px 2px;
  border: 2px solid #c9c49c; border-radius: 0;
  background: rgba(17,24,15,.94); color: #f4f1cf;
  font-size: 7px; line-height: 1; font-weight: 700; cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
}
.score-btn { left: 2%; }
.save-btn { left: 26%; }
.game-end-btn { left: 50%; }
.sound-btn { left: 74%; }
.sound-btn:active,
.game-end-btn:active,
.save-btn:active,
.score-btn:active { transform: translate(1px, 1px); }

/* 操作対象がない画面や専用操作がある画面では、SAVE／GAME ENDを出さない。 */
.game-shell.is-title .save-btn,
.game-shell.is-title .game-end-btn,
.game-shell.is-gameover .save-btn,
.game-shell.is-gameover .game-end-btn,
.game-shell.is-ending .save-btn,
.game-shell.is-ending .game-end-btn,
.game-shell.is-dying .save-btn,
.game-shell.is-dying .game-end-btn,
.game-shell.is-ranking-open .save-btn,
.game-shell.is-ranking-open .game-end-btn { display: none; }

.howto-title-btn {
  position: absolute;
  left: 50%;
  top: 71.4%;
  transform: translate(-50%, -50%);
  z-index: 9;
  width: 43%;
  padding: 4px 6px 5px;
  border: 1px solid #c9c49c;
  border-radius: 0;
  background: rgba(17,24,15,.94);
  color: #f4f1cf;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
  font-size: clamp(8px, 2.3vw, 11px);
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
}
.howto-title-btn:active { transform: translate(calc(-50% + 1px), calc(-50% + 1px)); }
.game-shell:not(.is-title) .howto-title-btn { display: none; }

.howto-modal[hidden] { display: none !important; }
.howto-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(0,0,0,.78);
  touch-action: auto;
}
.howto-modal-panel {
  position: relative;
  width: min(760px, 100%);
  height: min(92svh, 900px);
  border: 2px solid #d9c96c;
  background: #090a0f;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow: hidden;
  touch-action: auto;
}
.howto-close-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid #d9c96c;
  background: rgba(8,10,12,.94);
  color: #f4f1dd;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.howto-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #090a0f;
  touch-action: auto;
}
@media (max-width: 260px) {
  .sound-btn, .game-end-btn, .save-btn, .score-btn { font-size: 6px; }
}

.ranking-dialog[hidden] { display: none !important; }
.ranking-dialog {
  position: absolute; inset: 2% 2% 12%; z-index: 20;
  background: rgba(2, 5, 8, .97); border: 2px solid #8eea70;
  color: #f4f1cf; pointer-events: auto;
}
.ranking-dialog {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  font-synthesis: none;
}
.ranking-dialog-title, .ranking-status, .ranking-title,
.ranking-highscore-heading, .ranking-highscore-empty, .ranking-dialog button { white-space: nowrap; }
.ranking-dialog-panel { position: relative; width: 100%; height: 100%; padding: calc(12px * var(--ranking-scale, 1)) calc(9px * var(--ranking-scale, 1)) calc(42px * var(--ranking-scale, 1)); }
.ranking-dialog-title { color: #8eea70; text-align: center; font-size: calc(21.6px * var(--ranking-scale, 1)); margin: calc(3px * var(--ranking-scale, 1)) 0 calc(9px * var(--ranking-scale, 1)); }
.ranking-status { min-height: calc(20px * var(--ranking-scale, 1)); color: #fff3a0; text-align: center; font-size: calc(16px * var(--ranking-scale, 1)); }
.ranking-rows { display: grid; gap: calc(4px * var(--ranking-scale, 1)); margin-top: calc(14px * var(--ranking-scale, 1)); }
.ranking-row { display: grid; grid-template-columns: 39% 37% 24%; align-items: baseline; font-size: calc(14.4px * var(--ranking-scale, 1)); line-height: 1.24; }
.ranking-row span,
.ranking-highscore-row span { min-width: 0; white-space: nowrap; }
.ranking-row .ranking-value { text-align: right; color: #fff3a0; }
.ranking-row .ranking-rank { text-align: right; color: #8ed8ff; }
.ranking-title { min-height: calc(20px * var(--ranking-scale, 1)); margin-top: calc(5px * var(--ranking-scale, 1)); text-align: center; color: #ffdf72; font-size: calc(16px * var(--ranking-scale, 1)); }
.ranking-highscore-heading {
  margin-top: calc(16px * var(--ranking-scale, 1)); padding-top: calc(11px * var(--ranking-scale, 1)); border-top: calc(1px * var(--ranking-scale, 1)) solid #315b3a;
  color: #fff3a0; text-align: center; font-size: calc(17.6px * var(--ranking-scale, 1));
}
.ranking-highscores { display: grid; gap: calc(3px * var(--ranking-scale, 1)); margin-top: calc(9px * var(--ranking-scale, 1)); margin-bottom: calc(42px * var(--ranking-scale, 1)); }
.ranking-highscore-row {
  display: grid; grid-template-columns: 17% 48% 35%; align-items: baseline;
  color: #f4f1cf; font-size: calc(12.8px * var(--ranking-scale, 1)); line-height: 1.22;
}
.ranking-highscore-row span:nth-child(2),
.ranking-highscore-row span:nth-child(3) { text-align: right; }
.ranking-highscore-row span:nth-child(2) { color: #fff3a0; }
.ranking-highscore-empty { color: #8e9879; text-align: center; font-size: calc(12.8px * var(--ranking-scale, 1)); }
.ranking-status,
.ranking-title,
.ranking-rows,
.ranking-highscore-heading,
.ranking-highscores { width: 90%; margin-left: auto; margin-right: auto; }
.ranking-close-btn { position: absolute; left: 50%; bottom: calc(7px * var(--ranking-scale, 1)); transform: translateX(-50%); }
.ranking-dialog .ranking-close-btn { font-size: calc(8px * var(--ranking-scale, 1)); }
.ranking-checkpoint-actions {
  position: absolute; left: 50%; bottom: calc(7px * var(--ranking-scale, 1)); transform: translateX(-50%);
  width: 90%; display: flex; justify-content: center; gap: calc(6px * var(--ranking-scale, 1));
}
.ranking-checkpoint-actions[hidden] { display: none !important; }
.ranking-checkpoint-actions button { width: 47%; }
.ranking-checkpoint-actions span { font-size: calc(14px * var(--ranking-scale, 1)); }
.ranking-dialog button {
  padding: calc(5px * var(--ranking-scale, 1)) calc(4px * var(--ranking-scale, 1)); border: calc(1px * var(--ranking-scale, 1)) solid #8eea70; border-radius: 0;
  background: #122210; color: #dffbd6; font-size: calc(16px * var(--ranking-scale, 1)); cursor: pointer;
}

.hint {
  margin: 0; color: #8e9879; font-size: clamp(9px, 2.5vw, 12px);
  letter-spacing: .03em; text-align: center;
}
@media (orientation: landscape) and (max-height: 560px) {
  .app { grid-template-columns: auto auto; gap: 10px; }
  .game-shell { width: auto; height: calc(100svh - 18px); }
  .hint { writing-mode: vertical-rl; text-orientation: mixed; }
}


/* ==========================================================
   Ver.0.8.0 ENDING JAPANESE TEXT
   Canvas 224x384上で小さく日本語を描画して拡大する方式をやめ、
   日本語だけ実表示解像度のDOMテキストとして重ねる。
   ========================================================== */
.ending-text-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  display: none;
  color: #fff8e8;
  font-family: "NukkyLatin", "NukkyJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
.game-shell.is-ending .ending-text-layer {
  display: block;
}
.ending-dom-text {
  position: absolute;
  white-space: nowrap;
  transform: translateX(-50%);
  line-height: 1.15;
  text-align: center;
}
.ending-epilogue-viewport {
  position: absolute;
  overflow: hidden;
}
.ending-epilogue-roll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.ending-epilogue-line {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.ending-epilogue-line.special {
  color: #ffe268;
}






/* Ver.0.8.4: 本文が完全に消えたあと中央でフェイド表示 */
.ending-epilogue-finale {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  color: #8eea70;
  font-family: "NukkyLatin", ui-monospace, monospace;
  font-weight: 400;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
}

.ending-finale-line {
  display: block;
  width: auto;
  white-space: nowrap;
}

/* Ver.1.2.8: 1行目は左寄せ、2行目は右寄せ。
   ただし2行をまとめたブロック全体は画面中央に固定する。 */
.ending-finale {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
}
.ending-finale-line-1 {
  align-self: flex-start;
  text-align: left;
}
.ending-finale-line-2 {
  align-self: flex-end;
  text-align: right;
}


/* ==========================================================
   Ver.1.0.2 TITLE SUBTITLE
   ========================================================== */
.title-subtitle-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  overflow: hidden;
  pointer-events: none;
  font-family:
    "NukkyLatin",
    "NukkyJP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.title-subtitle-text {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #d8d2ae;
  line-height: 1.15;
  text-align: center;
}

.title-best-rank-text {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #8eea70;
  line-height: 1.15;
  text-align: center;
  font-family:
    "NukkyLatin",
    "NukkyJP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.title-best-rank-label {
  color: #f4f1cf;
}

.title-best-rank-value {
  color: #8eea70;
  font-size: 1.1667em;
}

.title-continue-text {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #f4f1cf;
  line-height: 1.15;
  text-align: center;
  font-family:
    "NukkyLatin",
    "NukkyJP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================
   Ver.0.9.1 STAGE READY DIALOG KATAKANA
   ========================================================== */
.stage-dialog-text-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  overflow: hidden;
  pointer-events: none;
  font-family:
    "NukkyLatin",
    "NukkyJP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.stage-dialog-kana-text {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #e9e3ba;
  line-height: 1.15;
  text-align: center;
}

/* ==========================================================
   Ver.0.9.0 NOTICE KATAKANA
   通知2行目は低解像度Canvasではなく実表示解像度のDOMで描画。
   ========================================================== */
.notice-text-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  overflow: hidden;
  pointer-events: none;
  font-family: "NukkyLatin", "NukkyJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.notice-kana-text {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  overflow: visible;
  color: #f1edcf;
  line-height: 1.15;
  text-align: center;
  text-shadow:
    0 0 0.08em var(--notice-glow, #fff3a0),
    0 0 0.22em var(--notice-glow, #fff3a0);
}

/* Ver.0.8.9 ending replay + game over actions */
.ending-replay-button {
  position: absolute;
  left: 50%;
  top: 67%;
  transform: translate(-50%, -50%);
  z-index: 3;
  min-width: 44%;
  padding: 6px 8px;
  border: 1px solid #8eea70;
  border-radius: 0;
  background: rgba(18, 34, 16, .92);
  color: #dffbd6;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: auto;
  cursor: pointer;
}

.ending-score-button {
  position: absolute;
  left: 50%;
  top: 86%;
  transform: translate(-50%, -50%);
  z-index: 3;
  min-width: 44%;
  padding: 6px 8px;
  border: 1px solid #fff3a0;
  border-radius: 0;
  background: rgba(34, 31, 16, .94);
  color: #fff3a0;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: auto;
  cursor: pointer;
}

.ending-score-back-button {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 7;
  min-width: 44%;
  padding: 6px 8px;
  border: 1px solid #8eea70;
  border-radius: 0;
  background: rgba(18, 34, 16, .92);
  color: #dffbd6;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: auto;
  cursor: pointer;
}

.gameover-dom-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  pointer-events: none;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
}

.gameover-title {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #8eea70;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(126,244,94,.28);
}

.gameover-replay-button {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  min-width: 46%;
  padding: 7px 9px;
  border: 1px solid #fff3a0;
  border-radius: 0;
  background: rgba(32, 34, 22, .96);
  color: #fff8e8;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: auto;
  cursor: pointer;
}


/* ==========================================================
   Ver.1.1.7 DEBUG MODE
   ?debug=1 の時だけJavaScriptで生成。
   ========================================================== */
.debug-ui-root {
  position: fixed;
  inset: 8px;
  z-index: 40;
  pointer-events: none;
}

.debug-toggle-button {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 34px;
  padding: 5px 6px;
  border: 1px solid #ffe16a;
  background: rgba(8,10,12,.90);
  color: #ffe16a;
  font: 700 8px/1 "NukkyLatin", "NukkyJP", monospace;
  pointer-events: auto;
}

.debug-panel {
  position: absolute;
  top: 31px;
  right: 6px;
  width: min(206px, calc(100% - 12px));
  max-height: calc(100% - 38px);
  overflow-y: auto;
  display: none;
  padding: 8px;
  border: 1px solid #c9c49c;
  background: rgba(5,8,7,.96);
  color: #f4f1cf;
  pointer-events: auto;
}

.debug-panel.is-open {
  display: block;
}

.debug-panel-title {
  margin-bottom: 7px;
  color: #8ef35e;
  font: 700 9px/1.2 "NukkyLatin", "NukkyJP", monospace;
  text-align: center;
}

.debug-stage-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  margin-bottom: 6px;
}

.debug-stage-input {
  width: 100%;
  min-width: 0;
  padding: 5px;
  border: 1px solid #747b68;
  background: #0b100c;
  color: #fff6cf;
  font: 700 9px/1 "NukkyLatin", "NukkyJP", monospace;
}

.debug-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.debug-action-button {
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid #747b68;
  background: #121912;
  color: #f4f1cf;
  font: 700 7px/1.15 "NukkyLatin", "NukkyJP", monospace;
}

.debug-action-button:active {
  transform: translate(1px,1px);
}

.debug-pause-button {
  width: 100%;
  margin-top: 6px;
  border-color: #ffe16a;
  color: #ffe16a;
}

.debug-help {
  margin-top: 6px;
  color: #9ca58e;
  font: 400 6px/1.35 "NukkyLatin", "NukkyJP", monospace;
  text-align: center;
}

.debug-resume-catcher {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  background: transparent;
  pointer-events: auto;
}


/* ==========================================================
   Ver.1.3.0 GAME END confirmation
   ========================================================== */
.game-end-dialog[hidden],
.save-dialog[hidden] { display: none !important; }
.game-end-dialog,
.save-dialog {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .68);
  pointer-events: auto;
}
.game-end-dialog-box,
.save-dialog-box {
  width: 82%;
  padding: 16px 10px 12px;
  border: 2px solid #c9c49c;
  background: rgba(10, 16, 9, .98);
  box-shadow: 0 0 0 2px #263321;
  text-align: center;
  color: #fff8e8;
  font-family: "NukkyLatin", "NukkyJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.game-end-dialog-message,
.save-dialog-message {
  margin-bottom: 14px;
  font-size: clamp(12px, 3.5vw, 17px);
  line-height: 1.35;
  white-space: nowrap;
}
.game-end-dialog-actions,
.save-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.game-end-dialog-actions button,
.save-dialog-actions button {
  width: 36%;
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid #707870;
  border-radius: 0;
  background: #171d18;
  color: #fff8e8;
  font-family: "NukkyLatin", "NukkyJP", sans-serif;
  font-size: clamp(11px, 3.2vw, 16px);
  cursor: pointer;
}
.game-end-dialog-actions button:focus-visible,
.save-dialog-actions button:focus-visible {
  outline: 2px solid #8eea70;
  outline-offset: 1px;
}

/* Ver.1.5.6 TITLE START CHOICE KANA
   ゲーム内文字と同じNukkyLatin優先のDOM/CSS描画。 */
.title-start-choice-text {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #f4f1cf;
  line-height: 1.15;
  text-align: center;
  font-family:
    "NukkyLatin",
    "NukkyJP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Debug controls scroll independently of the game canvas. */
html:has(.debug-panel.is-open), body:has(.debug-panel.is-open) { touch-action: pan-y; }
.debug-panel { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }