/* WHERE IS THE A — where-is-the-a.css
   reference: _reference/a-game.html（抜粋・スコープ調整して流用） */

/* ゲーム枠とボードを同じカラム幅に揃える */
.wita-wrap {
  width: 100%;
  max-width: 56.25rem;
  margin-inline: auto;
}

.wita-game {
  --cream: #FDF2D2;
  --cream-d: #F5E4B8;
  --white: #FDFBFB;
  --ink: #1F252F;
  --black: #010101;
  --cyan: #3FCCE2;
  --cyan-d: #03AFD5;
  --cyan-l: #A7EDEA;
  --pink: #FC6B93;
  --pink-d: #EE2677;
  --pink-l: #FFAEC4;
  --yellow: #FDB53C;
  --purple: #CF8BDE;

  color-scheme: light;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  color: var(--ink);
  image-rendering: pixelated;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.wita-game__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--arcade-line);
  background: var(--cream);
  container-type: size;
  container-name: wita;
}

/* FULL SCREEN（arcade-page.html）側の高さを他ゲームに寄せる */
.arcade-full-shell .wita-game__frame {
  height: min(72svh, 640px);
  min-height: 420px;
  aspect-ratio: unset;
}

/* scan lines（スタンドアロン参照の雰囲気） */
.wita-game__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  background: repeating-linear-gradient(
    0deg,
    rgba(31, 37, 47, 0.055) 0 1px,
    transparent 1px 3px
  );
}

.wita-game #app {
  position: relative;
  inset: auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wita-game * {
  box-sizing: border-box;
}

/* ---------- HUD ---------- */
.wita-game #hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--cream);
  opacity: 0;
  transition: opacity 0.15s steps(2);
}

.wita-game #hud.is-on {
  opacity: 1;
}

.wita-game #hud .cell {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.wita-game #hudStage {
  color: var(--cyan-d);
}

.wita-game #hudTime {
  color: var(--pink-d);
  font-variant-numeric: tabular-nums;
}

.wita-game #hudTime.warn {
  animation: wita-cue-blink 0.5s steps(2) infinite;
}

/* ---------- foot ---------- */
.wita-game #foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 10px;
  background: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s steps(2);
}

.wita-game #foot.is-on {
  opacity: 1;
  pointer-events: auto;
}

.wita-game .cell.px,
.wita-game .px {
  font-family: var(--font-display), var(--font-sans);
}

.wita-game .hbtn {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 16px;
  cursor: pointer;
  white-space: nowrap;
}

.wita-game .hbtn:active {
  background: var(--cyan-l);
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
}

.wita-game .hbtn:focus-visible {
  outline: 3px solid var(--cyan-d);
  outline-offset: 4px;
}

/* ---------- field ---------- */
.wita-game #field {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  background: var(--cream);
}

.wita-game .ch {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor,
    0 -1px 0 currentColor;
  transition: opacity 0.2s steps(2);
}

.wita-game #field.is-done .ch {
  opacity: 0.2;
}

.wita-game #field.is-done .ch--target {
  opacity: 1;
}

.wita-game .ch--target.is-hit {
  color: var(--cyan-d);
  position: relative;
  z-index: 10;
  animation: wita-hit 0.5s steps(4) forwards;
}

.wita-game .ch--target.is-shown {
  color: var(--pink-d);
  position: relative;
  z-index: 10;
  animation: wita-blink 0.6s steps(2) infinite;
}

.wita-game .ch.is-miss {
  color: var(--pink-d);
  opacity: 1 !important;
  position: relative;
  z-index: 10;
  animation: wita-shake 0.4s steps(2) 2;
}

@keyframes wita-hit {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2.6);
  }
}

@keyframes wita-blink {
  50% {
    opacity: 0.15;
  }
}

@keyframes wita-shake {
  0%,
  100% {
    transform: translateX(0) scale(1.8);
  }
  50% {
    transform: translateX(-4px) scale(1.8);
  }
}

/* ---------- overlay ----------
   使用: タイトル / キュー / 結果
   効果: 枠の高さ（cqh）に合わせて縮め、スクロールもクリップも出さない */
.wita-game .ov {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3cqh 4cqw;
  gap: 1.8cqh;
  background: var(--cream);
  isolation: isolate;
  contain: paint;
  overflow: hidden;
}

.wita-game .ov > * {
  max-width: 100%;
}

.wita-game .ov[hidden] {
  display: none;
}

/* iOS Safari で非表示オーバーレイ内のアニメーションが残るのを防ぐ */
.wita-game .ov[hidden] * {
  animation: none !important;
  visibility: hidden !important;
}

.wita-game .win {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  width: min(21em, 100%);
  background: var(--white);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pink-l);
  padding: 2cqh 3.5cqw;
  max-width: 21em;
}

.wita-game .win p {
  font-size: clamp(10px, 2.4cqh, 13px);
  line-height: 1.45;
}

.wita-game .win__sub {
  margin-top: 1.2cqh;
}

