/* ゲームの UI(全サービス共通)。YUKARI が原本で、前半(背景・盤面・ボタン・入力欄)は
   そのまま。後半のクラス名だけ MEGURI のものに読み替えてある。
   相方は game_ui.js(動く背景の層を入れるのはあの JS。CSS だけでは背景は動かない)と
   public/game_ui/ の画像一式。置き場と命名規則は docs/GAME_UI_ASSETS.md が正本。

   考え方:
     - 枠・盤面・ボタン・ゲージ・見出しの飾りは「CSS で描かない」。9 スライス(border-image)で
       画像を貼る。角丸・影・グラデーションを CSS で作るのをやめ、画像の枠で囲う。
       本物の素材が届いたら、同じ名前・同じ寸法の画像を置き換えるだけで見た目が変わる。
     - 背景は 1 枚絵ではなく多層。奥ほどゆっくり流れる(パララックス)。明け方の城下町。
     - ボタンは 通常 / ホバー / 押下 の 3 枚を持ち、画像ごと差し替わる。

   MEGURI で特に守っていること:
     - 決算書・財務分析・レポートは数字が主役。盤面の中は和紙色の不透明な地に濃い文字のまま、
       表の見出しも明るい石色に濃い文字のままにする(暗い帯にすると数字が読みにくくなる)。
       装飾は枠・見出し・ボタン・背景だけに置く。
     - prefers-reduced-motion: reduce のときは背景を動かさない(末尾)。
     - 動かすのは transform だけ。background-position は動かさない。

   読み込む場所: レイアウトの <head> の一番最後(application.css より後)。
   後から読むぶん、同じ強さの指定はこちらが勝つ。それでも負ける指定だけ !important を付けている。 */

:root {
  /* 枠を描く太さ。画像のスライス値ではなく「画面に何 px で出すか」 */
  --gui-panel-edge: 16px;
  --gui-inset-edge: 7px;
  --gui-btn-edge: 9px;

  /* 色。画像から拾った値なので、素材を差し替えたらここも合わせる */
  --gui-ink: #090d1a;
  --gui-indigo: #1c2540;
  --gui-indigo-deep: #131a30;
  --gui-gold: #c9a227;
  --gui-gold-lit: #e6d290;
  --gui-washi: #faf8f2;
  --gui-text: #24283a;
  --gui-text-sub: #5a6076;
  /* ゲーム表現の用語(GOLD・HP など)の文字色。盤面の外では明るい方に入れ替える */
  --gui-term: #7a5f14;
  --gui-on-dark: #f2eede;

  /* 背景が 1 周するのにかかる時間。奥ほど遅い */
  --gui-bg-far-sec: 300s;
  --gui-bg-mid-sec: 190s;
  --gui-bg-near-sec: 110s;
  --gui-bg-cloud-sec: 240s;
}

/* 画面の下地。背景の層(game_ui.js が入れる)より下に出る色 */
html {
  background: var(--gui-ink);
}

/* もとの body の背景(和紙のべた塗り)と、ログイン画面の藍のグラデーションをやめる。
   平らなグラデーションが「AI っぽさ」の出どころだった */
body,
body.auth-body {
  background: none !important;
}

body::before {
  content: none !important;
}

/* ===== 動く背景 ==========================================================
   game_ui.js が body の先頭に .game-bg を 1 つ入れる。JS が動かない環境では
   下地の色だけが出る(文字が読めなくなることはない)。 */
.game-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* 一番奥の空。ここだけは流さず、画面いっぱいに敷く */
.game-bg__sky {
  position: absolute;
  inset: 0;
  background: url(/game_ui/bg/bg-1-sky.png) repeat-x left top;
  background-size: 256px 100%;
}

/* 層の入れ物。縦のずれ(スクロール追従)は JS がこちらに掛ける */
.game-bg__layer {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--gui-layer-h);
  bottom: var(--gui-layer-bottom, 0px);
  will-change: transform;
}

/* 実際に流れる帯。1 枚ぶんの幅だけ横へ動かして、動き終わったら先頭に戻る。
   画像は横に繰り返しても継ぎ目が出ないように作ってあるので、途切れて見えない */
.game-bg__strip {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: calc(100% + var(--gui-layer-tile));
  background-image: var(--gui-layer-img);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: var(--gui-layer-tile) auto;
  animation: gui-bg-slide var(--gui-layer-sec) linear infinite;
  will-change: transform;
}

.game-bg__layer--clouds .game-bg__strip {
  animation-direction: reverse;
}

@keyframes gui-bg-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--gui-layer-tile) * -1), 0, 0); }
}

/* ===== 画面の骨組み ======================================================
   .app-shell と .main は背景を透かす箱にして、中の板だけを画像で作る */
.app-shell,
.main {
  background: none;
}

/* ===== サイドバー(城の門) ================================================
   藍のグラデーションをやめ、見出しの札(暗い漆に金の二重線)の画像で囲う。
   中は暗いままなので、文字は明るい色で読める */
