/* ==========================================
   てんとくんシューター
   共通部分（色・ボタン・ダイアログ・効果）は ../../assets/css/game-base.css
   ========================================== */
:root {
  --color-field: #070d1f;
  --color-popup: #fde047;
}

/* ==========================================
   Layout
   ========================================== */
.app {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 長いタイトルで横にはみ出さないように（省略して表示する） */
  gap: 12px;
  touch-action: manipulation; /* ダブルタップで拡大しない（iPhone は連打で効かないことがあるので main.js でも止める） */
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app-header__title {
  margin: 0;
  min-width: 0;
  font-size: clamp(15px, 4.2vw, 24px);
  letter-spacing: .02em;
  white-space: nowrap;
}
.app-header__tools { display: flex; gap: 4px; }
.icon-btn:disabled { opacity: .35; cursor: default; }

.game {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.app-footer {
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
}

/* ==========================================
   Field（画面）
   ========================================== */
.field-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.field {
  display: block;
  width: 240px;          /* main.js が画面に合わせて書き換える */
  height: 360px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-field);
  touch-action: none;    /* なぞったときに画面がスクロールしないように */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 一時停止ボタン（画面の右上に重ねる） */
.field-pause {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  background: rgba(11, 18, 34, .7);
}
.field-pause svg { width: 18px; height: 18px; }

/* 点数・ステージなどの文字 */
.popup-layer { position: absolute; inset: 0; pointer-events: none; }
.popup {
  position: absolute;
  margin: 0;
  translate: -50% -50%;
  font-size: clamp(18px, 6vw, 26px);
  font-weight: 900;
  white-space: nowrap;
  color: var(--color-popup);
  text-shadow: 0 2px 0 #7c2d12, 0 0 12px rgba(0, 0, 0, .6);
  animation: popup 1.6s ease-out forwards;
}
.popup small { display: block; font-size: .6em; text-align: center; }
.popup--warning { color: #f87171; text-shadow: 0 2px 0 #450a0a, 0 0 14px rgba(248, 113, 113, .6); animation-name: popup-blink; animation-duration: 2.4s; }
@keyframes popup {
  0% { opacity: 0; scale: .5; }
  12% { opacity: 1; scale: 1.15; }
  25% { scale: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes popup-blink {
  0%, 20%, 40%, 60%, 80% { opacity: 1; }
  10%, 30%, 50%, 70% { opacity: .2; }
  100% { opacity: 0; }
}
.fx-reduced .popup { animation-name: popup-fade; }
@keyframes popup-fade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================
   Screens（タイトル・一時停止・ゲームオーバー）
   ========================================== */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  text-align: center;
  background: rgba(5, 8, 22, .84);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-md);
  overflow-y: auto;
}
.screen[hidden] { display: none; }
.fx-reduced .screen { backdrop-filter: none; }

.screen__face {
  width: clamp(72px, 26%, 120px);
  height: auto;
  border-radius: 24%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.screen__title { margin: 0; font-size: clamp(18px, 5.5vw, 24px); }
.screen__best { margin: 0; font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.screen__best b { color: var(--color-text); }
.screen .btn { min-width: 140px; }
.screen__record {
  margin: 0;
  font-weight: 900;
  color: var(--color-popup);
}
.screen__howto {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
}
.screen__howto b { color: var(--color-text); }

.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  width: min(100%, 240px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(2, 6, 23, .5);
}
.modes__btn {
  appearance: none;
  display: grid;
  place-content: center;
  min-height: var(--tap);
  padding: 2px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.modes__btn small { font-size: 11px; font-weight: 400; }
.modes__btn:hover { color: var(--color-text); }
.modes__btn[aria-pressed="true"] { background: var(--color-surface-raised); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); }

.result {
  display: flex;
  gap: 20px;
  margin: 0;
}
.result div { display: grid; gap: 2px; }
.result dt { font-size: 12px; color: var(--color-muted); }
.result dd { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 設定：動く量の数値 */
.field__label output { margin-left: 6px; font-weight: 400; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.keys {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: var(--color-muted);
}
/* タッチ操作の端末ではキーボードの説明を出さない */
@media (hover: none) {
  .keys { display: none; }
}

/* ==========================================
   スマホ横向き：画面の高さいっぱいに表示する
   main.js の landscapeQuery と合わせる
   ========================================== */
@media (orientation: landscape) and (max-height: 600px) {
  .app { width: min(100%, 860px); padding: 8px 16px; gap: 6px; }
  .app-footer, .keys { display: none; }
  /* 画面が小さいので、タイトル画面は絵と説明を省く */
  .screen { gap: 8px; padding: 10px 8px; }
  .screen__face, .screen__howto { display: none; }
  .screen__title { font-size: 17px; }
}