.wita-game .logo {
  flex: 0 0 auto;
  font-size: clamp(40px, 14cqh, 7.5rem);
  line-height: 1;
  color: var(--pink);
  text-shadow: 0.07em 0 0 var(--ink), -0.07em 0 0 var(--ink), 0 0.07em 0 var(--ink),
    0 -0.07em 0 var(--ink), 0.07em 0.07em 0 var(--ink), -0.07em 0.07em 0 var(--ink),
    0.07em -0.07em 0 var(--ink), -0.07em -0.07em 0 var(--ink), 0.14em 0.14em 0 var(--cyan);
}

.wita-game .tag {
  flex: 0 0 auto;
  font-size: clamp(10px, 2.2cqh, 11px);
  letter-spacing: 0.14em;
  color: var(--cyan-d);
  text-shadow: 0.12em 0.12em 0 var(--white);
}

.wita-game .cue {
  font-size: clamp(32px, 16cqh, 5.25rem);
  line-height: 1;
  color: var(--cyan-d);
  min-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  backface-visibility: hidden;
  text-shadow: 0.08em 0.08em 0 var(--cyan-l);
}

.wita-game .cue:empty {
  visibility: hidden;
}

.wita-game .cue.beat {
  color: var(--pink);
  font-size: clamp(28px, 12cqh, 4rem);
  text-shadow: 0.08em 0.08em 0 var(--pink-l);
}

.wita-game .pop {
  animation: wita-pop 0.12s steps(2);
}

@keyframes wita-pop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.wita-game .stageNo {
  font-size: clamp(10px, 2.4cqh, 12px);
  color: var(--ink);
  letter-spacing: 0.1em;
  transform: translateZ(0);
}

.wita-game .big {
  flex: 0 0 auto;
  font-size: clamp(22px, 6.5cqh, 3.625rem);
  line-height: 1.2;
}

.wita-game .big.ok {
  color: var(--cyan-d);
  text-shadow: 3px 3px 0 var(--cyan-l);
}

.wita-game .big.ng {
  color: var(--pink-d);
  text-shadow: 3px 3px 0 var(--pink-l);
}

.wita-game .note {
  flex: 0 0 auto;
  font-size: clamp(10px, 2.2cqh, 12px);
  color: var(--ink);
  line-height: 1.4;
}

.wita-game .splits {
  display: flex;
  flex-direction: column;
  gap: 0.35cqh;
  min-width: 0;
  width: 100%;
}

.wita-game .splits .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(10px, 2.15cqh, 12px);
  line-height: 1.3;
}

.wita-game .splits .row span:first-child {
  color: var(--ink);
}

.wita-game .splits .row span:last-child {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wita-game .splits .row.best span:last-child {
  color: var(--cyan-d);
}

.wita-game .splits .row.worst span:last-child {
  color: var(--pink-d);
}

.wita-game .total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1cqh;
  padding-top: 0.9cqh;
  border-top: 3px solid var(--ink);
  font-size: clamp(12px, 2.5cqh, 14px);
}

.wita-game .total span:first-child {
  color: var(--cyan-d);
}

.wita-game .total span:last-child {
  color: var(--pink-d);
  font-size: clamp(16px, 4cqh, 24px);
  font-variant-numeric: tabular-nums;
}

.wita-game .rbtn {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: clamp(14px, 3cqh, 17px);
  color: var(--white);
  background: var(--pink);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 1.8cqh 5cqw;
  cursor: pointer;
}

.wita-game .rbtn:active {
  background: var(--pink-d);
  box-shadow: 0 0 0 var(--ink);
  transform: translate(5px, 5px);
}

.wita-game .rbtn:focus-visible {
  outline: 3px solid var(--cyan-d);
  outline-offset: 4px;
}

.wita-game .blink {
  animation: wita-cue-blink 1s steps(2) infinite;
}

@keyframes wita-cue-blink {
  50% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wita-game * {
    animation: none !important;
    transition: none !important;
  }
}

/* 使用: スマホのゲーム枠
   効果: 4/3 だと高さが足りないので svh で縦を確保。中身は cqh で枠に合わせて縮む */
@media (max-width: 639px) {
  .wita-game__frame {
    aspect-ratio: unset;
    height: min(68svh, 560px);
    min-height: 380px;
    border-radius: 8px;
  }

  .wita-game #hud {
    padding: 8px 10px;
  }

  .wita-game #foot {
    padding: 8px;
  }
}

/* ---- ゲーム内スコア登録フォーム（オーバーレイ内） ---- */
.wita-rank-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.8cqh;
  width: min(21em, 100%);
  max-width: 21em;
}

.wita-rank-form[hidden] {
  display: none;
}

.wita-rank-form__name {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 12px;
  text-align: center;
  outline: none;
}

.wita-rank-form__name:focus {
  border-color: var(--cyan-d);
  box-shadow: 3px 3px 0 var(--cyan-d);
}

.wita-rank-form__name:disabled {
  opacity: 0.5;
}

.wita-rank-form__submit {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white);
  background: var(--cyan-d);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.wita-rank-form__submit:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(3px, 3px);
}

.wita-rank-form__submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.wita-rank-form__submit:focus-visible {
  outline: 3px solid var(--pink-d);
  outline-offset: 4px;
}

.wita-rank-form__status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  min-height: 1.2em;
}