/* ゲームページ（2026-10-23 標本ラベル）。到着・結果は縦の流れ、プレイ中はキーボードを除いた見える範囲に固定する。
   文字は最小限: 状態はハートの形・目盛り・数字・色で見せ、言葉は1語まで。 */
.gp {
  max-width: 35rem; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding-block: 8px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.gp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; }
.gp-title { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 1rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.gp-head-r { display: flex; gap: 6px; }

/* ---------- ステージに重ねる表示（左上＝ハート、右上＝タイマーと一時停止、左下＝解いた数と時間） ----------
   入力欄のすぐ上にあるので、スマホでキーボードを開いても一緒に見える */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.stage-badge, .stage-count { position: absolute; background: var(--card); border: var(--lw) solid var(--ink); }
.stage-badge { left: 8px; top: 8px; display: flex; align-items: center; padding: 5px 8px; }
.hud-r { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; align-items: center; }
.hud-pause { pointer-events: auto; width: 36px; height: 36px; }
.stage-count { left: 8px; bottom: 8px; display: flex; align-items: baseline; gap: 2px; padding: 3px 9px 4px; font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.stage-count b { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.stage-count small { font-family: var(--f-body); font-weight: 700; font-size: .66rem; margin-right: 8px; }
.stage-count span { font-weight: 500; font-size: .82rem; }
/* ハート: 塗り＝残り、輪郭だけ＝失ったぶん（形の違いで読める） */
.lives { display: flex; gap: 3px; }
.heart { display: block; width: clamp(16px, 4.6vw, 20px); aspect-ratio: 24 / 22; }
.heart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.heart path { fill: var(--heart); stroke: var(--heart); stroke-width: 1.5; stroke-linejoin: round; }
.heart.empty path { fill: transparent; stroke: var(--ink); stroke-width: 1.6; opacity: .45; }
.heart.lost { animation: heart-break .5s cubic-bezier(.2, 0, 0, 1); }
.heart.lost path { animation: heart-drain .5s cubic-bezier(.3, 0, 1, 1); }
.lives.last .heart:first-child { animation: heart-beat .9s ease-in-out infinite; }
/* 10問ごとに戻った1つ: 小さくから器いっぱいにふくらみ、色が満ちる */
.heart.gain { animation: heart-gain .6s cubic-bezier(.175, .885, .32, 1.275); }
.heart.gain path { animation: heart-fill .6s ease-out; }
@keyframes heart-break { 0% { transform: scale(1.6); } 25% { transform: scale(1.35) translateX(-3px) rotate(-8deg); } 50% { transform: scale(1.2) translateX(3px) rotate(6deg); } 75% { transform: scale(1.08) translateX(-1px); } 100% { transform: none; } }
@keyframes heart-drain { 0%, 45% { fill: var(--heart); stroke: var(--heart); opacity: 1; } 100% { fill: transparent; stroke: var(--ink); opacity: .45; } }
@keyframes heart-gain { 0% { transform: scale(.4); } 60% { transform: scale(1.45); } 100% { transform: none; } }
@keyframes heart-fill { 0% { fill: transparent; stroke: var(--ink); opacity: .45; } 45%, 100% { fill: var(--heart); stroke: var(--heart); opacity: 1; } }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
/* タイマー: 細い輪と数字。残り5秒で朱 */
.timer { position: relative; width: 42px; height: 42px; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.timer-track { fill: var(--card); stroke: var(--wash); stroke-width: 5; }
.timer-fill { fill: none; stroke: var(--ink); stroke-width: 5; }
.timer-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-num); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.timer.idle { opacity: .5; }
.timer.warn .timer-fill { stroke: var(--accent); }
.timer.warn .timer-num { color: var(--accent); }
.timer.beat { animation: beat .32s cubic-bezier(.2, 0, 0, 1); }
.timer.paused .timer-fill { stroke: var(--muted); }
@keyframes beat { 0% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- ステージ ---------- */
.stage {
  position: relative; isolation: isolate; width: 100%;
  aspect-ratio: 10 / 7; overflow: hidden;
  background: var(--wash); border: var(--lw) solid var(--ink);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-title { position: absolute; left: 12px; top: 12px; display: grid; gap: 1px; pointer-events: none; }
.stage-title b { font-size: 1.1rem; font-weight: 700; }
/* 合図は札で出す（揺れて入る） */
.banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; text-align: center; padding: 0 6%; }
.banner-box { padding: 8px 18px 10px 28px; min-width: 8rem; max-width: 92%; }
.banner-box.in { animation: banner-in .38s cubic-bezier(.2, 0, 0, 1) both; transform-origin: 12px 50%; }
@keyframes banner-in { from { transform: rotate(-8deg) translateY(-6px); opacity: 0; } 60% { transform: rotate(2deg); opacity: 1; } to { transform: none; opacity: 1; } }
.banner-eyebrow { margin: 0; font-family: var(--f-num); font-weight: 700; font-size: .66rem; letter-spacing: .18em; }
.banner-eyebrow:empty, .banner-sub:empty { display: none; }
.banner-title { margin: 0; font-weight: 700; font-size: clamp(1.5rem, 7vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.banner-sub { margin: 0; font-weight: 700; font-size: .85rem; }
.banner.good .banner-title { color: var(--ok); }
.banner.bad .banner-title { color: var(--accent); }
.pause-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(244, 244, 241, .94); font-family: var(--f-num); font-weight: 700; letter-spacing: .24em; }

/* ---------- 合図の帯と入力欄 ---------- */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 22px; }
.feedback { font-family: var(--f-num); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.feedback.bad, .feedback.trap { color: var(--accent); }
.feedback.good { color: var(--ok); }
.attempts { flex: 1 1 0%; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }  /* 幅を持たせる（中の意味の行が 100% 幅で潰れないように） */
.gloss { flex: 1 1 100%; font-size: .84rem; font-weight: 700; line-height: 1.45; color: var(--ink); }
.gloss b { font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", serif; font-weight: 800; margin-right: .6em; }
.attempt { padding: 0 6px; border: var(--lw) solid var(--wash); color: var(--muted); font-size: .75rem; text-decoration: line-through; white-space: nowrap; }
.console { display: flex; gap: 8px; align-items: stretch; }
/* 入力欄やその親は動かさない（iPhone で文字のカーソルが消えるため）。誤答は枠の色と石板の揺れで伝える */
.console.wrong .answer-input { border-color: var(--accent); }
.console.close .answer-input { border-style: dashed; }
.console.hit .answer-input { border-color: var(--ok); }
.console.locked .answer-input { background: var(--wash); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.btn-pass { width: 48px; height: 48px; }
.answer-input {
  flex: 1; min-width: 0; height: 48px;
  font: inherit; font-size: 1.2rem; font-weight: 700;
  padding: 0 12px; border-radius: 0;
  border: var(--lw) solid var(--ink); background: var(--card); color: var(--ink);
}
.answer-input::placeholder { color: var(--muted); font-weight: 400; font-size: 1rem; }
.btn-fire {
  flex: none; width: 72px; height: 48px; border: var(--lw) solid var(--ink); border-radius: 0;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1rem;
  box-shadow: var(--tag-shadow); transition: transform .08s ease, box-shadow .08s ease;
}
.btn-fire:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.keyhint { margin: 0; text-align: center; font-family: var(--f-num); font-size: .7rem; color: var(--muted); }
@media (max-width: 699px) { .keyhint { display: none; } }

/* プレイ中（スマホ）: ステージ・合図・入力欄をひとまとまりで上に寄せ、キーボードを開いても全部が見える高さに収める。
   Artifact の中ではキーボードの高さが取れないので、画面の幅から決める（約310px） */
body.playing .gp-head, body.playing #arrival, body.playing #result { display: none !important; }
@media (max-width: 699px) {
  body.playing .gp { gap: 6px; padding-block: 6px 0; }
  body.playing .stage { aspect-ratio: auto; flex: 0 0 auto; height: clamp(170px, 58vw, 250px); }
}

/* ---------- 到着画面 ---------- */
.pane { display: flex; flex-direction: column; gap: 16px; }
.specline { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: var(--lw) solid var(--ink); background: var(--card); }
.specline span { padding: 6px 0; text-align: center; border-left: var(--lw) solid var(--ink); font-family: var(--f-num); font-weight: 700; font-size: .82rem; }
.specline span:first-child { border-left: 0; }
.courses { display: grid; gap: 14px; }
.course-tabs { grid-template-columns: repeat(2, 1fr); }
.course {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  padding: 12px 14px 12px 30px; text-align: left; color: var(--ink);
  background: var(--card); border: var(--lw) solid var(--ink); border-radius: 0; box-shadow: var(--tag-shadow);
  transform-origin: 14px 50%; transition: transform .18s cubic-bezier(.2, 0, 0, 1), box-shadow .1s ease;
}
.course::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; border-radius: 50%; border: var(--lw) solid var(--ink); translate: 0 -50%; }
.course.recommend::before { background: var(--accent); border-color: var(--accent); }
.course:hover { transform: rotate(-.8deg); }
.course:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.course-name { font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
.course-dots { grid-row: 1; grid-column: 2; justify-self: end; font-size: .68rem; letter-spacing: .14em; }
.course-meter { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 8px; font-family: var(--f-num); font-size: .7rem; color: var(--muted); }
.course-meter i { width: 96px; height: 4px; background: var(--wash); overflow: hidden; }
.course-meter i::before { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--ink); }
.course-best { grid-row: 2; grid-column: 2; justify-self: end; font-family: var(--f-num); font-weight: 700; font-size: .95rem; color: var(--accent); }
.course-best.none { color: var(--muted); }
.notice { margin: 0; padding: 10px 14px; border: var(--lw) solid var(--accent); color: var(--accent); font-weight: 700; font-size: .88rem; }

/* ---------- 結果 ---------- */
.result-head { display: grid; gap: 6px; }
.eyebrow { margin: 0; font-family: var(--f-num); font-weight: 700; font-size: .7rem; letter-spacing: .14em; }
.result-head h2 { margin: 0; font-family: var(--f-num); font-weight: 700; font-size: clamp(3rem, 16vw, 4.4rem); line-height: 1; outline: none; font-variant-numeric: tabular-nums; }
.result-head h2 small { font-family: var(--f-body); font-size: 1rem; margin-left: 4px; }
.result-head h2 .state { font-family: var(--f-num); font-size: .8rem; letter-spacing: .16em; margin-left: 12px; vertical-align: .9em; }
.new-best { margin-left: 6px; font-family: var(--f-num); font-weight: 700; font-size: .66rem; letter-spacing: .14em; color: var(--accent); }
.rstats { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; border-top: var(--lw) solid var(--ink); border-bottom: var(--lw) solid var(--ink); }
.rbest { font-family: var(--f-num); font-weight: 700; font-size: .66rem; letter-spacing: .14em; }
.rbest b { font-size: 1.1rem; margin-left: 6px; letter-spacing: 0; }
.namecard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px 10px 28px; }
.namecard .nc-flag { font-size: 2.4rem; line-height: 1; }
.namecard .nc-name { font-weight: 700; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.namecard .nc-rank { font-family: var(--f-num); font-weight: 700; font-size: .85rem; }
.namecard.stop .nc-rank { color: var(--accent); }
.log { list-style: none; margin: 0; padding: 0; display: grid; }
.log li { display: grid; grid-template-columns: 1.6rem 2.4rem minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 9px 0; border-bottom: var(--lw) solid var(--wash); }
.log .mk { font-family: var(--f-num); font-weight: 700; font-size: .8rem; text-align: center; }
.log .mk.ok { color: var(--ok); }
.log .mk.ng { color: var(--accent); }
.log .fl { font-size: 1.6rem; line-height: 1; display: grid; place-items: center; }
/* 四字熟語・イディオム: 国旗の代わりの小さな石板 */
.mini-slab { display: inline-block; width: 1.4em; height: .9em; border-radius: .12em; background: #F3EEE3; box-shadow: inset 0 0 0 .1em #A79F92, inset 0 0 0 .16em #F3EEE3, inset 0 0 0 .2em #A79F92; vertical-align: middle; }
/* 地名ドライブ: 国旗の代わりの小さな青い標識 */
.mini-sign { display: inline-block; width: 1.4em; height: .9em; border-radius: .12em; background: #1D4F9F; box-shadow: inset 0 0 0 .08em #1D4F9F, inset 0 0 0 .14em #FFFFFF; vertical-align: middle; }
.log .nm { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.log .nm .ans { color: var(--accent); }
.log .sub { grid-column: 3; font-size: .78rem; color: var(--muted); }
.log .att { grid-column: 3; display: flex; flex-wrap: wrap; gap: 4px; }
.actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.actions .icon-btn { width: 46px; height: 46px; }
.copied { text-align: center; font-family: var(--f-num); font-size: .78rem; min-height: 1.2em; margin: 0; }

/* 国旗の画像は、まわりの文字と同じ大きさ（1em）の高さで、実際の縦横比のまま置く */
.flagimg { display: block; height: .82em; width: auto; max-width: 1.7em; object-fit: contain; box-shadow: 0 0 0 1px rgba(17, 17, 17, .22); }

@media (prefers-reduced-motion: reduce) {
  .banner-box.in, .timer.beat, .heart.lost, .heart.gain, .heart.gain path, .lives.last .heart:first-child, .course { animation: none; transition: none; }
}

/* ハブのサムネイル（#thumb）: ステージの絵だけを枠いっぱいに出す */
body.thumb { overflow: hidden; background: transparent; }
body.thumb .gp { padding: 0; max-width: none; }
body.thumb .gp > :not(.stage), body.thumb .stage > :not(canvas) { display: none !important; }
body.thumb .stage { position: fixed; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; margin: 0; }

/* 4択（イディオムドライブ）: 入力欄の代わりに2×2のボタン。キーボードを使わないので、スマホでもステージは横長のまま */
.choices { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice {
  min-height: 56px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; text-align: left;
  border: var(--lw) solid var(--ink); border-radius: 0; background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .92rem; line-height: 1.3; box-shadow: var(--tag-shadow);
  transition: transform .08s ease, box-shadow .08s ease;
}
.choice .k { flex: none; font-family: var(--f-num); font-size: .7rem; color: var(--muted); }
.choice:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.choice.ok { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.choice.ok .k, .choice.ng .k { color: inherit; }
.choice.ng { background: var(--accent); border-color: var(--accent); color: var(--on-accent); text-decoration: line-through; }
.choices.locked .choice { pointer-events: none; }
body.choice-mode .console { align-items: flex-start; }
@media (max-width: 699px) { body.playing.choice-mode .stage { aspect-ratio: 10 / 7; height: auto; } }

/* ---------- 紹介ページ（到着画面。2026-10-24、オインクゲームズの各ゲームのページに寄せた） ----------
   body.lp は shared/lp.js が到着画面のときだけ付ける。遊んでいる間・結果の画面は上のいままでの見た目のまま */
.lp-hero, .lp-more { display: none; }
body.lp { background: var(--lp-bg, var(--paper)); color: var(--lp-fg, var(--ink)); }
body.lp .gp { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
body.lp .lp-hero { display: grid; gap: 12px; justify-items: start; }
body.lp .stage-title { display: none; }
body.lp .stage { box-shadow: 0 18px 36px rgba(0, 0, 0, .26), 0 3px 8px rgba(0, 0, 0, .16); }
.lp-logo { width: min(100%, 400px); color: var(--lp-fg); }
.lp-logo svg { display: block; width: 100%; height: auto; }
.lp-catch { margin: 4px 0 0; font-family: "Zen Maru Gothic", var(--f-body); font-weight: 700; font-size: clamp(1.15rem, 4.6vw, 1.5rem); letter-spacing: .06em; line-height: 1.4; text-wrap: balance; }
.lp-desc { margin: 0; max-width: 30em; font-size: .92rem; line-height: 1.9; opacity: .92; }
/* 仕様の札（オインクの丸い札） */
body.lp .specline { display: flex; flex-wrap: wrap; gap: 8px; border: 0; background: none; }
body.lp .specline span { border: var(--lw) solid currentColor; border-radius: 999px; padding: 3px 14px; font-family: "Zen Maru Gothic", var(--f-body); font-weight: 700; font-size: .8rem; letter-spacing: .06em; color: var(--lp-fg); }
/* 下の白い面（画面の端まで白く伸ばす） */
body.lp .lp-more {
  display: grid; gap: 36px; margin-top: 28px; padding-block: 40px 16px;
  background: #FFFFFF; color: var(--ink); box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax);
}
.lp-sec { display: grid; gap: 12px; align-content: start; }
.lp-sec h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: "Zen Maru Gothic", var(--f-body); font-weight: 700; font-size: 1.12rem; letter-spacing: .08em; }
.lp-sec h2::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--lp-bg); flex: none; }
.lp-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.lp-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; font-size: .92rem; line-height: 1.7; }
.lp-steps li::before { content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lp-bg); color: var(--lp-fg); font-family: var(--f-num); font-weight: 700; font-size: .78rem; }
.lp-notes { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .88rem; line-height: 1.7; color: var(--muted); }
.lp-credits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .88rem; }
.lp-credits dt { color: var(--muted); }
.lp-credits dd { margin: 0; font-weight: 700; }
/* ほかのゲーム: ハブと同じ、隙間のない色のタイルにロゴ */
.lp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-tile { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 12%; background: var(--bg); color: var(--fg); transition: filter .16s ease; }
.lp-tile svg { width: 100%; height: auto; transition: transform .18s cubic-bezier(.2, 0, 0, 1); }
.lp-tile:hover svg { transform: translateY(-4px); }
@media (min-width: 600px) { .lp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 広い画面: 左にロゴ・説明・コース、右にデモ。下の白い面は3列＋ほかのゲーム */
@media (min-width: 900px) {
  body.lp .gp { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head head" "hero stage" "arrival stage" "more more"; column-gap: 48px; row-gap: 20px; align-items: start; }
  body.lp .gp-head { grid-area: head; }
  body.lp .lp-hero { grid-area: hero; }
  body.lp .stage { grid-area: stage; margin-top: 12px; }
  body.lp #arrival { grid-area: arrival; }
  body.lp .lp-more { grid-area: more; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  body.lp .lp-others { grid-column: 1 / -1; }
}