/* ── TOKENS（ファミコン期のアーケード調パレット） ─────────── */
:root {
  --bg:      #000000;
  --amber:   #f8b800;
  --thread:  #f83800;
  --sea-cyan: #3cbcfc;
  --sea-blue: #2038ec;
  --sea-deep: #101f9c;
  --pink:    #f878f8;
  --paper:   #f8e8c8;
  --paper-shadow: #d0a048;
  --paper-light: #fcf4dc;
  --ink:     #000000;
  --text:    #fcfcfc;
  --muted:   #bcbcbc;
  --muted-dim: #7c7c7c;
  --surface: #000000;
  --border:  #3cbcfc;
  --nav-h:   58px;
  --blush:   #f87858;
  --shimi:       #6888fc;
  --shimi-dark:  #0058f8;
  --shimi-sheen: #bcbcfc;
  --thimble:        #f8b800;
  --thimble-shadow: #ac7c00;
  --thimble-shine:  #fce8a0;
  --font-jp: 'DotGothic16', 'Hiragino Kaku Gothic ProN', monospace;
  --font-en: 'Press Start 2P', 'DotGothic16', monospace;
}

/* ── RESET ──────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-jp);
  -webkit-font-smoothing: none;
  overflow-x: hidden;
}
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
h1, h2, h3, p { font-weight: 400; }

/* ── 背景（黒＋走査線） ──────────────────────────────── */
#game-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
      transparent 1px, transparent 4px),
    var(--bg);
}

/* ── NAV ────────────────────────────────────────────── */
.g-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  z-index: 10;
}
.g-back {
  font-family: var(--font-en);
  font-size: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--muted-dim);
  color: var(--muted);
  visibility: hidden;
}
.g-nav.show-back .g-back { visibility: visible; }
.g-back:hover { border-color: var(--border); color: var(--text); }
.g-home {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border: 3px solid var(--muted-dim);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.g-home:hover { border-color: var(--border); color: var(--text); }
@media (max-width: 480px) {
  .g-home { font-size: 9px; padding: 7px 9px; letter-spacing: 0.03em; }
}

/* ── SCREENS（共通） ────────────────────────────────── */
#screens {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) 20px 80px;
}
.screen {
  display: none;
  width: 100%;
  max-width: 560px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.screen.is-active {
  display: flex;
  animation: screenIn 0.3s steps(3, end) both;
}
@keyframes screenIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── ドット絵スプライト共通パレット ─────────────────────
   4キャラ（ツヅリ・紙魂・折り鶴・カガリ）は rect のドット絵。
   fill はすべてこのクラス経由で与える。 */
.px-paper       { fill: var(--paper); }
.px-paper-sh    { fill: var(--paper-shadow); }
.px-paper-hi    { fill: var(--paper-light); }
.px-ink         { fill: var(--ink); }
.px-thread      { fill: var(--thread); }
.px-blush       { fill: var(--blush); }
.px-white       { fill: var(--text); }
.px-amber       { fill: var(--amber); }
.px-shimi       { fill: var(--shimi); }
.px-shimi-dark  { fill: var(--shimi-dark); }
.px-shimi-sheen { fill: var(--shimi-sheen); }
.px-gold        { fill: var(--thimble); }
.px-gold-sh     { fill: var(--thimble-shadow); }
.px-gold-hi     { fill: var(--thimble-shine); }
.crane-plate    { fill: var(--paper-light); stroke: none; }

/* ── TITLE SCREEN ───────────────────────────────────── */
.g-title-logo {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: clamp(30px, 8vw, 44px);
  letter-spacing: 0.1em;
  color: var(--amber);
  text-shadow: 3px 3px 0 var(--thread);
}
.g-title-logo-sub {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-shadow: none;
}
.tsuzuri-portrait {
  width: clamp(96px, 24vw, 130px);
  height: auto;
}
/* ロゴをつつくとツヅリが反応（3種の動きからランダム） */
.tsuzuri-portrait.is-react-hop {
  animation: tsuzuriHop 0.6s steps(6, end);
}
@keyframes tsuzuriHop {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-14px); }
  60%      { transform: translateY(0); }
  80%      { transform: translateY(-5px); }
}
.tsuzuri-portrait.is-react-wiggle {
  animation: tsuzuriWiggle 0.9s steps(8, end);
}
@keyframes tsuzuriWiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(-10px) rotate(-4deg); }
  40%      { transform: translateY(0) rotate(3deg); }
  60%      { transform: translateY(-6px) rotate(-3deg); }
  80%      { transform: translateY(0) rotate(2deg); }
}
.tsuzuri-portrait.is-react-squash {
  animation: tsuzuriSquash 0.55s steps(5, end);
}
@keyframes tsuzuriSquash {
  0%, 100% { transform: scale(1, 1); }
  30%      { transform: scale(1.12, 0.85); }
  65%      { transform: scale(0.92, 1.1); }
}

