/* oboe (覚え) - 絵文字と数字を記憶する暗記ゲーム */

:root {
  --bg: #20212b;
  --panel: #2a2c3a;
  --text: #e8e6f0;
  --text-dim: #9a97ab;
  --accent: #d9b26f;
  --correct: #84a59d;
  --wrong: #c98d94;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  touch-action: manipulation;
  overscroll-behavior: none;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
}

/* ========================================
   ヘッダー
   ======================================== */

#header {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  flex: 0 0 auto;
  margin-bottom: 10px;
}

#game-title {
  font-family: Georgia, "Times New Roman", "Hiragino Mincho ProN", serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--text-dim);
  margin: 0;
}

#score-display {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

#score-value {
  color: var(--text);
  font-weight: 700;
}

#lives-display {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.heart {
  color: var(--wrong);
}

.heart.heart-lost {
  color: var(--panel);
}

#giveup-button {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 16px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  opacity: 0.6;
  cursor: pointer;
}

/* ========================================
   ログ（記憶タイム）
   ======================================== */

#log-wrap {
  flex: 0 0 auto;
  width: 100%;
  /* logVisible=4 が既定値。CONFIG.logVisible を変えてもここは行数×高さで自動追従する。
     9 に戻した場合でも 375x667 に収まるよう clamp の上限を抑えてある。 */
  height: clamp(88px, 22dvh, 148px);
  background: var(--panel);
  border-radius: 12px;
  padding: 4px 10px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

#log {
  position: relative;
  width: 100%;
  height: 100%;
}

.log-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  /* top/opacity の 260ms は game.js CONFIG.scrollMs と手動で同期している（yose/narabe と同じ方式） */
  transition: top 0.26s ease, opacity 0.26s ease;
}

.log-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  font-size: clamp(14px, 4.4dvh, 20px);
  flex: 0 0 auto;
}

.log-digits {
  font-variant-numeric: tabular-nums;
  font-size: clamp(13px, 4dvh, 18px);
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ========================================
   現在カード
   ======================================== */

#current-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

#current-card {
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
}

#current-emoji {
  font-size: clamp(36px, 11dvh, 56px);
  line-height: 1;
}

#current-digits {
  display: flex;
  gap: 8px;
}

.digit-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 9dvh, 44px);
  height: clamp(40px, 12dvh, 58px);
  font-size: clamp(24px, 7.5dvh, 38px);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--panel);
  border-radius: 8px;
  /* flash の点灯・消灯の両方をフェードさせるため基底に置く（.flash 側に置くと消灯時に効かない） */
  transition: background 0.15s ease, color 0.15s ease;
}

.digit-box.blank {
  color: var(--text-dim);
}

/* 桁数が少ないとき（既定 digits=1）の間延び防止。#app に game.js が付ける
   digits-N クラスで切り替える。digits=3 の見た目には影響しない */
#app.digits-1 #current-card {
  gap: 10px;
}

#app.digits-1 .digit-box {
  width: clamp(40px, 12dvh, 58px);
}

#app.digits-1 .log-digits {
  letter-spacing: 0.15em;
}

.digit-box.wrong {
  color: var(--wrong);
  background: rgba(201, 141, 148, 0.18);
}

/* 正解時に光る演出（CONFIG.flashMs=300ms と同期） */
#current-card.flash .digit-box {
  background: var(--correct);
  color: #1a2320;
}

/* 新規カード登場時の短い演出（CONFIG.settleMs=300ms と同期。見た目だけで入力はいつでも受け付ける） */
@keyframes settle-wiggle {
  0%   { transform: translateY(-4px); opacity: 0.7; }
  60%  { transform: translateY(1px);  opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

#current-card.settling #current-emoji,
#current-card.settling .digit-box {
  animation: settle-wiggle 0.3s ease;
}

/* 不正解時の揺れ */
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

#current-card.wrong-shake {
  animation: wrong-shake 0.35s ease;
}

/* ========================================
   下段スロット（start / keypad / gameover を切り替えて使い回す）
   ======================================== */

#bottom-slot {
  flex: 0 0 auto;
  width: 100%;
}

.hidden {
  display: none !important;
}

/* ---- start ---- */

#start-panel {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

#start-button {
  min-height: 52px;
  min-width: 160px;
  padding: 12px 40px;
  font-size: 16px;
  letter-spacing: 0.1em;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #2a2410;
  font-weight: 700;
  cursor: pointer;
}

#start-button:active {
  transform: scale(0.97);
}

/* ---- keypad（電話配列: 1-2-3 / 4-5-6 / 7-8-9 / 空-0-⌫） ---- */

#keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.key {
  min-height: 52px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  border: none;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.key:active {
  background: var(--accent);
  color: #2a2410;
}

.key-empty {
  background: transparent;
  pointer-events: none;
}

.key-back {
  color: var(--text-dim);
  font-size: 18px;
}

/* ---- gameover ---- */

#gameover-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

#gameover-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--wrong);
}

#gameover-stats {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

#restart-button {
  min-height: 48px;
  min-width: 140px;
  padding: 10px 32px;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #2a2410;
  font-weight: 600;
  cursor: pointer;
}

#restart-button:active {
  transform: scale(0.97);
}