@charset "UTF-8";
/* ==================================================================
 * 灰都の残響 ― チュートリアルの案内カード（help 担当）
 * 対象：#tips（G.Tips が #game 直下に作る）と .tip-card。一度に出るのは 1 枚。
 * 置き場所（基準 1280×720）：
 *   本文   … 本文窓（上端 476px）の上、中央（x 450〜830）。会話の立ち絵は左右端（幅 最大 約 330px）、
 *            トーストは右上（x 884〜）なので、どちらにも掛からない。
 *   地図   … 羊皮紙（下端 625px）の外、下の段の「ここを調べる／メニュー」の左に横長で（x 151〜806）。
 *   戦闘   … 上の中央（場の珠・技名の札・戦況の一行の下）。敵は左、味方は右、下段はコマンド。
 *   ハノイ … 右上の空。
 * 題は DotGothic16、本文は明朝。
 * 入場の動きは transform だけで行う（opacity 0 から始めない。仮想時間の環境でも見えるように）。
 * ================================================================== */

#tips {
  position: absolute; left: 50%; bottom: 264px; width: 380px; margin-left: -190px;   /* 下端 456px：本文窓の上端 476px と「頁」の札（465px〜）の上 */
  display: flex; flex-direction: column; align-items: stretch;
  z-index: 70; pointer-events: none;
}
/* メニュー・タイトルの上には出さない（閉じれば戻る） */
#game[data-mode='menu'] #tips, #game[data-mode='title'] #tips, #game[data-mode='ending'] #tips { display: none; }
/* 戦闘：上の中央 */
#game[data-mode='battle'] #tips { top: 146px; bottom: auto; width: 440px; margin-left: -220px; }   /* 技名の札（66px〜）と戦況の一行（112px〜）の下 */
/* ハノイの塔では柱に掛からないよう、右上の空に */
#game[data-mode='hanoi'] #tips { top: 150px; bottom: auto; left: auto; right: 16px; margin-left: 0; width: 340px; }
/* 地図：羊皮紙の外。下の段（凡例の上）に、ボタンの左まで横長で */
#game[data-mode='map'] #tips { left: 151px; right: auto; bottom: 4px; width: 655px; margin-left: 0; }

.tip-card {
  pointer-events: auto; position: relative; width: 100%;
  padding: 11px 14px 10px;
  color: var(--text, #ebe2cc);
  background: linear-gradient(180deg, rgba(24, 29, 46, 0.94) 0%, rgba(12, 14, 22, 0.96) 100%);
  border: 1px solid rgba(201, 165, 90, 0.55);
  box-shadow: inset 0 0 0 3px rgba(10, 12, 19, 0.9), inset 0 0 0 4px rgba(201, 165, 90, 0.16), 0 12px 32px rgba(0, 0, 0, 0.6);
  transform: translateY(18px);
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
.tip-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(232, 201, 130, 0), rgba(232, 201, 130, 0.85) 30%, rgba(232, 201, 130, 0.85) 70%, rgba(232, 201, 130, 0));
}
.tip-card.in { transform: none; }
.tip-card.out { opacity: 0; transform: translateX(26px); }

.tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tip-mark {
  flex: none; width: 20px; height: 20px; line-height: 18px; text-align: center;
  font-family: var(--font-ui, 'DotGothic16', monospace); font-style: normal; font-size: 13px;
  color: #1c1508; background: var(--brass, #c9a55a); border: 1px solid var(--brass-hi, #ecd494);
  box-shadow: 0 0 8px rgba(232, 201, 130, 0.45);
}
.tip-head b {
  font-family: var(--font-ui, 'DotGothic16', monospace); font-weight: normal; font-size: 17px; letter-spacing: 0.1em;
  color: var(--brass-hi, #ecd494); text-shadow: 0 0 10px rgba(201, 165, 90, 0.35);
}
.tip-head .tip-tag {
  margin-left: auto; font-family: var(--font-ui, 'DotGothic16', monospace); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ash, #8a8f9a);
}

.tip-body { font-family: var(--font-body, 'Shippori Mincho', serif); font-size: 14.5px; line-height: 1.7; color: var(--parch, #d8c7a0); }
.tip-body p { margin: 0 0 4px; }
.tip-body p:last-child { margin-bottom: 0; }
.tip-body b { font-weight: 600; color: var(--text-hi, #fbf4e2); }

.tip-btns { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px dotted rgba(138, 143, 154, 0.3); }
.tip-btns button {
  all: unset; box-sizing: border-box; cursor: pointer;
  height: 26px; padding: 0 11px; line-height: 24px;
  font-family: var(--font-ui, 'DotGothic16', monospace); font-size: 13px; color: var(--parch, #d8c7a0);
  border: 1px solid rgba(201, 165, 90, 0.45); background: rgba(0, 0, 0, 0.3);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tip-btns button:hover { color: var(--text-hi, #fbf4e2); border-color: var(--brass-hi, #ecd494); background: rgba(201, 165, 90, 0.14); }
.tip-btns button:focus-visible { outline: 1px solid var(--echo, #6fd3e0); outline-offset: 1px; }
.tip-btns .tip-ok { color: #1c1508; background: linear-gradient(180deg, #e8c982, #b38f45); border-color: #e8c982; }
.tip-btns .tip-ok:hover { color: #1c1508; background: linear-gradient(180deg, #f3d99a, #c39f52); }
.tip-btns .tip-off { margin-left: auto; padding: 0 6px; font-size: 12px; color: var(--ash, #8a8f9a); border-color: transparent; background: none; }
.tip-btns .tip-off:hover { color: var(--parch, #d8c7a0); background: none; border-color: transparent; }

/* 本文のキー表記 */
.tip-body kbd {
  display: inline-block; min-width: 1.5em; padding: 0 4px; margin: 0 1px; line-height: 1.35;
  font-family: var(--font-ui, 'DotGothic16', monospace); font-size: 12px; text-align: center; vertical-align: 1px;
  color: var(--text-hi, #fbf4e2); border: 1px solid rgba(201, 165, 90, 0.5); border-bottom-width: 2px; background: rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------
 * 地図：横長のカード（左に題、中に本文、右にボタンを縦に）。高さは下の段に収まる 90px ほど
 * ------------------------------------------------------------------ */
#game[data-mode='map'] .tip-card {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 7px 10px 7px 12px;
  background: linear-gradient(180deg, #181d2e 0%, #0c0e16 100%);   /* 下の凡例が透けないように */
  transform: translateY(12px);
}
#game[data-mode='map'] .tip-card.in { transform: none; }
#game[data-mode='map'] .tip-card.out { transform: translateY(10px); }
#game[data-mode='map'] .tip-head { flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; }
#game[data-mode='map'] .tip-head b { font-size: 16px; letter-spacing: 0.06em; }
#game[data-mode='map'] .tip-head .tip-tag { margin-left: 0; }
#game[data-mode='map'] .tip-body { font-size: 14px; line-height: 1.55; }
#game[data-mode='map'] .tip-body p { margin: 0; }
#game[data-mode='map'] .tip-btns {
  flex-direction: column; align-items: stretch; gap: 3px;
  margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 1px dotted rgba(138, 143, 154, 0.3);
}
#game[data-mode='map'] .tip-btns button { height: 22px; line-height: 20px; padding: 0 8px; font-size: 12px; text-align: center; }
#game[data-mode='map'] .tip-btns .tip-off { margin-left: 0; font-size: 11px; }