/* ── モードメニュー（原作のSELECT画面式） ─────────────── */
.mode-choices {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  border: 4px solid var(--border);
  background: var(--surface);
}
.mode-btn {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "cursor title" ". sub";
  align-items: baseline;
  column-gap: 4px;
  text-align: left;
  padding: 9px 10px;
}
.mode-btn::before {
  content: '▶';
  grid-area: cursor;
  font-size: 12px;
  color: var(--pink);
  visibility: hidden;
}
.mode-btn:hover::before,
.mode-btn:focus-visible::before {
  visibility: visible;
  animation: cursorBlink 0.8s steps(1, end) infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.mode-btn-title {
  grid-area: title;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--text);
}
.mode-btn:hover .mode-btn-title,
.mode-btn:focus-visible .mode-btn-title { color: var(--amber); }
.mode-btn-sub {
  grid-area: sub;
  font-size: 13px;
  color: var(--muted-dim);
}
.g-greeting {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 30em;
}

/* ── 対話（プレイ中・結果画面のセリフ＝RPGの会話窓） ──── */
.tz-dialogue {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border: 4px solid var(--border);
  background: var(--surface);
}
.tsuzuri-avatar {
  flex: none;
  width: 44px;
  height: auto;
  margin-top: 2px;
}

/* ── CATEGORY SCREEN ────────────────────────────────── */
.g-heading {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--amber);
}
.category-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}
.category-btn {
  padding: 18px 12px;
  background: var(--surface);
  border: 3px solid var(--border);
  font-size: 16px;
  color: var(--text);
}
.category-btn:hover {
  background: var(--sea-cyan);
  color: var(--ink);
}