.sidebar {
  background: var(--gui-indigo-deep) !important;
  border: 12px solid transparent;
  border-image: url(/game_ui/frame/frame-heading.png) 14 fill / 12px / 0 round;
  border-radius: 0;
  color: var(--gui-on-dark);
  padding: 10px 6px;
}

/* 紋章は画像(meguri-mark.png)なので、枠や地の色は掛けない。
   まわりの暗い地から浮かせるための影だけ足す */
.brand-mark {
  background: none;
  border: 0;
  filter: drop-shadow(0 2px 6px rgba(9, 13, 26, 0.7));
}

.brand-name {
  font-family: var(--font-display, inherit);
  text-shadow: 0 2px 4px rgba(9, 13, 26, 0.9);
}

/* 会社の札。すりガラス風の半透明をやめ、へこんだ枠にする */
.org-badge {
  border: 8px solid transparent;
  border-image: url(/game_ui/frame/frame-inset.png) 20 fill / 8px / 0 round;
  border-radius: 0;
  background: #fffdf6;
  padding: 4px 8px;
}

.org-name { color: var(--gui-text); }
.org-level { color: #7a5f14; font-weight: 800; }
.org-role { color: var(--gui-text-sub); }

.nav-section {
  color: var(--gui-gold-lit);
  font-family: var(--font-display, inherit);
  font-weight: 800;
  background: url(/game_ui/parts/divider-line.png) repeat-x left bottom;
  background-size: 8px 14px;
  padding-bottom: 10px;
}

.nav-link {
  border-radius: 0;
  color: #e3e0d6;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  border-left: 3px solid transparent;
}

.nav-link:hover {
  background: rgba(201, 162, 39, 0.18);
  border-left-color: var(--gui-gold);
  color: #fff;
}

.sidebar-footer {
  border-top: 0;
  background: url(/game_ui/parts/divider-line.png) repeat-x left top;
  background-size: 8px 14px;
  padding-top: 16px;
}

/* ===== 盤面(カード・パネル) =============================================
   角丸だけの平たい箱をやめ、枠の画像で囲う。
   中は和紙色の不透明な地なので、数字と本文の読みやすさは落ちない */
.card,
.metric-card,
.quest-card,
.achievement,
.auth-card,
.admin-menu-item,
.kaname-status-panel {
  border: var(--gui-panel-edge) solid transparent !important;
  border-image: url(/game_ui/frame/frame-panel.png) 28 fill / var(--gui-panel-edge) / 0 round !important;
  border-radius: 0 !important;
  /* 画像が届く前・読めないときの保険。枠の下に隠れるので二重には見えない */
  background: var(--gui-washi) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--gui-text);
  padding: 6px 10px 10px !important;
}

.metric-card,
.achievement {
  --gui-panel-edge: 10px;
  padding: 4px 8px 6px !important;
}

/* クエストの札。「終わった」印は左の線ではなく文字の色で残す */
.quest-card {
  --gui-panel-edge: 12px;
  border-left-color: transparent;
  padding: 6px 10px 8px !important;
}

