/* 文字は日本語と英数字で大きさ・太さがそろう BIZ UDゴシックを使う(マップだけは Consolas) */
body {
  background: #0c0c10; color: #ddd; margin: 16px;
  font-family: "BIZ UDGothic", "BIZ UDゴシック", "Yu Gothic UI", Meiryo, monospace;
}
.layout { display: flex; gap: 16px; align-items: flex-start; }
.main { display: flex; flex-direction: column; gap: 12px; }
/* 右側の列は幅を固定する(長いログなどで、横に伸びないように。min-width: 0 で中身に押し広げられないようにする) */
.side { width: 460px; flex: 0 0 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.panel { background: #14141b; border: 1px solid #2c2c38; border-radius: 6px; padding: 10px 14px; }
.panel-title { color: #8a8aa0; font-size: 13px; margin-bottom: 8px; letter-spacing: 0.1em; }

/* メイン画面:マップ表示のときと、文字の一覧を出すときで見た目を切り替える */
/*   大きさはマップと同じに固定する(幅・高さは起動時に BALANCE のマップサイズから決める)
     持ち物などの一覧が長くなったときは、中だけスクロールする */
/*   #screen の大きさは文字数(ch)で決めるので、フォントは画面を切り替えても変えない(中身の .text-body だけ変える) */
#screen { font-size: 16px; overflow-y: auto; font-family: Consolas, "BIZ UDGothic", "MS Gothic", monospace; }
#screen.map-mode { white-space: pre; line-height: var(--cell); overflow: hidden; }
/*   マップの1マス:一辺 var(--cell) の正方形の箱。文字はその真ん中(--cell は js/input.js が BALANCE.mapCellEm から決める) */
.map-wrap > span:not(.pop) { display: inline-block; width: var(--cell); height: var(--cell); line-height: var(--cell);
                             text-align: center; vertical-align: top; overflow: visible; }
/*   文字の画面では、スクロールバーの場所をいつも空けておく(長いページだけスクロールバーが出て、幅が変わらないように)
     マップの画面では空けない(空けるとマップの右端が欠けるため) */
#screen.text-mode { line-height: 1.8; scrollbar-gutter: stable; }
.text-body { font-family: "BIZ UDGothic", "BIZ UDゴシック", "Yu Gothic UI", Meiryo, monospace; font-size: 15px; }

/* 表の形の一覧(列の幅をそろえる)。列の幅は行ごとに style で指定する */
.grid-row { display: grid; column-gap: 10px; align-items: baseline; border-radius: 3px; padding: 0 4px 0 0; }
.grid-row > span { min-width: 0; }
.list-title { margin-bottom: 4px; }
.list-gap { height: 10px; }
.sub { color: #8a8a99; font-size: 13px; line-height: 1.5; }
.note { color: #8a8a99; font-size: 13px; margin-bottom: 8px; line-height: 1.6; }

#status { font-size: 15px; line-height: 1.6; }
/* ステータス欄の上の行:長くなったら(自害… や状態異常がたくさん)次の行に折り返す(横に伸びて、右の列が押されて動かないように) */
.status-top { display: flex; flex-wrap: wrap; gap: 0 24px; margin-bottom: 4px; }
.bar { background: #2a2a35; border-radius: 3px; overflow: hidden; margin: 2px 0 6px; }
.bar-fill { height: 100%; }
.stats-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 2px 20px; margin-top: 6px; }

#equip { font-size: 14px; line-height: 1.6; }
.equip-row { display: grid; grid-template-columns: 6.5em 1fr; padding: 1px 0; }
.equip-mat { font-size: 12px; }

#log, #screen { scrollbar-color: #444 #14141b; } /* スクロールバーを画面の色に合わせる */
#log { height: 260px; overflow-y: auto; overflow-x: hidden; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; } /* 長い行は、どこででも折り返す */
.log-new { color: #ffe066; }
.log-old { color: #777; }

/* 操作説明:長くても左の画面の幅を広げないように、画面の幅に合わせて折り返す */
#hint { color: #8a8aa0; font-size: 14px; width: 0; min-width: 100%; display: flex; flex-wrap: wrap; gap: 4px 20px; }
#hint > span { white-space: nowrap; }
/* ステータス欄も同じ:状態異常・自害のカウントなどが増えても左の画面の幅を広げず、折り返す
   (border-box:枠と内側の余白をふくめて 100% にする。これがないと余白のぶん、はみ出す) */
#status-panel { width: 0; min-width: 100%; box-sizing: border-box; }
kbd {
  font-family: inherit; background: #1d1d26; border: 1px solid #444; border-radius: 3px;
  padding: 0 5px; color: #ccc;
}

/* 一覧で選んでいる行 */
.sel { background: #262636; border-radius: 3px; }
.tag { color: #000; background: #ffd84d; border-radius: 3px; padding: 0 4px; font-size: 12px; }
.info { margin-top: 12px; padding-top: 8px; border-top: 1px solid #2c2c38; }
.info-top { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #2c2c38; } /* 一覧より上に出す説明(一覧が長くても見えるように) */

/* 一覧のカーソル(▶)の幅 */
.cur { display: inline-block; width: 1.2em; }
.result-title { font-size: 18px; font-weight: bold; }
/* 冒険の記録の墓碑銘:上が丸い墓石の形の枠。ゆっくり浮かび上がる(js/screens.js の drawResult) */
.result-epitaph { max-width: 34em; margin: 0 auto 14px; padding: 16px 20px 12px; text-align: center; line-height: 1.9;
                  color: #c8c8d4; background: #1a1a22; border: 1px solid #555566; border-radius: 48% 48% 4px 4px / 36px 36px 4px 4px;
                  letter-spacing: 0.05em; animation: epitaph-in 1.6s ease-out; }
@keyframes epitaph-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
/* 拠点のメニューの上に出すゲームのタイトル */
.game-title { font-family: Consolas, monospace; font-size: 30px; letter-spacing: 0.45em; color: #c8c0a8;
              text-align: center; margin: 18px 0 22px; padding: 0 0 14px 0.45em; /* 左の padding は字間の分を打ち消して中央にするため */
              border-bottom: 1px solid #2c2c38; }
/* 右側の「依頼」欄と、酒場 */
#quests { font-size: 13px; line-height: 1.6; }
.quest-row { display: flex; gap: 6px; align-items: baseline; }
.quest-state { margin-left: auto; white-space: nowrap; }              /* 進み具合は右寄せ */
.gold { color: #ffd84d; letter-spacing: 0; margin-left: 6px; }        /* 持っているゴールド */
.quest-tag { border-radius: 3px; padding: 0 4px; font-size: 11px; font-weight: bold; white-space: nowrap; }
.quest-tag.big { color: #000; background: #ffae42; }                  /* 大口 */
.quest-tag.special { color: #fff; background: #a04ad0; }              /* 特殊依頼 */

/* 遊び方 */
.help-head { font-weight: bold; color: #ffd84d; margin: 10px 0 2px; }
.help-line { padding-left: 1em; font-size: 14px; line-height: 1.7; white-space: pre-wrap; } /* pre-wrap:行頭の空白(字下げ)を残す */
.dex { display: grid; grid-template-columns: 13em 1fr; gap: 12px; }
.dex-list { border-right: 1px solid #2c2c38; padding-right: 8px; }
/* 説明は、一覧を下までスクロールしても画面の上に残るようにする(sticky:スクロールしてもその位置にとどまる) */
.dex-detail { font-size: 14px; line-height: 1.8; position: sticky; top: 0; align-self: start; }
.dex-name { font-size: 17px; font-weight: bold; margin-bottom: 4px; }
.dex-label { display: inline-block; width: 6em; color: #999; }
/* 図鑑の装備の詳しい情報の、まとまりの見出し(性能・手に入れ方・刻むと) */
.dex-section { margin-top: 10px; padding-bottom: 2px; border-bottom: 1px solid #2c2c38; color: #ffd84d; font-size: 13px; }
/* 図鑑の装備タブの下の、種類の小さいタブ */
.sub-tabs { margin-top: -6px; font-size: 13px; }
.sub-tabs .tab { padding: 1px 10px; }
/* 図鑑の武器の、ジャンルの絞りこみの行(押すと次のジャンル) */
.dex-filter { margin: -4px 0 8px; font-size: 13px; cursor: pointer; user-select: none; }
.dex-filter:hover b { color: #ffd84d; }
.result-label { display: inline-block; width: 8em; color: #999; }
.new { color: #000; background: #ff6b6b; border-radius: 3px; padding: 0 4px; font-size: 11px; font-weight: bold; } /* NEW の印 */
/* 設定パネル */
.setting-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.toggle {
  font-family: inherit; font-size: 13px; min-width: 56px; padding: 3px 10px; cursor: pointer;
  border-radius: 12px; border: 1px solid #444; background: #1d1d26; color: #888;
}
.toggle.on { background: #2e6b3a; border-color: #4cd964; color: #fff; }

/* デバッグパネル */
.debug-panel { border-color: #6b4a2e; }
#debug { display: flex; flex-wrap: wrap; gap: 6px; }
#debug .toggle { border-radius: 4px; }
/* デバッグの FPS表示(js/debug.js の toggleFpsMeter):画面の左上にいつも出す */
#fps-meter { position: fixed; top: 4px; left: 4px; z-index: 2000; pointer-events: none; padding: 2px 6px; border-radius: 4px;
             font: 12px Consolas, monospace; color: #9f9; background: rgba(0, 0, 0, 0.7); }
.debug-select { font-family: inherit; font-size: 13px; background: #1d1d26; color: #ddd; border: 1px solid #444; border-radius: 4px; padding: 2px 4px; }

/* 持ち物画面のタブ */
/* タブが多くて入りきらないときは、横にスクロールする(選んでいるタブが見えるよう、画面を描くたびに自動でスクロール) */
.tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid #2c2c38;
        position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tabs > .tab { flex-shrink: 0; } /* タブを縮めない(入りきらない分はスクロールで見る) */
.tab { padding: 2px 14px; color: #777; border-radius: 4px 4px 0 0; white-space: nowrap; } /* タブの名前の途中では改行しない */
.tab.active { color: #fff; background: #262636; border-bottom: 2px solid #ffd84d; }
.tab.clickable { cursor: pointer; } /* クリック/タップで選べるタブ(onclick は js/town.js の「タブのクリック/タップ」) */
.tab.clickable:not(.active):hover { color: #bbb; }

/* マップにマウスを合わせたときの詳細ウィンドウ(ツールチップ)。マウスの邪魔をしないよう pointer-events: none */
#tooltip {
  display: none; position: fixed; z-index: 100; pointer-events: none; min-width: 240px; max-width: 340px;
  background: #1b1b24; border: 1px solid #44445a; border-radius: 6px; padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-family: "BIZ UDGothic", "BIZ UDゴシック", "Yu Gothic UI", Meiryo, monospace; font-size: 14px; line-height: 1.6;
}
.tip-title { font-weight: bold; margin-bottom: 4px; display: flex; align-items: baseline; gap: 6px; }
.tip-head-right { margin-left: auto; padding-left: 12px; font-weight: normal; white-space: nowrap; } /* 見出しの右側(印・一族の札) */
.tip-line { margin-top: 2px; }
.tip-line .bar { margin: 1px 0 4px; }
.tip-row { display: flex; flex-wrap: wrap; gap: 2px 14px; }       /* 攻撃・速さ・向きを横に並べる */
.tip-row > span { white-space: nowrap; }                           /* 1つの項目の途中では改行しない */
.tip-sub { color: #8a8a99; font-size: 12.5px; }
.tip-badge { border-radius: 3px; padding: 0 5px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.tip-badge.calm { color: #0c2a12; background: #6fcf7f; }           /* 気づいていない(不意打ちできる) */
.tip-badge.alert { color: #fff; background: #b03030; }             /* 気づいている */
.elite-tag { color: #ffd700; }

/* 色 */
.dim { color: #777; }
.up { color: #5ddc6a; }
.down { color: #ff6b6b; }
.wall { color: #555566; }
/* 壁のマス:1マスの箱(.map-wrap > span)をすき間なく塗る */
.wall-block { background: #34343f; }
.floor { color: #2f2f3c; }
.player { color: #fff; font-weight: bold; }
.monster { color: #ff5555; }
.stairs { color: #55ff88; font-weight: bold; }
.stairs-sealed { color: #884444; font-weight: bold; } /* エリートを倒すまで封印されている階段 */
.elite { font-weight: bold; text-decoration: underline; }
.primed { color: #fff; background: #c02020; font-weight: bold; } /* 膨らんだ爆ぜ虫 */
.grave { color: #d8d0b8; font-weight: bold; }                    /* 前の自分の墓 */
.chest { color: #e0a84a; font-weight: bold; }                     /* 宝箱 */
.map-item { color: #e8d8a8; font-weight: bold; }                  /* 宝の地図(床に落ちているもの) */
.treasure { color: #ffd84d; font-weight: bold; }                  /* 宝の地図の印(X) */
.dormant { opacity: 0.55; }                                       /* 眠っている墓守 */
.in-wall { opacity: 0.4; }                                        /* 壁の中のゴースト */
.corpse { opacity: 0.4; }                                         /* グールの死体(踏むと完全に倒せる) */
.corpse.stir { animation: corpse-stir 0.6s steps(1) infinite; }   /* 次に起き上がる死体は点滅 */
@keyframes corpse-stir { 50% { opacity: 0.9; } }
.flame { color: #ff8030; font-weight: bold; }                     /* 鬼火の炎 */
/* ダメージ床(地面ごと色を付ける)。F キーの表示・ブレスの範囲の色が上に重なるよう、それらより前に書く */
.haz-poison { color: #b070e0; background: #24142c; }               /* 毒沼 */
.haz-magma  { color: #ff7a30; background: #3a1608; font-weight: bold; } /* マグマ */
.haz-ice    { color: #bfeaff; background: #12303c; }                /* 凍った床(凛龍のブレスの跡) */
.haz-fog    { color: #c8a0e0; background: #2c2036; }                /* 毒の霧(瘴龍の球の跡) */
/* 瘴気(瘴龍の瘴気の海。毒の霧より濃い)。色がゆっくり波打つ(長さは BALANCE.miasmaPulseMs と同じ。--miasma-delay は js/screens.js の drawDungeon)。
   見えていないマス(mem)は止める */
.haz-miasma { color: #e0b8ff; background: #3e1c52; animation: miasma-pulse 3s ease-in-out infinite; animation-delay: var(--miasma-delay, 0s); }
.haz-miasma.mem { animation: none; }
@keyframes miasma-pulse { 0%, 100% { background: #3e1c52; } 50% { background: #5a2a74; color: #f0d8ff; } }
.ice-wall   { color: #bfeaff; background: #1c4a5c; font-weight: bold; } /* 氷の壁(凛龍。殴ると壊れる) */
.ball { font-weight: bold; }                                      /* ドラゴンの属性の球(色は属性ごとに style で指定) */
.danger { background: #6a1414; }                                  /* ブレスが当たる範囲(溜めているあいだ赤く光る) */
/* 霹龍の落雷の印:黄色く点滅(上にいる敵・自分の記号はそのまま、地面の色だけ変わる) */
.bolt-sym { color: #ffe14a; font-weight: bold; }
/* ベヒーモス:岩石・エクリプスメテオの落下地点・岩の陰で助かる床 */
.rock { color: #e0c090; background: #4a3624; font-weight: bold; }
.meteor-mark { color: #ff5030; background: #5a1000; font-weight: bold; animation: meteor-blink 0.5s steps(1) infinite; }
@keyframes meteor-blink { 50% { background: #b02000; color: #ffe0a0; } }
.safe { background: #143a1c; }
.zero-zone { background: #1c3a52; } /* 凛龍の絶対零度で凍る範囲(龍の近く) */
/* 凛龍の絶対零度(js/screens.js「絶対零度の演出」):
   溜めているあいだ、画面全体の色を青白く染める板(mix-blend-mode: color で、明るさはそのまま色だけ変える。濃さは JS が opacity で)。
   放ったら、白く凍りついた板(7枚の破片)で画面を覆い、少し止まってから割れ落ちる。どちらも白い光の板(z-index 1000)より下 */
#fx-zero-tint { position: fixed; inset: 0; background: #b4dcff; mix-blend-mode: color; opacity: 0; pointer-events: none; z-index: 997;
  transition: opacity 0.8s; }
/* 透け具合(--ice = BALANCE.zeroIceOpacity)は、破片1枚ずつではなく全体にかける(破片が消えていくアニメーションの濃さと、ぶつからないように) */
#fx-zero-freeze { position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: var(--ice, 0.5); }
#fx-zero-freeze .zero-shard { position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, #fafdff, #cde6ff 60%, #a0cdf5); }
/* 凛龍が絶対零度を溜めているあいだ:マップが白く霜がかる(--frost が大きいほど濃い。ふちほど白い。js/screens.js の drawDungeon) */
#screen.zero-frost { position: relative; }
#screen.zero-frost::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(170, 210, 255, 0.05), rgba(225, 240, 255, 0.55));
  opacity: var(--frost, 0);
}
/* エクリプスメテオの詠唱中:マップが赤黒くなる(--dusk が大きいほど濃い。js/screens.js の drawDungeon) */
#screen.meteor-dusk { position: relative; }
#screen.meteor-dusk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(120, 10, 0, 0.35), rgba(30, 0, 0, 0.85));
  opacity: var(--dusk, 0); mix-blend-mode: multiply;
}
/* 霹龍の天の裁きのあいだ:雷雲でマップが青黒く暗くなる(js/screens.js の drawDungeon)
   ふつうの半透明の幕にする(色を掛け合わせる mix-blend-mode は、稲妻や揺れのたびに画面全体を計算し直して重いので使わない) */
#screen.storm-dark { position: relative; }
#screen.storm-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(10, 10, 30, 0.3), rgba(3, 3, 12, 0.7));
}
/* 焔龍の終焔(js/screens.js「終焔の演出」):
   溜めているあいだ、画面をふちから赤く染める板(濃さは JS が opacity で。中の ::before がゆっくり脈打つ。
   色を掛け合わせる mix-blend-mode は重いので使わず、ふつうの半透明の幕にする)。炎が揺らいだら(waver)脈打つのが止まる */
#fx-heat { position: fixed; inset: 0; opacity: 0; pointer-events: none; z-index: 997; transition: opacity 0.8s; }
#fx-heat::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 140, 40, 0.1) 30%, rgba(220, 40, 0, 0.85));
  animation: heat-pulse 1.6s ease-in-out infinite;
}
@keyframes heat-pulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
#fx-heat.waver::before { animation: none; opacity: 0.6; }
/* 瘴龍の瘴気の海(js/screens.js「瘴気の海の演出」):画面のふちを紫にかすませる板(濃さは JS が opacity で。瘴気の中にいると濃い)。
   #fx-heat と同じく、色の掛け合わせなしのふつうの半透明の幕 */
#fx-miasma { position: fixed; inset: 0; opacity: 0; pointer-events: none; z-index: 997; transition: opacity 0.8s;
  background: radial-gradient(ellipse at 50% 50%, rgba(120, 40, 160, 0) 35%, rgba(70, 10, 100, 0.85)); }
/* 放ったとき(白い光の板より下):下からせり上がる熱い光の幕(上のふちはぼやける)・噴き上がる炎のかたまり(中心が明るく外ほど透ける丸。
   hot は白っぽい熱い炎)・黒い煙・火の粉。動きと大きさは JS が決める。ぼかし(filter: blur)は重いので使わず、ぼやけはグラデーションで出す */
#fx-end-flame { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.end-flame-wall { position: absolute; left: 0; right: 0; bottom: 0; height: 140%; transform: translateY(100%);
  background: linear-gradient(to top, rgba(255, 235, 170, 0.95), rgba(255, 140, 40, 0.9) 20%, rgba(220, 50, 0, 0.75) 45%,
    rgba(120, 10, 0, 0.35) 70%, rgba(80, 0, 0, 0)); }
.flame-puff { position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 80, 0.9), rgba(255, 110, 20, 0.7) 30%, rgba(200, 30, 0, 0.35) 55%, rgba(120, 10, 0, 0) 70%); }
.flame-puff.hot {
  background: radial-gradient(circle, rgba(255, 250, 220, 0.95), rgba(255, 210, 90, 0.85) 25%, rgba(255, 120, 30, 0.5) 50%, rgba(200, 40, 0, 0) 70%); }
.flame-smoke { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(35, 25, 25, 0.6), rgba(35, 25, 25, 0) 70%); }
.ember { position: absolute; border-radius: 50%; background: #ffe080; box-shadow: 0 0 4px 1px #ff7a20; }
/* ブレスの演出(js/screens.js「ブレスの演出」):マップの上に重ねた透明な板。粒の動きと大きさは JS が決める
   ぼかし(filter: blur)は重いので使わず、ぼやけはグラデーションで出す。火は終焔の .flame-puff・.ember を使う */
.fx-breath { position: absolute; pointer-events: none; overflow: hidden; z-index: 6; }
.frost-puff { position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 253, 255, 0.95), rgba(190, 230, 255, 0.75) 30%, rgba(120, 190, 240, 0.35) 55%, rgba(80, 150, 220, 0) 70%); }
.ice-glint { position: absolute; background: #f4fbff; box-shadow: 0 0 4px 1px #9fd8ff; }
.poison-puff { position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 130, 240, 0.85), rgba(150, 70, 200, 0.65) 30%, rgba(90, 30, 130, 0.35) 55%, rgba(60, 20, 90, 0) 70%); }
.poison-bubble { position: absolute; border-radius: 50%; border: 1.5px solid #d8a0ff; background: rgba(180, 100, 230, 0.25); }
.breath-spark { position: absolute; border-radius: 50%; background: #fff8c0; box-shadow: 0 0 3px 1px #ffe14a; }
.breath-bolts { position: absolute; left: 0; top: 0; overflow: visible; }
.breath-bolt-core, .breath-bolt-glow { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.breath-bolt-core { stroke: #fffbe0; stroke-width: 1.5px; }
.breath-bolt-glow { stroke: #ffd21a; stroke-width: 5px; stroke-opacity: 0.6; }
/* 画面の揺れ(js/screens.js の screenShake) */
.shake-small { animation: shake-small 0.4s; }
.shake-big   { animation: shake-big 0.9s; }
@keyframes shake-small {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 0.5px); } 50% { transform: translate(1.5px, -0.5px); }
  75% { transform: translate(-1px, 0); }
}
/* 死んだとき:記号が一瞬ふくらんで光り、破片が散るように広がって消える(js/screens.js の deathFx)
   crumble は敵(0.7秒)、crumble-slow は自分(1.6秒・ゆっくり)。dying は自分が死んだときの画面(色が抜けていく) */
.crumble, .crumble-slow { display: inline-block; animation: crumble 0.7s ease-in forwards; }
.crumble-slow { animation-duration: 1.6s; }
@keyframes crumble {
  0%   { opacity: 1; transform: scale(1); text-shadow: none; filter: none; }
  30%  { opacity: 1; transform: scale(1.3); filter: brightness(2); text-shadow: 0 0 6px currentColor; }
  100% { opacity: 0; transform: scale(0.7) translateY(3px); filter: blur(1px);
         text-shadow: -7px -6px 1px currentColor, 7px -5px 1px currentColor, -6px 7px 1px currentColor, 6px 6px 1px currentColor, 0 -9px 1px currentColor; }
}
#screen.dying { animation: dying-gray 1.6s ease-in forwards; }
/* マップを包む枠(浮かぶ数字の位置の基準。js/screens.js の drawDungeon) */
.map-wrap { position: relative; }
/* 浮かぶ数字・文字(js/screens.js の addPopup):上にふわっと浮かんで消える */
.pop { position: absolute; transform: translateX(-25%); font-weight: bold; pointer-events: none; white-space: nowrap;
       text-shadow: 0 0 3px #000, 0 0 2px #000; animation: pop-up 0.9s ease-out forwards; z-index: 5; }
@keyframes pop-up {
  0%   { opacity: 0; transform: translate(-25%, 4px) scale(0.8); }
  15%  { opacity: 1; transform: translate(-25%, -2px) scale(1.15); }
  70%  { opacity: 1; transform: translate(-25%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-25%, -16px) scale(1); }
}
/* 地味に浮かぶもの(与えた・受けたダメージ・MISS):細い字・くすんだ色・ふくらまずに少しだけ浮かぶ */
@keyframes pop-up-quiet {
  0%   { opacity: 0; transform: translate(-25%, 2px); }
  20%  { opacity: 0.85; transform: translate(-25%, -2px); }
  70%  { opacity: 0.85; transform: translate(-25%, -6px); }
  100% { opacity: 0; transform: translate(-25%, -9px); }
}
.pop-dmg, .pop-hurt, .pop-miss { font-weight: normal; font-size: 0.85em; animation: pop-up-quiet 0.7s ease-out forwards; }
.pop-dmg  { color: #a8a8a8; }                       /* こちらが与えたダメージ */
.pop-crit { color: #ffd23a; font-size: 1.3em; }     /* 会心のダメージ(大きく) */
.pop-hurt { color: #b86060; }                       /* こちらが受けたダメージ */
.pop-heal { color: #5aff8a; }                       /* 回復 */
.pop-miss { color: #7890a4; font-size: 0.75em; }    /* かわした */
.pop-level { color: #ffd23a; font-size: 1.1em; }    /* レベルアップ */
/* マスが一瞬光る(js/screens.js の addTileFx) */
.fx-crit  { display: inline-block; animation: fx-crit 0.35s ease-out; }  /* 会心の一撃を受けた敵 */
@keyframes fx-crit { 0% { background: #fff; color: #000; transform: scale(1.4); } 100% { background: transparent; transform: scale(1); } }
/* 墓に初めて乗ったとき:墓のマスが青白くふわっと光る(js/grave.js の visitGrave) */
.fx-grave { display: inline-block; animation: fx-grave 1.8s ease-out; }
@keyframes fx-grave { 0% { box-shadow: 0 0 0 0 rgba(170, 190, 255, 0); } 25% { background: rgba(170, 190, 255, 0.35); box-shadow: 0 0 16px 5px rgba(170, 190, 255, 0.7); } 100% { background: transparent; box-shadow: 0 0 0 0 rgba(170, 190, 255, 0); } }
/* ふつうの攻撃を受けた敵:白く光って、殴られた向きに少しはねて戻る(右・左・下・上。js/combat.js の playerStrike) */
.fx-hit-r, .fx-hit-l, .fx-hit-d, .fx-hit-u { display: inline-block; animation: fx-hit 0.18s ease-out; }
.fx-hit-r { --hx: 3px;  --hy: 0; }
.fx-hit-l { --hx: -3px; --hy: 0; }
.fx-hit-d { --hx: 0;    --hy: 3px; }
.fx-hit-u { --hx: 0;    --hy: -3px; }
@keyframes fx-hit { 0% { color: #fff; text-shadow: 0 0 6px #fff; transform: translate(var(--hx), var(--hy)); } 100% { transform: translate(0, 0); } }
.fx-dodge { display: inline-block; animation: fx-dodge 0.3s ease-out; }  /* こちらがかわした */
@keyframes fx-dodge { 0% { transform: translateX(0); } 35% { transform: translateX(-4px); opacity: 0.5; } 100% { transform: translateX(0); opacity: 1; } }
/* 敵の技を放った瞬間、範囲のマスが光る(js/enemyskills.js の flashTiles)。ブレスは属性の色 */
.fx-el-fire, .fx-el-poison, .fx-el-ice, .fx-el-thunder, .fx-slash, .fx-quake { animation: fx-tile 0.45s ease-out; }
.fx-el-fire    { --fx: #ff7a30; }
.fx-el-poison  { --fx: #b060e0; }
.fx-el-ice     { --fx: #9fe4ff; }
.fx-el-thunder { --fx: #ffe14a; }
.fx-slash      { --fx: #ffffff; }   /* ガーゴイルの薙ぎ払い・回転切り */
.fx-quake      { --fx: #b08850; }   /* ベヒーモスの地響き */
@keyframes fx-tile { 0% { background: var(--fx); } 100% { background: transparent; } }
/* 自分の @ の色:かかっている状態異常の色(js/screens.js の playerStatusClass) */
.player.st-poison  { color: #c070e0; }
.player.st-burn    { color: #ff7a40; }
.player.st-chill   { color: #8fd8ff; }
.player.st-shock   { color: #ffe14a; animation: st-blink 0.5s steps(1) infinite; }
.player.st-confuse { color: #e080c0; }
.player.st-blind   { color: #8a8a8a; }
.player.st-bind    { color: #d8c890; }
@keyframes st-blink { 50% { color: #ffffff; } }
/* 名前を大きく出す(js/screens.js の showBanner。エリート・墓守・龍が初めて見えたとき) */
#fx-banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; opacity: 0; z-index: 20; }
#fx-banner.show { animation: banner 2.2s ease-out forwards; }
#fx-banner .banner-sub { font-size: 14px; letter-spacing: 0.4em; color: #ccc; }
#fx-banner .banner-title { font-size: 30px; font-weight: bold; letter-spacing: 0.15em; text-shadow: 0 0 8px #000, 0 0 4px #000; }
#fx-banner.banner-elite .banner-title { color: #ffd23a; }
#fx-banner.banner-dragon .banner-title { color: #e6eaf2; text-shadow: 0 0 12px #8fd8ff, 0 0 4px #000; }
#fx-banner.banner-layer .banner-title { color: #ff9a6a; }
@keyframes banner {
  0% { opacity: 0; transform: scale(1.3); } 15% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); }
}
#fx-banner.banner-legendary .banner-title { color: #ffa040; text-shadow: 0 0 12px #ffa040, 0 0 4px #000; }
#fx-banner.banner-mythic .banner-title { color: #ff4d6d; text-shadow: 0 0 14px #ff4d6d, 0 0 4px #000; }
/* 実績を取ったとき:画面の上から帯が下りてくる(js/screens.js の showAchievementToast) */
#fx-toast { position: fixed; top: 0; left: 50%; transform: translate(-50%, -110%); z-index: 1100; pointer-events: none;
            background: linear-gradient(#3a2c08, #241a04); border: 1px solid #ffd23a; border-top: none; border-radius: 0 0 8px 8px;
            padding: 8px 28px 10px; text-align: center; box-shadow: 0 4px 18px rgba(255, 210, 58, 0.35); }
#fx-toast.show { animation: toast 3.2s ease-in-out forwards; }
#fx-toast .toast-head { color: #ffd23a; font-weight: bold; font-size: 13px; letter-spacing: 0.2em; }
#fx-toast .toast-name { color: #fff; font-size: 16px; font-weight: bold; }
@keyframes toast {
  0% { transform: translate(-50%, -110%); } 12% { transform: translate(-50%, 0); }
  85% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -110%); }
}
/* 次の階に着いたとき:真っ暗から、ふわっと明るくなる(js/screens.js の fadeInFloor) */
#fx-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 15; }
#fx-fade.show { animation: fx-fade 0.6s ease-out; }
@keyframes fx-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
/* レア以上の装備を拾ったとき:足元がレア度の色で光る(js/items.js の pickUpEquipment) */
.fx-glow-rare, .fx-glow-epic, .fx-glow-legendary, .fx-glow-mythic { display: inline-block; animation: fx-glow 0.9s ease-out; }
.fx-glow-rare      { --fx: #5ab0ff; }
.fx-glow-epic      { --fx: #2ec4a0; }
.fx-glow-legendary { --fx: #ffa040; }
.fx-glow-mythic    { --fx: #ff4d6d; }
@keyframes fx-glow { 0% { background: var(--fx); box-shadow: 0 0 14px 4px var(--fx); } 100% { background: transparent; box-shadow: none; } }
/* 刻んだ瞬間:画面のふちが紫と金に光る(js/items.js の engraveEquipment) */
.fx-engrave { animation: fx-engrave 0.9s ease-out; }
@keyframes fx-engrave { 0% { box-shadow: 0 0 0 0 rgba(180, 120, 255, 0); } 30% { box-shadow: 0 0 20px 4px rgba(180, 120, 255, 0.9), inset 0 0 12px rgba(255, 210, 58, 0.6); } 100% { box-shadow: 0 0 0 0 rgba(180, 120, 255, 0); } }
/* 霹龍の落雷:画面がほんの一瞬だけ明るくなる(js/screens.js の screenFlash("bolt")) */
#fx-flash.flash-bolt { animation: fx-flash-bolt 0.25s ease-out; }
@keyframes fx-flash-bolt { 0% { opacity: 0; } 20% { opacity: 0.25; } 100% { opacity: 0; } }
/* 霹龍の天の裁き:雷が落ちるたび一瞬赤く(flash-redbolt)/ 始まった瞬間は赤く強く(flash-red)。js/screens.js の screenFlash */
#fx-flash.flash-redbolt { background: #ff3020; animation: fx-flash-bolt 0.25s ease-out; }
#fx-flash.flash-red { background: #ff2010; animation: fx-flash-red 1.0s ease-out; }
@keyframes fx-flash-red { 0% { opacity: 0; } 8% { opacity: 0.6; } 100% { opacity: 0; } }
/* 瘴龍が脱皮した瞬間:紫に強く光る(flash-purple。光り方は天の裁きの始まりと同じ) */
#fx-flash.flash-purple { background: #a040e0; animation: fx-flash-red 1.0s ease-out; }
/* レベルアップ:画面のふちとステータス欄が金色に光る(js/screens.js の frameFx) */
.fx-levelup { animation: fx-levelup 1.2s ease-out; }
@keyframes fx-levelup { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 58, 0); } 20% { box-shadow: 0 0 18px 4px rgba(255, 210, 58, 0.9); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 58, 0); } }
/* HP が少ないとき:画面のふちが赤く脈打つ */
.low-hp { animation: low-hp 1.2s ease-in-out infinite; }
@keyframes low-hp { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 40, 40, 0); } 50% { box-shadow: inset 0 0 26px 2px rgba(255, 40, 40, 0.55); } }
/* ログの目立つ行(会心の一撃・痛恨の一撃・レベルアップ。js/util.js の drawLog) */
.log-new.log-crit { color: #ffd23a; font-weight: bold; }
.log-new.log-ouch { color: #ff7070; font-weight: bold; }
@keyframes dying-gray { from { filter: none; } to { filter: grayscale(1) brightness(0.55); } }
@keyframes shake-big {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 4px); } 20% { transform: translate(9px, -5px); } 30% { transform: translate(-8px, -3px); }
  40% { transform: translate(7px, 4px); } 55% { transform: translate(-5px, 2px); } 70% { transform: translate(4px, -2px); }
  85% { transform: translate(-2px, 1px); }
}
/* 中くらいの揺れ(メテオのあとに続く爆発。js/screens.js の screenShake) */
.shake-mid { animation: shake-mid 0.6s; }
@keyframes shake-mid {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-6px, 3px); } 25% { transform: translate(5px, -3px); } 40% { transform: translate(-4px, -2px); }
  55% { transform: translate(3px, 2px); } 75% { transform: translate(-2px, 1px); }
}
/* だんだん弱まる長い地鳴り(メテオの最後) */
.shake-rumble { animation: shake-rumble 1.8s linear; }
@keyframes shake-rumble {
  0%, 100% { transform: translate(0, 0); }
  5% { transform: translate(-5px, 2px); } 10% { transform: translate(4px, -2px); } 15% { transform: translate(-4px, -1px); }
  20% { transform: translate(4px, 2px); } 27% { transform: translate(-3px, 1px); } 34% { transform: translate(3px, -1px); }
  42% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 60% { transform: translate(-1.5px, 0.5px); }
  70% { transform: translate(1.5px, -0.5px); } 80% { transform: translate(-1px, 0); } 90% { transform: translate(0.5px, 0); }
}
/* 画面全体の白い光(js/screens.js の screenFlash) */
#fx-flash, #fx-flash-after { position: fixed; inset: 0; background: #fff8e0; opacity: 0; pointer-events: none; z-index: 1000; }
#fx-flash.flash { animation: fx-flash 1.2s ease-out; }
@keyframes fx-flash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
/* メテオのあとに続く爆発のオレンジの光(強さは --fx-power) */
#fx-flash-after { background: #ff8a30; }
/* エクリプスメテオが落ちてくる(js/screens.js の playMeteorFall):画面全体にかかる黒い幕。だんだん濃くなる(白い光の板より下に重ねる) */
#fx-meteor-dark { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 999; }
#fx-flash-after.flash { animation: fx-flash-after 0.9s ease-out; }
@keyframes fx-flash-after { 0% { opacity: 0; } 10% { opacity: var(--fx-power, 0.5); } 100% { opacity: 0; } }
.bolt-mark { background: #4a3c00; animation: bolt-blink 0.6s steps(1) infinite; }
@keyframes bolt-blink { 50% { background: #8a7000; } }
.bolt-mark.bolt-still { animation: none; background: #4a1010; }   /* 霹龍の天の裁きの印:赤。数が多いので点滅しない */
.bolt-sym.bolt-storm { color: #ff5a4a; }
/* 天の裁きの赤い稲妻(js/screens.js の boltsHTML):マップの上に重ねる SVG。芯(細く明るい)と光(太く薄い)の2本で描き、すっと消える
   z-index で、嵐の暗い幕(storm-dark)より上に出す */
.bolt-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.bolt-core, .bolt-glow { fill: none; stroke-linejoin: round; stroke-linecap: round; animation: bolt-fade ease-in forwards; }
.bolt-core { stroke: #ffd0c8; stroke-width: 1.5px; }
.bolt-glow { stroke: #ff2a1a; stroke-width: 5px; opacity: 0.7; } /* ぼかし(drop-shadow)は重いので使わない */
@keyframes bolt-fade { 0% { opacity: 1; } 60% { opacity: 0.8; } 100% { opacity: 0; } }
/* 天の裁きの雷が落ちたマス:赤くはじける(js/enemyskills.js の lightningAct) */
.fx-redbolt { display: inline-block; animation: fx-redbolt 0.45s ease-out; }
@keyframes fx-redbolt { 0% { background: #fff0e8; } 30% { background: #ff3020; } 100% { background: transparent; } } /* 光のにじみ(box-shadow)は重いので使わない */
.atk { background: #3e1a1a; }                                     /* F キー:敵の攻撃が届く範囲(薄い赤) */
.vis { background: #2e2a14; }                                     /* F キー:気づいていない敵の視界(薄い黄色) */
.aim { background: #143a2a; }                                     /* 弓で狙っているあいだ、矢が届く範囲(薄い緑) */
.poison { color: #b060d0; font-weight: bold; }                    /* 毒 */
.burn { color: #ff7a40; font-weight: bold; }                      /* やけど */
.blind { color: #9aa0c8; font-weight: bold; }                     /* 盲目 */
.confuse { color: #e080c0; font-weight: bold; }                   /* 混乱 */
.bind { color: #d8c890; font-weight: bold; }                      /* 拘束 */
.chill { color: #8fd8ff; font-weight: bold; }                     /* 凍え */
.shock { color: #ffe14a; font-weight: bold; }                     /* しびれ */
.mem { opacity: 0.4; }                                            /* 盲目などで今は見えない、前に見た地形(薄く残す) */
.floor.mem { opacity: 0.6; }                                      /* 床はもともと暗いので、消えすぎないように */
.route { color: #e0c070; }                                        /* この階に来るときに選んだ道 */
.potion { color: #ff77cc; }
.armor { color: #55ccff; }
.ring { color: #ffd84d; }
.earring { color: #cc88ff; }
.weapon { color: #88bbff; }
.shield { color: #b0c4de; }
.mat { color: #5fd7d7; }
/* 刻印の名前・一族の名前は、言葉の途中で改行しない(長いときは、言葉の切れ目で次の行に送る) */
.mat-name { color: #5fd7d7; font-weight: bold; white-space: nowrap; } /* 刻印の名前 */
.clan-tag { color: #e8c890; white-space: nowrap; }                    /* 一族の名前(色は一族ごとに style で指定) */
/* レア度(謎の塊を鑑定した装備)。刻印の名前の色(.mat-name)より後ろに書いて、こちらを優先する */
.r-common { color: #e8e8e8; }
.r-rare   { color: #5ab0ff; }
.r-epic   { color: #2ec4a0; }
.r-legend { color: #ffa040; }
.r-mythic { color: #ff4d6d; }
.rarity-tag { font-size: 12px; font-weight: bold; white-space: nowrap; } /* 装備名の前の「エピック」などの印(色は上の r-〇〇) */
.lump { color: #c8b8a0; font-weight: bold; }                           /* 謎の塊 */
/* 一族の札(刻印の名前の横)。背景の色は一族ごとに style で指定 */
.clan-badge { color: #111; border-radius: 3px; padding: 0 4px; font-size: 12px; white-space: nowrap; }
/* 武器のジャンルの札(例:槍)。着けている武器と刻印のジャンルが同じときは .match で明るくする */
.kind-tag { color: #c8c8c8; border: 1px solid #777; border-radius: 3px; padding: 0 3px; font-size: 12px; white-space: nowrap; }
.kind-tag.match { color: #111; background: #8fe08f; border-color: #8fe08f; }
.book { color: #ffae42; font-weight: bold; }
.trait-on { color: #ffae42; }
.bless { color: #7fd6a0; }   /* 呪われた装備の良い効果 */
.curse { color: #d56cff; }   /* 呪い */
.curse-tag { color: #fff; background: #7a2a9a; border-radius: 3px; padding: 0 4px; font-size: 12px; }
.holy-tag { color: #0c2a3a; background: #9fe0ff; border-radius: 3px; padding: 0 4px; font-size: 12px; }
.mini-bar { display: inline-block; width: 90px; height: 6px; background: #2a2a35; border-radius: 3px; overflow: hidden; vertical-align: middle; }
.mini-bar > span { display: block; height: 100%; }

/* スマホの引き出しの [≡] とうしろの幕は、ふだん(パソコンの広い画面)は出さない。出すのは下の「幅の狭い画面」のとき */
#side-toggle, #side-backdrop { display: none; }

/* ==================== スマホなど、幅の狭い画面 ==================== */
/* 縦持ちのスマホを想定。右の列(装備・依頼・ログ・設定)は右上の [≡] で出す引き出しにする */
@media (max-width: 800px) {
  body { margin: 8px; }
  .layout { flex-direction: column; gap: 8px; }
  .main { width: 100%; gap: 8px; }
  .panel { padding: 8px 10px; }
  /* 右の列は「引き出し」にする:ふだんは画面の右の外に隠れていて、[≡] で右からすっと出てくる(js/touch.js の toggleSideDrawer) */
  .side {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: 85vw; max-width: 420px; flex: none; gap: 8px;
    padding: 56px 8px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; /* 上は [≡] の分あける */
    background: #0c0c10; border-left: 1px solid #2c2c38; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.2s ease-out;
  }
  body.side-open .side { transform: none; }
  #log { height: 40vh; font-size: 13px; }
  /* 右上の [≡]:画面の右上に固定。引き出しより上に出す(開いているときは閉じるボタンになる) */
  #side-toggle {
    display: block; position: fixed; top: 8px; right: 8px; z-index: 70;
    width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1;
    color: #ddd; background: rgba(29, 29, 38, 0.92); border: 1px solid #44445a; border-radius: 8px;
  }
  body.side-open #side-toggle { background: #3a3a50; }
  /* 引き出しが開いているときの、うしろの暗い幕(タップで閉じる) */
  body.side-open #side-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.5); }
  /* マップが画面の幅に収まるように、文字を小さくする
     マップの幅は 40マス(mapWidth)× 0.875em(mapCellEm)= 35em なので、使える幅 ÷ 35 にする(js/config.js を変えたらここも)
     (#screen の幅・高さは em で決めているので、文字を小さくすると画面も一緒に小さくなる) */
  #screen { font-size: calc((100vw - 40px) / 35); }
  /* 文字の画面(拠点・持ち物など)は、マップの大きさに合わせると狭すぎるので、幅いっぱい・画面の高さの6割にする */
  #screen.text-mode { width: auto !important; height: 60vh !important; }
  .text-body { font-size: 14px; }
  .status-top { flex-wrap: wrap; gap: 4px 14px; }
  #status { font-size: 14px; }
  /* 図鑑:一覧と説明を横に並べると狭いので、縦に並べる */
  .dex { grid-template-columns: 1fr; }
  .dex-list { border-right: none; border-bottom: 1px solid #2c2c38; padding: 0 0 8px; max-height: 30vh; overflow-y: auto; }
  .dex-detail { position: static; }
}

/* ==================== スマホの操作ボタン(js/touch.js) ==================== */
/* タッチ画面のときだけ、画面の下に固定して出す。ページの下に、ボタンで隠れる分の余白をあける */
body.touch { padding-bottom: 210px; }
#touch-pad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); /* env(…):iPhone の画面下のバーにかからないように */
  background: rgba(12, 12, 16, 0.94); border-top: 1px solid #2c2c38;
}
/* 十字キー:3×3 のマスに並べる */
.touch-dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 4px; }
/* 右のボタン:2列 */
.touch-act { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; flex: 1; max-width: 220px; }
.touch-btn {
  font-family: inherit; font-size: 18px; color: #ddd; background: #1d1d26;
  border: 1px solid #44445a; border-radius: 8px; padding: 0; min-height: 48px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* 長押しで文字が選ばれたり、メニューが出たりしないように */
}
.touch-act .touch-btn { font-size: 14px; }
.touch-btn.small { font-size: 13px; }
.touch-btn.main { background: #2e6b3a; border-color: #4cd964; color: #fff; }       /* 決定 */
.touch-btn.danger-btn { color: #ff8a8a; border-color: #6b2e2e; font-size: 12px; }  /* 自害 */
.touch-btn.pressed { background: #3a3a50; }
.touch-btn.main.pressed { background: #3f8f4f; }