/* とびめがね ゲーム画面。配色は /Users/pokopy/Workspace/apps/design.md テーマG */
:root {
  --bg: #EAF7F5;
  --panel: #ffffff;
  --topbg: #d5efeb;
  --ink: #3C2415;
  --sub: #7a685f;
  --accent: #4DBCBC;
  --hero: #F7931E;
  --c-red: #ff6b6b;
  --ok: #0f8a2b;
  --gold: #ffd166;
  --line: #bfdcd7;
  --key-back: #efe9e6;

  /* カードの大きさは画面の幅と高さの小さいほうに合わせる（すらぷりの箱の比率） */
  --card-w: clamp(64px, min(14vw, 30vh), 150px);
  --card-h: calc(var(--card-w) * 0.68);
  --card-gap: calc(var(--card-w) * 0.28);
  --arc-space: calc(var(--card-h) * 0.75);
  --key: clamp(44px, min(9vw, 14vh), 72px);
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit; color: inherit; cursor: pointer;
  touch-action: manipulation;
}

.screen {
  display: flex; flex-direction: column; height: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---- 上の帯（もどる・進み具合のドット）---- */
.bar {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  gap: 12px; padding: 8px 16px; background: var(--topbg);
  padding-top: max(8px, env(safe-area-inset-top));
}
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--panel); color: var(--sub);
  border: 2px solid var(--line); border-radius: 12px;
}
.icon-btn:active { transform: translateY(2px); }
#dots {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: 12px;
}
#dots li {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--line);
}
#dots li.current { border: 3px solid var(--accent); }
#dots li.done { background: var(--accent); border: 3px solid var(--accent); }

/* ---- 問題（上 2/3）---- */
#board {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.row {
  position: relative; display: flex; gap: var(--card-gap);
  padding-top: var(--arc-space);
}
/* カードの中心を通る1本の線（両はしは少しはみ出す）。カードはこの線の上に乗る */
.row::before {
  content: ''; position: absolute; z-index: 0;
  left: calc(var(--card-w) * -0.35); right: calc(var(--card-w) * -0.35);
  top: calc(var(--arc-space) + var(--card-h) / 2 - 2px);
  height: 4px; background: var(--accent); border-radius: 2px;
}
.card {
  position: relative; z-index: 1;
  width: var(--card-w); height: var(--card-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 4px solid var(--accent); border-radius: 14px;
  font-size: calc(var(--card-h) * 0.5); font-weight: 800; line-height: 1;
}
.card.blank { border: 5px solid var(--hero); }
.card.blank.ok { border-color: var(--accent); color: var(--accent); }
/* 入れる場所のしるし（点滅する縦棒）。答えているときだけ */
.card.blank.answering::after {
  content: ''; width: 4px; height: 0.9em; margin-left: 2px;
  background: var(--hero); border-radius: 2px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
/* まちがえたら、打った数字がふっと下へ消える（×は出さない） */
.typed.fade { animation: drop 0.4s ease-in forwards; }
@keyframes drop {
  to { opacity: 0; transform: translateY(0.35em); }
}

/* ヒントの弧（カードの上にかかる点線のジャンプ）*/
#hints {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
#hints .arc { animation: hint-in 0.6s ease-out both; }
#hints .arc-line {
  fill: none; stroke: var(--accent); stroke-width: 3;
  stroke-dasharray: 6 5; opacity: 0.8;
}
#hints .arc-head { fill: var(--accent); }
#hints text { fill: var(--accent); font-family: inherit; font-weight: 800; }
@keyframes hint-in { from { opacity: 0; } }

/* ---- テンキー（下 1/3）---- */
#keypad {
  display: grid;
  grid-template-columns: repeat(6, calc(var(--key) * 1.25));
  grid-template-rows: repeat(2, var(--key));
  gap: 8px; justify-content: center;
  padding: 8px 16px max(12px, env(safe-area-inset-bottom));
}
.key {
  display: grid; place-items: center;
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px;
  font-size: calc(var(--key) * 0.5); font-weight: 800;
  box-shadow: 0 2px 0 var(--line);
}
.key.back {
  grid-column: 6; grid-row: 1 / span 2;
  background: var(--key-back); color: var(--sub);
}
.key:active { transform: translateY(2px); box-shadow: none; }
/* キーボードで押したときも、画面のキーが沈んで見える */
.key.pressed { animation: press 0.15s ease-out; }
@keyframes press {
  0%, 60% { transform: translateY(2px); box-shadow: none; }
}

/* ---- 正解の ⭕（ピンポン式）---- */
#pop {
  position: fixed; left: 50%; top: 42%; z-index: 10;
  width: min(46vh, 30vw); aspect-ratio: 1;
  border: clamp(12px, 3.2vh, 22px) solid var(--c-red); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  pointer-events: none;
}
#pop.show { animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---- タイトル画面（6枚の札）---- */
.title-bar { display: flex; align-items: baseline; gap: 12px; }
.title-bar h1 { margin: 0; font-size: 18px; font-weight: 800; }
#ver { font-size: 12px; color: var(--sub); }
#tiles {
  flex: 1; min-height: 0; width: 100%; max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
}
.tile {
  position: relative; min-height: 44px;
  display: grid; place-items: center;
  background: var(--panel); color: var(--accent);
  border: 4px solid var(--accent); border-radius: 18px;
  box-shadow: 0 3px 0 var(--line);
}
.tile:active { transform: translateY(2px); box-shadow: none; }
.tile .ex { display: flex; gap: 6px; }
.tile .ex b {
  min-width: 2.2em; padding: 6px 6px;
  border: 2px solid var(--accent); border-radius: 8px;
  color: var(--ink); font-size: clamp(14px, min(2.4vw, 5vh), 26px); font-weight: 800;
}
.tile.locked { opacity: 0.4; border-color: var(--line); cursor: default; }
.tile.locked:active { transform: none; box-shadow: 0 3px 0 var(--line); }
.tile .lock { position: absolute; right: 10px; bottom: 8px; color: var(--sub); }
.tile .mark {
  position: absolute; top: 8px; right: 10px;
  width: 20px; height: 20px; border: 3px solid var(--c-red); border-radius: 50%;
}
.tile.opening { animation: tile-open 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tile-open {
  0% { transform: scale(0.7); box-shadow: 0 0 0 0 var(--gold); }
  60% { transform: scale(1.06); box-shadow: 0 0 0 10px var(--gold); }
  100% { transform: scale(1); box-shadow: 0 3px 0 var(--line); }
}

/* ---- 縦向きのときは覆う ---- */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: var(--bg); color: var(--ink);
  align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; text-align: center; padding: 24px;
}
@media (max-aspect-ratio: 1/1) {
  #rotate { display: flex; }
}