.quest-card.cleared { opacity: 1; }
.quest-card.cleared .quest-title { color: #1d6b3f; }

/* KANAME ステータスパネル(7 サービス共通の塊)は中の配色を変えない。枠だけ差し替える */
.kaname-status-panel {
  --gui-panel-edge: 14px;
  padding: 8px 12px 12px !important;
}

.kaname-status-panel--compact {
  --gui-panel-edge: 10px;
}

.admin-menu-item {
  --gui-panel-edge: 12px;
  padding: 6px 10px !important;
}

.admin-menu-item:hover {
  transform: none;
  box-shadow: none !important;
}

/* ===== 見出しと区切り ====================================================
   細いグレーの線の代わりに、金の飾り罫(画像)を敷く。
   盤面の外(暗い背景の上)なら金、盤面の中(和紙の上)なら濃い藍にする */
.page-title {
  font-family: var(--font-display, inherit);
  font-weight: 900;
  color: var(--gui-gold-lit);
  text-shadow: 0 2px 4px rgba(9, 13, 26, 0.9);
  padding-bottom: 10px;
  /* 端に飾りを 1 つ、その先は金の罫。飾りを繰り返すと一覧で騒がしくなる */
  background:
    url(/game_ui/parts/divider-cap.png) no-repeat left bottom,
    url(/game_ui/parts/divider-line.png) repeat-x left bottom;
  background-size: 26px 14px, 8px 14px;
}

.card-title {
  font-family: var(--font-display, inherit);
  font-weight: 900;
  /* 盤面(カード)の外に見出しだけ置く画面(クエストなど)があるので、色は固定しない。
     --text は下の「盤面の外は明るく / 盤面の中は濃く」で入れ替わり、
     カードの中は次の .card .card-title の濃い藍が勝つ */
  color: var(--text);
  padding-bottom: 10px;
  background:
    url(/game_ui/parts/divider-cap.png) no-repeat left bottom,
    url(/game_ui/parts/divider-line.png) repeat-x left bottom;
  background-size: 26px 14px, 8px 14px;
}

/* 決算書の中の小見出し。金の縦線はそのままで、書体だけ札にそろえる */
.fs-section {
  color: #21305c;
  font-family: var(--font-display, inherit);
  font-weight: 900;
}

hr {
  height: 14px;
  border: 0;
  background:
    url(/game_ui/parts/divider-cap.png) no-repeat left center,
    url(/game_ui/parts/divider-line.png) repeat-x left center;
  background-size: 26px 14px, 8px 14px;
}

/* 見出しの札(区切りではなく帯にしたいとき) */
.gui-plate {
  display: inline-block;
  border: 12px solid transparent;
  border-image: url(/game_ui/frame/frame-heading.png) 14 fill / 12px / 0 round;
  color: var(--gui-on-dark);
  font-family: var(--font-display, inherit);
  font-weight: 900;
  padding: 0 4px;
}

/* ===== ボタン ============================================================
   通常 / ホバー / 押下 の 3 枚を入れ替える。色や影は CSS で作らない */
.btn,
a.btn,
button.btn,
input[type="submit"],
button[type="submit"],
.logout-btn,
.org-switch-btn {
  border: var(--gui-btn-edge) solid transparent !important;
  border-image: url(/game_ui/button/button-primary-normal.png) 18 fill / var(--gui-btn-edge) / 0 stretch !important;
  border-radius: 0 !important;
  background: var(--gui-indigo) !important;
  box-shadow: none !important;
  color: var(--gui-on-dark) !important;
  font-family: var(--font-display, inherit);
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  padding: 4px 12px !important;
  min-height: 40px;
}

.btn:hover,
a.btn:hover,
button.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  border-image-source: url(/game_ui/button/button-primary-hover.png) !important;
  background: var(--gui-indigo) !important;
}

.btn:active,
a.btn:active,
button.btn:active,
input[type="submit"]:active,
button[type="submit"]:active {
  border-image-source: url(/game_ui/button/button-primary-press.png) !important;
}

.btn:disabled,
button:disabled,
input[type="submit"]:disabled {
  filter: grayscale(0.7) brightness(0.9);
  opacity: 0.75;
}