/* ── GAME SCREEN ────────────────────────────────────── */
.g-hud {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.g-hint {
  font-size: clamp(18px, 5vw, 24px);
  padding: 16px 24px;
  border: 3px solid var(--sea-blue);
  background: var(--surface);
}
.g-hint.is-blind {
  font-size: 14px;
  color: var(--muted-dim);
  letter-spacing: 0.04em;
}
.answer-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.answer-blanks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.answer-blank {
  width: 36px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  border: 3px solid var(--sea-blue);
  color: var(--ink);
  background: var(--surface);
}
.answer-blank.is-filled {
  border-color: var(--amber);
  background: var(--paper);
}
.answer-blank.just-filled { animation: blankFill 0.4s steps(2, end); }
.answer-blank.just-bitten { animation: blankBite 0.5s steps(4, end); }
@keyframes blankFill {
  0%   { background: var(--amber); }
  100% { background: var(--paper); }
}
@keyframes blankBite {
  0%   { transform: translateX(0); border-color: var(--shimi); }
  30%  { transform: translateX(-3px); }
  60%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* ── 紙魂クリーチャー（answer-stage内に絶対配置・タップで追い払う） ── */
.shimi-creature {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: auto;
  padding: 6px;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  z-index: 5;
}
.shimi-creature svg { display: block; width: 100%; height: auto; }
.shimi-creature.is-active {
  animation: shimiCrawlIn 0.3s steps(3, end) forwards, shimiPulse 0.9s steps(1, end) 0.3s infinite;
}
.shimi-creature.is-shooed { animation: shimiShooed 0.35s steps(3, end) forwards; }
@keyframes shimiCrawlIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes shimiPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}
@keyframes shimiShooed {
  to { opacity: 0; transform: translate(-50%, -140%) scale(0.5); }
}
/* おすそわけ——満足した紙魂が小さく跳ねて、するりと去る */
.shimi-creature.is-content { animation: shimiContent 0.6s steps(4, end) forwards; }
@keyframes shimiContent {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  40%  { opacity: 1; transform: translate(-50%, -64%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
}

/* ── 落ち綴り（舞い落ちる文字を捕まえるモード） ─────────── */
.catch-stage {
  position: relative;
  width: 100%;
  height: clamp(220px, 46vw, 320px);
  background: var(--surface);
  border: 4px solid var(--border);
  overflow: hidden;
  touch-action: none;
}
.catch-falling-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.catch-crane {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
}
.catch-crane-inner {
  position: relative;
}
.catch-crane-letter {
  display: block;
  font-family: var(--font-en);
  font-size: 24px;
  color: var(--text);
  pointer-events: none;
}
.catch-crane.is-caught .catch-crane-inner { animation: catchCraneCaught 0.3s steps(3, end) forwards; }
.catch-crane.is-missed .catch-crane-inner { animation: catchCraneMissed 0.3s steps(3, end) forwards; }
@keyframes catchCraneCaught {
  to { opacity: 0; transform: scale(0.4); }
}
@keyframes catchCraneMissed {
  to { opacity: 0; transform: translateY(10px) scale(0.7); }
}
.catch-catcher {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 56px;
  height: auto;
  pointer-events: none;
  will-change: transform;
}
.catch-catcher svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 文字タイル ─────────────────────────────────────── */
.letter-field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 420px;
}
.letter-tile {
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 3px solid var(--border);
  color: var(--text);
  font-family: var(--font-en);
  font-size: 15px;
}
.letter-tile:hover { background: var(--sea-cyan); color: var(--ink); }
.letter-tile.is-wrong { animation: tileShake 0.32s steps(4, end); border-color: var(--muted-dim); }
.letter-tile.is-leaving { animation: tileLeave 0.3s steps(3, end) forwards; }
@keyframes tileShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
@keyframes tileLeave {
  to { opacity: 0; transform: translateY(-16px) scale(0.7); }
}
/* 紙魂のおすそわけ——次の正解タイルが3度またたく */
.letter-tile.is-hinted { animation: tileHint 1.8s steps(2, end); }
@keyframes tileHint {
  0%, 40%, 80%   { background: var(--shimi-dark); color: var(--text); border-color: var(--shimi-sheen); }
  20%, 60%, 100% { background: var(--surface); border-color: var(--border); }
}
/* 単語完成後の「次へ」の合図（RPGの▼カーソル） */
.advance-cue {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--pink);
  animation: cursorBlink 0.8s steps(1, end) infinite;
}
.g-tsuzuri-line {
  flex: 1;
  min-width: 0;
  min-height: 1.6em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  text-align: left;
}

/* ── RESULT SCREEN ──────────────────────────────────── */
/* 今夜綴った語を赤い綴じ糸が一針ずつ縫い留め、最後に頁が閉じる */
.result-binding {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  padding: 16px 14px;
  border: 4px solid var(--muted-dim);
  background: var(--surface);
}
.bind-word {
  position: relative;
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--paper);
  padding: 4px 6px 4px 14px;
  opacity: 0;
  animation: bindStitch 0.3s steps(3, end) forwards;
}
.bind-word::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--thread);
}
@keyframes bindStitch {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-binding.is-bound {
  border-color: var(--thread);
  box-shadow: 6px 6px 0 0 var(--thread);
  animation: bindClose 0.5s steps(4, end);
}
@keyframes bindClose {
  from { box-shadow: 0 0 0 0 transparent; }
  to   { box-shadow: 6px 6px 0 0 var(--thread); }
}
.g-result-line {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  text-align: left;
}
.g-result-stats {
  font-size: 14px;
  color: var(--muted);
}
.g-result-actions {
  display: flex;
  gap: 12px;
}

/* ── BUTTONS ────────────────────────────────────────── */
.g-btn {
  padding: 13px 28px;
  font-size: 15px;
  border: 3px solid var(--border);
}
.g-btn-primary { background: var(--amber); border-color: var(--amber); color: var(--ink); box-shadow: 4px 4px 0 var(--thread); }
.g-btn-primary:hover { background: var(--paper-light); border-color: var(--paper-light); }
.g-btn-ghost { background: transparent; color: var(--text); }
.g-btn-ghost:hover { background: var(--sea-cyan); color: var(--ink); }

/* ── FOOTER ─────────────────────────────────────────── */
/* 原作1面の波止場の海——フッターを文書末尾の海の帯にする */
.g-footer {
  position: relative;
  text-align: center;
  padding: 26px 20px 30px;
  font-size: 12px;
  color: rgba(252,252,252,0.9);
  border-top: 6px solid var(--sea-cyan);
  background: linear-gradient(to bottom,
    var(--sea-blue) 0px, var(--sea-blue) 26px,
    var(--sea-deep) 26px);
}

/* ── モバイル／熱対策（既存サイトの知見を踏襲） ───────── */
@media (pointer: coarse) {
  .catch-crane-inner { animation-duration: 1.8s; }
}
@media (max-width: 480px) {
  .letter-tile { width: 40px; height: 40px; font-size: 13px; }
  .answer-blank { width: 30px; height: 38px; font-size: 13px; }
  .shimi-creature { width: 38px; }
  .catch-stage { height: clamp(180px, 52vw, 240px); }
  .catch-crane { width: 58px; }
  .catch-catcher { width: 46px; }
  .g-title-logo { font-size: 28px; }
}

/* ── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}