/* 一番押してほしいボタン(「この決算書を確定する」など)は金の札 */
.btn-gold,
a.btn-gold,
button.btn-gold,
input[type="submit"].btn-gold {
  border-image-source: url(/game_ui/button/button-gold-normal.png) !important;
  background: var(--gui-gold) !important;
  color: #3a2c06 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* a.btn:hover / button.btn:hover(クラス 1 つ + 要素 1 つ)より強くするため、
   こちらも要素を足しておく。足りないと、カーソルを当てたときだけ藍の地に戻ってしまい、
   金の札むけの濃い文字が藍の上に乗って読めなくなる */
.btn-gold:hover,
a.btn.btn-gold:hover,
button.btn.btn-gold:hover,
input[type="submit"].btn-gold:hover { border-image-source: url(/game_ui/button/button-gold-hover.png) !important; background: var(--gui-gold) !important; }
.btn-gold:active,
a.btn.btn-gold:active,
button.btn.btn-gold:active { border-image-source: url(/game_ui/button/button-gold-press.png) !important; }

/* 控えめなボタン: 石の札に濃い文字 */
.btn-ghost,
a.btn-ghost,
button.btn-ghost,
.logout-btn,
.org-switch-btn {
  border-image-source: url(/game_ui/button/button-default-normal.png) !important;
  background: #f3f1e9 !important;
  color: #3a3527 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.btn-ghost:hover,
a.btn.btn-ghost:hover,
button.btn.btn-ghost:hover,
.logout-btn:hover,
.org-switch-btn:hover {
  border-image-source: url(/game_ui/button/button-default-hover.png) !important;
  background: #f3f1e9 !important;
}

.btn-ghost:active,
a.btn.btn-ghost:active,
button.btn.btn-ghost:active,
.logout-btn:active,
.org-switch-btn:active { border-image-source: url(/game_ui/button/button-default-press.png) !important; }

/* 戻せない操作は朱の漆 */
.btn-danger,
a.btn-danger,
button.btn-danger,
input[type="submit"].btn-danger {
  border-image-source: url(/game_ui/button/button-danger-normal.png) !important;
  background: #b0413e !important;
  color: var(--gui-on-dark) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important;
}

.btn-danger:hover,
a.btn.btn-danger:hover,
button.btn.btn-danger:hover,
input[type="submit"].btn-danger:hover { border-image-source: url(/game_ui/button/button-danger-hover.png) !important; background: #b0413e !important; }
.btn-danger:active,
a.btn.btn-danger:active,
button.btn.btn-danger:active { border-image-source: url(/game_ui/button/button-danger-press.png) !important; }

/* 小さいボタンは枠も細くする(縦に伸びて行がばらけないように) */
.btn-sm,
a.btn-sm,
button.btn-sm,
input[type="submit"].btn-sm {
  --gui-btn-edge: 6px;
  min-height: 30px;
  padding: 2px 8px !important;
}

/* ===== タブ ==============================================================
   角丸のピルをやめ、ボタンと同じ札(画像)にそろえる */
.tab {
  --gui-btn-edge: 8px;
  border: var(--gui-btn-edge) solid transparent !important;
  border-image: url(/game_ui/button/button-default-normal.png) 18 fill / var(--gui-btn-edge) / 0 stretch !important;
  border-radius: 0 !important;
  background: #f3f1e9 !important;
  box-shadow: none !important;
  color: #3a3527 !important;
  font-family: var(--font-display, inherit);
  font-weight: 900;
  padding: 4px 10px !important;
}

.tab:hover { border-image-source: url(/game_ui/button/button-default-hover.png) !important; }

.tab.active {
  border-image-source: url(/game_ui/button/button-primary-normal.png) !important;
  background: var(--gui-indigo) !important;
  color: var(--gui-on-dark) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/* オンボーディングの段(step)も同じ札にそろえる */
.step {
  border: 6px solid transparent;
  border-image: url(/game_ui/button/button-default-normal.png) 18 fill / 6px / 0 stretch;
  border-radius: 0;
  background: #f3f1e9;
  color: #3a3527;
  font-family: var(--font-display, inherit);
  font-weight: 800;
  padding: 2px 8px;
}

.step.current {
  border-image-source: url(/game_ui/button/button-primary-normal.png);
  background: var(--gui-indigo);
  color: var(--gui-on-dark);
}

.step.done {
  border-image-source: url(/game_ui/button/button-gold-normal.png);
  background: var(--gui-gold);
  color: #3a2c06;
}

/* ===== 入力欄 ============================================================
   へこんだ枠の画像で囲う。中は白に近い和紙色のまま(数字の読みやすさを優先) */
.field input,
.field select,
.field textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="month"],
select,
textarea {
  border: var(--gui-inset-edge) solid transparent !important;
  border-image: url(/game_ui/frame/frame-inset.png) 20 fill / var(--gui-inset-edge) / 0 round !important;
  border-radius: 0 !important;
  background: #fffdf6 !important;
  box-shadow: none !important;
  color: var(--gui-text);
  padding: 6px 8px !important;
}

/* ラジオ・チェックボックスには枠を付けない(丸が巨大になる) */
input[type="radio"],
input[type="checkbox"] {
  border: 0 !important;
  border-image: none !important;
  padding: 0 !important;
  accent-color: var(--gui-indigo);
}

/* ファイル選択も枠を外す(中のボタンが二重枠になるため) */
input[type="file"] {
  border: 0 !important;
  border-image: none !important;
  color: var(--gui-text);
}

.field input:focus,
.field select:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--gui-gold);
  outline-offset: 0;
}

.field label { color: var(--gui-text-sub); }

/* ===== 表 ================================================================
   決算書・財務分析・レポートの主役。読みやすさを最優先にする。
   外枠は濃い藍で締めるが、見出しの行は明るい石色に濃い文字のままにする
   (暗い帯にすると、幅 60% を占める科目名が読みにくくなる) */
table.data {
  border-collapse: collapse;
  border: 3px solid var(--gui-indigo-deep);
  border-radius: 0;
  background: var(--gui-washi);
  overflow: visible;
}

table.data th,
table.data td {
  border-bottom: 1px solid #ded8c6;
  padding: 8px 11px;
  color: var(--gui-text);
}

table.data th {
  background: #ece7d8;
  border-right: 1px solid #ded8c6;
  color: #21305c;
  font-family: var(--font-display, inherit);
  font-weight: 800;
}

table.data tr:last-child td,
table.data tr:last-child th { border-bottom: 0; }

tr.row-total td,
tr.row-total th {
  background: #efe7cf;
  border-top: 2px solid var(--gui-gold);
  font-weight: 900;
}

tr.row-carryover td { background: #efe7cf; }
tr.row-planned td { background: #f4f2ea; color: #5f5a70; }
tr.row-overdue td { background: #fbeeed; }
.fs-rev-warn td { background: #fbeeed; }

.amount-positive { color: #1d6b3f; }
.amount-negative { color: #9b2f2c; }

/* 予実の差異の色。小計の行(#efe7cf)やずれが大きい行(#fdf6e3)の地の上に乗るので、
   和紙の白の上を想定した色のままだと本文の 4.5:1 を切る。盤面の中では濃いほうを使う */
.budget-good { color: #1d6b3f; }
.budget-bad { color: #9b2f2c; }
.budget-notable-mark { background: #9b2f2c; }

/* ===== 表の中の操作列 ====================================================
   入力欄(へこんだ枠)と札(ボタン)は枠の太さが違うので、そのままだと高さがそろわない。
   この列の中だけ枠を細くして、入力欄も札も同じ高さ(34px)で横一列に並べる。
   並びを崩さないよう折り返さない(入りきらないときは .table-wrap が横に転がす) */
.row-actions .btn,
.row-actions a.btn,
.row-actions button.btn,
.row-actions input[type="submit"] {
  --gui-btn-edge: 6px;
  min-height: 34px;
  padding: 2px 10px !important;
}

.row-actions input[type="text"],
.row-actions input[type="date"] {
  --gui-inset-edge: 5px;
  min-height: 34px;
  padding: 3px 6px !important;
  font-size: 13px;
}

/* いつも押すもの と たまに押すもの の間の仕切り */
.row-actions-sub { border-left-color: #cfc7ae; }

/* 操作の列が広い入出金予定だけ、左右の余白を詰めて PC 幅(1280px)に収める */
.table-schedules th, .table-schedules td { padding: 8px 8px; }

/* ===== 用語のひとこと説明の吹き出し ======================================
   盤面と同じ石の枠で囲う。中は和紙色の不透明な地なので、文字の読みやすさは落ちない */
.term-hint-bubble {
  border: 10px solid transparent;
  border-image: url(/game_ui/frame/frame-panel.png) 28 fill / 10px / 0 round;
  border-radius: 0;
  background: var(--gui-washi);
  box-shadow: 0 12px 26px rgba(11, 17, 40, 0.5);
  color: var(--gui-text);
  text-shadow: none;
  padding: 2px 6px;
}

.term-hint-mark {
  border-color: #bfae86;
  background: #fffdf6;
  color: #5a5039;
}

/* ===== 盤面の中の小さな箱 ================================================
   薄いグレーの角丸をやめ、へこんだ枠の画像にそろえる */
.metric-row-bench,
.metric-row-term-body,
.town-strip,
.legend {
  border: 8px solid transparent;
  border-image: url(/game_ui/frame/frame-inset.png) 20 fill / 8px / 0 round;
  border-radius: 0;
  background: #fffdf6;
  box-shadow: none;
  color: var(--gui-text-sub);
  padding: 4px 6px;
}

.metric-row {
  border-top: 0;
  background: url(/game_ui/parts/divider-line.png) repeat-x left top;
  background-size: 8px 14px;
  padding: 16px 0 12px;
}

.metric-row:first-of-type { background: none; padding-top: 4px; }
.metric-row-name { color: var(--gui-text); font-family: var(--font-display, inherit); }
.metric-row-value { color: #21305c; }
.metric-row-vs { color: var(--gui-text); }

/* ===== ゲージ ============================================================
   溝は画像(9 スライス)。中身の色は意味ごとに違うのでそのまま残し、
   上に光沢の画像だけ重ねる */
.progress-track,
.stat-bar,
.exp-track,
.kh-exp-track,
.kaname-exp-track,
.kaname-status-track {
  border: 4px solid transparent !important;
  border-image: url(/game_ui/gauge/gauge-track.png) 6 fill / 4px / 0 round !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden;
  padding: 0 !important;
}

.progress-fill,
.stat-bar-fill,
.exp-fill,
.kh-exp-fill,
.kaname-exp-fill,
.kaname-status-fill {
  position: relative;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.progress-fill::after,
.stat-bar-fill::after,
.exp-fill::after,
.kh-exp-fill::after,
.kaname-exp-fill::after,
.kaname-status-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/game_ui/gauge/gauge-gloss.png) repeat left center;
  background-size: 24px 100%;
  pointer-events: none;
}

/* 溝が 4px あるぶん、もとの高さ(8〜10px)のままだと中身が 0〜2px になって見えなくなる。
   溝の太さを足した高さに取り直す */
.progress-track { height: 16px; }
.stat-bar { height: 18px; }
.exp-track { height: 14px; }

/* ヘッダーと KANAME ステータスパネルのバーは、行の高さが変わらないように溝を一番細くする
   (どちらも box-sizing: content-box なので、中身の高さは変わらない) */
.kh-exp-track,
.kaname-exp-track,
.kaname-status-track {
  border-width: 3px !important;
  border-image-width: 3px !important;
}

/* 暗い溝の上で見えるように、中身は明るい色にする(もとは藍色で溝に溶けていた) */
.stat-bar-fill { background: linear-gradient(90deg, #5b86e0, #a9c8ff); }

/* ===== バッジ・タグ ====================================================== */
.badge,
.quest-tag,
.metric-row-judge,
.kh-user-level,
.kaname-player-level {
  border: 5px solid transparent !important;
  border-image: url(/game_ui/frame/frame-badge.png) 10 fill / 5px / 0 round !important;
  border-radius: 0 !important;
  background: var(--gui-washi) !important;
  box-shadow: none !important;
  font-family: var(--font-display, inherit);
  font-weight: 900;
  padding: 1px 5px !important;
  max-width: 100%;
}

/* 意味(良い/注意/悪い)は枠ではなく文字の色で残す */
.badge-paid, .badge-fulfilled { color: #1d6b3f !important; }
.badge-pending { color: #7a5f14 !important; }
.badge-overdue { color: #9b2f2c !important; }
.badge-issued { color: #23508f !important; }
.badge-draft, .badge-canceled { color: #4d4a42 !important; }
.metric-row-judge.judge-good { color: #1d6b3f !important; }
.metric-row-judge.judge-bad { color: #9b2f2c !important; }
.metric-row-judge.judge-normal,
.metric-row-judge.judge-unknown { color: #4d4a42 !important; }
.kh-user-level { color: #5f4a0e !important; }
.quest-tag { color: #7a5f14 !important; }

.game-term {
  color: var(--gui-term);
  font-family: var(--font-display, inherit);
  font-weight: 800;
}

.quest-reward { color: #7a5f14; }

/* ===== ヘッダー右上のまとまり(？ / コイン / 本人ウィジェット) ============ */
.header-help-link,
.kh-user-button {
  background: var(--gui-indigo) !important;
  border: 2px solid var(--gui-gold) !important;
  box-shadow: inset 0 0 0 1px rgba(9, 13, 26, 0.6);
  color: var(--gui-on-dark) !important;
}

.header-help-link:hover,
.kh-user-button:hover,
.kh-user[open] > .kh-user-button { background: #2a3760 !important; }
.kh-user-name { color: var(--gui-on-dark); }
.kh-presence { color: #cfd4e4; }
.kh-user-avatar { border-color: var(--gui-gold); box-shadow: none; }

.kh-coins {
  border: 5px solid transparent !important;
  border-image: url(/game_ui/frame/frame-badge.png) 10 fill / 5px / 0 round !important;
  border-radius: 0 !important;
  background: var(--gui-washi) !important;
  color: #7a5f14 !important;
  font-family: var(--font-display, inherit);
  padding: 1px 5px !important;
}

.kh-user-menu {
  border: 10px solid transparent !important;
  border-image: url(/game_ui/frame/frame-panel.png) 28 fill / 10px / 0 round !important;
  border-radius: 0 !important;
  background: var(--gui-washi) !important;
  box-shadow: 0 10px 22px rgba(9, 13, 26, 0.5) !important;
  color: var(--gui-text) !important;
  padding: 2px !important;
}

.kh-user-menu .kh-user-menu-item { border-radius: 0; color: var(--gui-text); }
.kh-user-menu .kh-user-menu-item:hover,
.kh-user-menu .kh-user-menu-item:focus-visible { background: #ece7d8; color: var(--gui-indigo-deep); }

.kh-user-menu-section {
  border-top: 0;
  border-bottom: 0;
  background:
    url(/game_ui/parts/divider-line.png) repeat-x left top,
    url(/game_ui/parts/divider-line.png) repeat-x left bottom;
  background-size: 8px 14px, 8px 14px;
  padding: 10px 0;
}

/* ===== お知らせ・注意・エラー ============================================
   盤面と同じ枠に入れ、意味は文字の色で残す */
.flash,
.alert-banner {
  border: 12px solid transparent;
  border-image: url(/game_ui/frame/frame-panel.png) 28 fill / 12px / 0 round;
  border-radius: 0;
  background: var(--gui-washi);
  font-weight: 800;
  padding: 4px 8px;
}

.flash-notice { color: #1d6b3f; }
.flash-alert, .alert-danger { color: #9b2f2c; }
.alert-warning { color: #7a5f14; }

/* ===== 読みやすさの保険 ==================================================
   盤面の中の本文・表・入力欄はここで色を決め直す。
   背景が暗いので、うっかり薄いグレーの文字が残っていると読めなくなる */
.card,
.card p,
.card li,
.card dd,
.metric-card,
.quest-card,
.achievement,
.auth-card {
  color: var(--gui-text);
}

.card .help-text,
.card .metric-label,
.card .metric-note,
.card .formal-term,
.card small,
.metric-card .metric-label,
.metric-card .metric-note,
.quest-card .quest-desc,
.achievement .achievement-desc,
.auth-card .help-text,
.card .empty-state,
.card .glossary-formula { color: var(--gui-text-sub); }

.metric-value,
.metric-card .metric-value { color: #21305c; }
.achievement-date { color: #7a5f14; }

/* 盤面の外(夜空の上)に置かれた文字は明るくする。
   「盤面の外」を選択子で数え上げるやり方は取りこぼす(見出し・注意書き・ラベル・リンク・
   用語ときりがない)ので、いったら本文ぜんぶを明るい方に倒してから、次の節で
   盤面(枠の中)だけ濃い方に戻す。色の変数ごと倒すので、中の a / .help-text / 用語も一緒に付いてくる */
.main,
.auth-shell {
  --text: #fdf6e6;
  --text-sub: #ded5bb;
  --link: #cfd8ff;
  --gui-term: #ffd870;
  --positive: #8ee8ab;
  --negative: #ffa3a3;
  color: var(--gui-on-dark);
  text-shadow: 0 1px 3px rgba(9, 13, 26, 0.85);
}

/* 盤面(枠の中)は濃い文字に戻す。本文・表・入力欄・数字が乗るのはここ。
   影も外す(和紙の地に影は要らない) */
.card,
.metric-card,
.quest-card,
.achievement,
.auth-card,
.admin-menu-item,
.kaname-status-panel,
.kh-user-menu,
.term-hint-bubble,
.metric-row-bench,
.metric-row-term-body,
.town-strip,
.legend,
.org-badge,
.flash,
.alert-banner,
.badge,
.quest-tag,
.metric-row-judge,
table.data,
input,
select,
textarea {
  --text: #2b3044;
  --text-sub: #565c70;
  --link: #1c2540;
  --gui-term: #7a5f14;
  --positive: #2c7a4b;
  --negative: #b0413e;
  color: var(--gui-text);
  text-shadow: none;
}

/* ボタン・タブ・濃い板は自分で色と影を決めているので、上の影を引き継がせない */
.main .btn,
.main a.btn,
.main button,
.main input[type="submit"],
.main .tab,
.level-hero {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.main .btn-ghost,
.main a.btn-ghost,
.main .term-hint-trigger {
  text-shadow: none;
}

/* 管理者メニューの矢印。金(--gold)のままだと和紙の地の上で 2.3:1 しかない */
.admin-menu-arrow { color: #7a5f14; }

.page-sub { color: #ded5bb; }
.card .progress-meta,
.quest-card .progress-meta { color: var(--gui-text-sub); text-shadow: none; }

/* 盤面の中の見出しは濃い藍(和紙の上なので影は付けない) */
.card h2,
.card h3,
.card h4,
.card .card-title,
.auth-card h1,
.glossary-entry h4 {
  color: #21305c;
  text-shadow: none;
}

.glossary-entry {
  border-top: 0;
  background: url(/game_ui/parts/divider-line.png) repeat-x left top;
  background-size: 8px 14px;
  padding-top: 16px;
}

.onboarding-list li { border-bottom: 1px solid #ded8c6; }

/* 状態の一覧・レベルの見出し板。暗い地のままなので漆の枠で囲う */
.level-hero {
  border: 14px solid transparent;
  border-image: url(/game_ui/frame/frame-heading.png) 14 fill / 14px / 0 round;
  border-radius: 0;
  background: var(--gui-indigo-deep);
  color: var(--gui-on-dark);
  padding: 8px 12px;
}

.level-hero .level-num { color: var(--gui-gold-lit); font-family: var(--font-display, inherit); }
.level-hero .level-caption { color: #cfd4e4; }

/* ===== 運営コンソール ====================================================
   インラインの藍のグラデーション帯は、上から漆の帯(画像)をかぶせて消す */
body > div[style*="linear-gradient"] {
  background: url(/game_ui/frame/frame-header.png) repeat-x left bottom !important;
  background-size: auto 100% !important;
}

/* ===== スマホ・タブレット ================================================
   MEGURI はもともとスマホ対応が入っていないので、ここで最低限をそろえる。
   サイドバーは上の帯に畳み、2 列の並びは 1 列にし、表は盤面の中で横に転がす */
@media (max-width: 1000px) {
  .main { padding: 20px 18px 48px; }
}

@media (max-width: 720px) {
  :root {
    --gui-panel-edge: 12px;
    --gui-btn-edge: 8px;
  }

  /* 狭い画面では手前の層を出さない(情報量を減らして軽くする) */
  .game-bg__layer--near { display: none; }

  /* 横に並べていた「サイドバー + 本文」を縦に積む */
  .app-shell { display: block; }

  /* 名乗り(MEGURI)と会社の札を 1 行に並べ、メニューはその下に 1 本の帯で置く。
     縦に積むと、どの画面でも本文が 200px 下から始まってしまう */
  .sidebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    width: auto;
    padding: 6px 6px 2px;
    border-width: 10px;
  }

  .brand { margin: 0; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; font-size: 16px; }
  .brand-name { font-size: 16px; letter-spacing: 0.14em; }
  .org-badge { margin: 0; padding: 2px 8px; }
  .org-name { font-size: 13px; }
  .org-level, .org-role { display: inline; margin-right: 8px; }
  .nav, .sidebar-footer { grid-column: 1 / -1; }

  /* 20 本あるメニューは横に転がる帯にする(縦に積むと本文が下へ押し出される) */
  .nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .nav-section {
    flex: none;
    margin: 0 2px;
    padding: 0 0 0 8px;
    background: none;
    border-left: 3px solid var(--gui-gold);
    white-space: nowrap;
    font-size: 10px;
  }

  .nav-link {
    flex: none;
    white-space: nowrap;
    padding: 6px 8px;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .nav-link:hover { border-left: 0; border-bottom-color: var(--gui-gold); }

  .sidebar-footer { padding-top: 10px; }
  .org-switcher { display: flex; gap: 6px; overflow-x: auto; }

  .main { padding: 14px 12px 40px; max-width: none; }
  .main-topbar { margin: 0 0 8px; }

  /* 2 列・3 列・4 列の並びはすべて 1 列にする */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: 1fr; }
  .admin-menu { grid-template-columns: 1fr; }

  /* 状態の行(名前 / バー / 数値)は 2 段にする */
  .stat-row { grid-template-columns: 1fr auto; }
  .stat-bar { grid-column: 1 / -1; }

  /* 表は字を小さくしない。入りきらないときだけ盤面の中で横に転がす。
     数字の列(.num)だけは折り返さない(桁が縦に割れると読めなくなるため) */
  .card,
  .table-wrap { overflow-x: auto; }
  table.data th, table.data td { padding: 7px 9px; }
  table.data td.num, table.data th.num { white-space: nowrap; }

  /* 決算書の入力だけは横に転がさない。科目名を折り返して、金額の入力欄を必ず画面に出す */
  table.data.fs-input { width: 100%; }
  .fs-input th { width: 54%; }
  .fs-input td { width: 46%; }

  /* 画面からはみ出しやすいもの */
  .page-header { gap: 4px; }
  .page-title { font-size: 18px; }
  .exp-track { width: auto; max-width: 180px; }
  .level-hero { padding: 8px 10px; }
  .tabs { flex-wrap: wrap; }
  .steps { overflow-x: auto; flex-wrap: nowrap; }
  .auth-shell { padding: 32px 14px; }
  .line-chart { max-width: 100%; height: auto; }
}

/* ===== タブレット(721〜1024px。iPad 768x1024 / iPad Pro 834x1194 / 横向き 1024x768) =====
   スマホ(〜720px)の畳んだ表示からは外れるのに、サイドバー(232px)を引いた本文の幅では
   2 列に並べた数字の表や折れ線グラフが入りきらない帯。
   .main は flex の子で min-width が auto のままだったため、中身より縮まずに
   サイドバーの右へせり出し、ページごと横スクロールしていた(768px で最大 1172px)。
   スマホ(〜720px)と PC(1025px〜)の見た目は変えず、この帯だけを直す。 */
@media (min-width: 721px) and (max-width: 1024px) {
  /* 本文を残り幅まで縮められるようにする(これが横スクロールの主因) */
  .main { min-width: 0; }
  .grid > * { min-width: 0; }

  /* 2 列の並びは 1 列にする。サイドバーを引いた残り(〜760px)に数字の表を
     2 つ並べると、どちらも桁が読めない幅まで潰れる。
     .grid-3 / .grid-4 は application.css で 1000px 以下は 2 列になる */
  .grid-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* 表は字を小さくしない。入りきらないときだけ盤面の中で横に転がす
     (スマホと同じ考え方)。数字の列は桁が縦に割れないよう折り返さない */
  .card,
  .table-wrap { overflow-x: auto; }
  table.data td.num, table.data th.num { white-space: nowrap; }

  /* 決算書の入力だけは横に転がさない。科目名を折り返して、金額の入力欄を必ず画面に出す */
  table.data.fs-input { width: 100%; }

  /* 折れ線グラフ(SVG)は枠に合わせて縮める */
  .line-chart { max-width: 100%; height: auto; }
  .steps { overflow-x: auto; flex-wrap: nowrap; }
  .tabs { flex-wrap: wrap; }
}

/* ===== 動きを減らす設定の人 ==============================================
   背景は動かさない。画像はそのまま出す(絵が消えると意味が変わるため) */
@media (prefers-reduced-motion: reduce) {
  .game-bg__strip {
    animation: none !important;
  }

  .game-bg__layer {
    transform: none !important;
  }
}


/* ===== ゲージの中身が見えなくなっていたのを直す ==========================
   溝を 9 スライスの画像にしたとき、上下に border を 3px 入れた。
   * { box-sizing: border-box } なので、この 6px は高さの中から取られる。
   ゲージの背は 6〜10px しかなかったため、中の色(= 伸びている量)が
   0〜4px しか残らず、値が入っていてもゲージに色が付いていないように見えていた。
   枠のぶんだけ背を高くして、中身が必ず残るようにする。 */
.kaname-status-track {
  height: 15px !important;
}

.kaname-status-panel--compact .kaname-status-track {
  height: 13px !important;
}

.kaname-exp-track {
  height: 16px !important;
}

.kaname-status-panel--compact .kaname-exp-track {
  height: 14px !important;
}

.kh-exp-track {
  height: 14px !important;
}