:root {
  --watch: #9aa3ad;
  --approach: #f5c518;
  --soon: #f97316;
  --chance: #22c55e;
  --bg: #0f1420;
  --panel: #182031;
  --panel2: #1f2940;
  --text: #eef2f7;
  --sub: #9aa8bd;
  --up: #ef4444;
  --down: #3b82f6;
  --record: #fbbf24;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 40px;
  position: relative;
}

/* ───────── サイバー背景（切替式・CSSのみ・軽量）─────────
   position:fixedの疑似要素2枚をbodyの背面に敷くだけで、Canvas/パーティクル等の重い描画は使わない。
   前面のカード・パネルは全て不透明な背景色を持つため、隙間にだけ模様が透けて見え、可読性を損なわない。 */
body::before, body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .4s;
}
body[data-bg="cyber"] { background: #050a08; }
body[data-bg="cyber"]::before {
  opacity: 1;
  background-image:
    linear-gradient(rgba(0, 255, 178, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 178, .10) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: cyberGrid 14s linear infinite;
}
body[data-bg="cyber"]::after {
  opacity: 1;
  background-image: repeating-linear-gradient(
    to bottom, rgba(56, 255, 214, .06) 0px, rgba(56, 255, 214, .06) 1px,
    transparent 2px, transparent 4px
  );
  mix-blend-mode: screen;
  animation: cyberScan 7s linear infinite;
}
@keyframes cyberGrid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 42px 42px, 42px 42px; }
}
@keyframes cyberScan {
  from { background-position: 0 0; }
  to   { background-position: 0 480px; }
}
/* サイバーモード時のアクセント（控えめ・可読性優先。低motion環境ではアニメーションのみ止め、配色は維持） */
/* 見張り中/接近/まもなく/チャンスの色は「安全に関わる合図」なので、背景モードや端末によらず常に同じ
   色に統一する（以前はサイバーモード時だけ .soon/.chance の枠線が緑寄りの色に変わっていたため、
   iPad等でサイバーモードがONだと「まもなく」がオレンジではなく黄緑っぽく見える原因になっていた）。
   そのため .card.soon / .card.chance の枠線色はここでは上書きしない。 */
body[data-bg="cyber"] header.top h1 { text-shadow: 0 0 14px rgba(56, 255, 214, .45); }
body[data-bg="cyber"] .pf-btn.active {
  box-shadow: 0 0 0 3px rgba(79, 124, 255, .35), 0 0 16px rgba(56, 255, 214, .35);
}
@media (prefers-reduced-motion: reduce) {
  body[data-bg="cyber"]::before, body[data-bg="cyber"]::after { animation: none; }
}
header.top {
  padding: 18px 20px 6px;
  text-align: center;
}
header.top h1 { margin: 0 0 6px; font-size: 26px; }
.lan { color: var(--sub); font-size: 13px; }

.startbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px; padding: 14px; margin: 10px auto; max-width: 1000px;
}
.soundToggle { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--sub); }

.portfolio-bar {
  max-width: 1000px; margin: 6px auto 12px; padding: 12px 16px;
  background: var(--panel); border-radius: 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.pf-switch { display: flex; gap: 8px; }
.pf-btn {
  position: relative;
  font-size: 15px; padding: 10px 16px; border-radius: 10px; border: 1px solid #33415c;
  background: var(--panel2); color: var(--text); cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.pf-btn:hover { border-color: #4f7cff; background: #24304a; }
.pf-btn:active { transform: scale(0.96); }
.pf-btn.active {
  background: #3a5fe0; border-color: #7ea0ff; color: #fff; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(79,124,255,.35);
}
.pf-btn.active::before { content: "✓ "; }
.pf-btn.switching { opacity: .6; cursor: wait; }
.pf-info { font-size: 13px; color: var(--sub); text-align: right; }

/* ───────── P1/P2ホバー説明ツールチップ（title属性ではなくCSSカスタム表示） ───────── */
.pf-btn[data-tooltip] {
  position: relative;
}
.pf-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px);
  width: 280px; max-width: 74vw;
  background: #0b0f18; color: var(--text); border: 1px solid #33415c;
  border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.7;
  white-space: pre-line; text-align: left; font-weight: 400;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  transition: opacity .15s, transform .15s;
}
.pf-btn[data-tooltip]:hover::after,
.pf-btn[data-tooltip]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ───────── 勝敗集計パネル ───────── */
.stats-bar {
  max-width: 1000px; margin: 0 auto 18px; padding: 14px 16px;
  background: var(--panel); border-radius: 16px;
}
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stats-title { font-size: 15px; font-weight: 700; }
.reset-btn {
  font-size: 12px; padding: 7px 12px; border-radius: 8px; border: 1px solid #4b3030;
  background: #241618; color: #f0a3a3; cursor: pointer;
}
.reset-btn:hover { background: #331c1e; }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px; margin-top: 10px;
}
.stat { text-align: center; background: var(--panel2); border-radius: 10px; padding: 8px 4px; }
.stat-label { display: block; font-size: 11px; color: var(--sub); }
.stat-value { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; }
.stat-value.win { color: var(--chance); }
.stat-value.lose { color: var(--up); }
.stats-note { margin-top: 8px; font-size: 11px; color: var(--sub); }

/* 「3つずつ」レイアウトの時だけ、JS(fitCardsToViewport)がここに実際の高さ(px)をセットし、
   #cardsへのtransform:scale()による縮小ぶんの余白を詰める（横一列の時は高さ指定なし＝従来通り）。 */
.cards-viewport { overflow: hidden; }
.cards {
  /* P3選択時はEUR/USDが加わり6枚になるため、固定5列ではなくauto-fitで可変にする
     （340px前後を基準に、5枚なら5列・6枚でも詰まりすぎないように） */
  max-width: 1680px; margin: 0 auto; padding: 0 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px;
}
/* チャート配置切替（横一列／3つずつ）。既定(横一列)は上のauto-fitのまま。
   「3つずつ」を選ぶと画面幅に関わらず3列固定でラップし、JS側でパソコンの画面の高さに
   収まるようtransform:scale()で自動縮小する（transform-originはJS側でtop centerに設定）。 */
.cards.layout-grid3 { grid-template-columns: repeat(3, 1fr); }
.card {
  border-radius: 20px; padding: 16px; background: var(--panel);
  border: 3px solid transparent;
  transition: border-color .3s, background .3s;
  display: flex; flex-direction: column; position: relative;
  min-width: 0; /* grid内でSVG等がはみ出さないように */
}
.card-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card .pairname { font-size: 18px; color: var(--sub); margin-bottom: 8px; letter-spacing: .05em; }
.card .state {
  font-size: 22px; font-weight: 700; padding: 6px 14px; border-radius: 999px; margin-bottom: 8px;
}
.card.watch .state { color: var(--watch); background: rgba(154,163,173,.12); }
.card.approach .state { color: var(--approach); background: rgba(245,197,24,.14); }
.card.soon .state { color: var(--soon); background: rgba(249,115,22,.16); }
.card.chance .state { color: var(--chance); background: rgba(34,197,94,.16); }
.card.watch { border-color: rgba(154,163,173,.22); }
.card.approach { border-color: var(--approach); }
.card.soon { border-color: var(--soon); animation: pulseSoon 1.4s infinite; }
.card.chance { border-color: var(--chance); animation: pulse 1.1s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}
/* エントリー明細に実際に記録されるペアだけを目立たせる（複数ペアがほぼ同時にチャンスになった時の目印）。
   記録対象外のチャンスは逆にわずかに落ち着かせ、記録中のカードとの差を付ける。 */
.card.chance:not(.recorded-entry) { opacity: .8; }
.card.recorded-entry {
  border-color: var(--record);
  animation: pulseRecord 1.1s infinite;
  transform: scale(1.025);
  z-index: 1;
}
@keyframes pulseRecord {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.6); }
  50% { box-shadow: 0 0 0 16px rgba(251,191,36,0); }
}
.record-badge {
  margin-top: 8px; font-size: 12px; font-weight: 700; padding: 4px 12px;
  border-radius: 999px; display: inline-block;
}
.record-badge-on { color: #78350f; background: var(--record); }
.record-badge-off { color: var(--sub); background: rgba(154,163,173,.15); font-weight: 500; }
@keyframes pulseSoon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,.4); }
  50% { box-shadow: 0 0 0 10px rgba(249,115,22,0); }
}
.card .dir {
  font-size: 42px; font-weight: 900; line-height: 1; margin: 4px 0;
}
.card .dir.up { color: var(--up); }
.card .dir.down { color: var(--down); }
.card .dir small { display: block; font-size: 11px; color: var(--sub); font-weight: 400; margin-top: 2px; }
/* 「まもなく」段階の想定方向表示。チャンス確定(.dir単体)よりやや控えめなサイズで区別する */
.card .dir.soon-dir { font-size: 32px; }
.card .countdown { font-size: 26px; font-weight: 700; }
.card .countdown small { font-size: 13px; color: var(--sub); font-weight: 400; }
.card .detail { margin-top: 6px; font-size: 12px; color: var(--sub); }
.card .price { font-size: 13px; color: var(--sub); margin-top: 4px; }
.card .err { color: #f87171; font-size: 12px; margin-top: 6px; }

/* ───────── チャート・ゲージ・仲値パネル ───────── */
.chart-wrap { margin-top: 12px; }
.chart-wrap svg, .rsi-wrap svg { width: 100%; height: auto; display: block; }
.rsi-wrap { margin-top: 4px; }
.chart-empty { font-size: 12px; color: var(--sub); text-align: center; padding: 24px 0; }
.chart-caption { font-size: 10px; color: var(--sub); display: flex; justify-content: space-between; margin-top: 2px; }

.gauges { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.gauge-label { font-size: 11px; color: var(--sub); display: flex; justify-content: space-between; }
.gauge-label .pct { font-weight: 700; color: var(--text); }
.gauge-track {
  position: relative; height: 12px; background: #0b0f18; border-radius: 7px; overflow: hidden;
  margin-top: 3px; border: 1px solid #232d42;
}
.gauge-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 7px; transition: width .3s; }
.gauge-fill.up { background: linear-gradient(90deg, #7f1d1d, var(--up)); }
.gauge-fill.down { background: linear-gradient(90deg, #1e3a8a, var(--down)); }
.gauge-fill.neutral { background: #334155; }
.gauge-mark {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: .8;
}
.gauge-mark-label {
  position: absolute; top: -14px; font-size: 9px; color: var(--sub); white-space: nowrap;
}

.s3-panel {
  margin-top: 10px; font-size: 11px; color: var(--sub); background: #0b0f18;
  border-radius: 10px; padding: 8px 10px; border: 1px solid #232d42;
}
.s3-panel .s3-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.s3-panel .s3-track {
  position: relative; height: 10px; background: #111827; border-radius: 6px; overflow: hidden; margin-top: 4px;
}
.s3-panel .s3-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #334155, var(--approach)); }
.s3-panel .s3-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: .8; }
.s3-panel .s3-label { font-size: 9px; color: var(--sub); margin-top: 2px; }

.s1-panel {
  margin-top: 10px; font-size: 11px; color: var(--sub); background: #0b0f18;
  border-radius: 10px; padding: 8px 10px; border: 1px solid #232d42;
}
.s1-panel .s1-head { font-size: 9px; color: var(--sub); margin-bottom: 6px; }
.s1-panel .s1-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.s1-panel .s1-row:last-child { margin-bottom: 0; }
.s1-panel .s1-tier { color: var(--text); white-space: nowrap; }
.s1-panel .s1-status { text-align: right; }
.s1-panel .s1-v1 .s1-status { font-size: 10px; }
.s1-panel .s1-muted { color: var(--sub); }
.s1-panel .s1-watch { color: var(--approach); }
.s1-panel .s1-hot { color: var(--chance); font-weight: 600; }

.legend {
  max-width: 1000px; margin: 20px auto 0; padding: 0 16px;
  display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--sub);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.watch { background: var(--watch); }
.dot.approach { background: var(--approach); }
.dot.soon { background: var(--soon); }
.dot.chance { background: var(--chance); }

.loglist { max-width: 1000px; margin: 26px auto 0; padding: 0 16px; }
.loglist h2 { font-size: 15px; color: var(--sub); font-weight: 600; }
.loglist-scroll {
  max-height: 280px; overflow-y: auto; border: 1px solid #232d42; border-radius: 12px;
  background: var(--panel);
}
#eventLog { list-style: none; padding: 0; margin: 0; font-size: 13px; }
#eventLog li { padding: 6px 10px; border-bottom: 1px solid #232d42; color: var(--sub); }
#eventLog li:last-child { border-bottom: none; }
#eventLog li.chance { color: var(--chance); }
#eventLog li.approach { color: var(--approach); }
#eventLog li.soon { color: var(--soon); }
#eventLog time { color: #5c6b85; margin-right: 8px; }

.disclaimer {
  max-width: 1000px; margin: 30px auto 0; padding: 14px 16px; text-align: center;
  font-size: 12px; color: #6b7690; border-top: 1px solid #232d42;
}

/* ───────── 音量スライダー ───────── */
.volumeCtl { gap: 8px; }
.volumeCtl input[type="range"] {
  width: 120px; accent-color: #4f7cff; cursor: pointer;
}

/* ───────── チャート表示モード切替 ───────── */
.chartModeCtl { gap: 10px; }
.chartModeCtl label { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 15px; }
.chartModeCtl input[type="radio"] { accent-color: #4f7cff; cursor: pointer; }

.soundStyleCtl { gap: 10px; }
.soundStyleCtl label { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 15px; }
.soundStyleCtl input[type="radio"] { accent-color: var(--soon); cursor: pointer; }

/* ───────── エントリー明細 ───────── */
.entries-panel {
  max-width: 1200px; margin: 26px auto 0; padding: 16px 18px;
  background: var(--panel); border-radius: 16px;
}
.entries-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.entries-head h2 { font-size: 16px; margin: 0; color: var(--text); }
.entries-nav { display: flex; align-items: center; gap: 6px; }
.nav-btn {
  font-size: 12.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid #33415c;
  background: var(--panel2); color: var(--text); cursor: pointer;
}
.nav-btn:hover { border-color: #4f7cff; background: #24304a; }
.entries-nav input[type="date"] {
  font-size: 12.5px; padding: 5px 8px; border-radius: 8px; border: 1px solid #33415c;
  background: #0b0f18; color: var(--text); color-scheme: dark;
}
.entries-summary { margin-top: 12px; font-size: 13.5px; color: var(--sub); }
.entries-summary b { color: var(--text); }
.entries-filters {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--sub);
}
.entries-filters label { display: flex; align-items: center; gap: 6px; }
.entries-filters select {
  font-size: 12.5px; padding: 4px 6px; border-radius: 6px; border: 1px solid #33415c;
  background: #0b0f18; color: var(--text);
}
.entries-table-scroll { margin-top: 12px; overflow-x: auto; }
#entriesTable { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
#entriesTable th, #entriesTable td { padding: 7px 10px; text-align: center; border-bottom: 1px solid #232d42; }
#entriesTable th { color: var(--sub); font-weight: 600; background: #10141f; position: sticky; top: 0; }
#entriesTable tbody tr:hover { background: rgba(79,124,255,.06); }
.entries-empty { color: var(--sub); padding: 18px 0 !important; }
.pips-plus { color: var(--chance); font-weight: 700; }
.pips-minus { color: var(--up); font-weight: 700; }
.forced-mark { color: var(--approach); margin-left: 2px; cursor: help; }
.chart-btn {
  font-size: 11.5px; padding: 5px 10px; border-radius: 7px; border: 1px solid #33415c;
  background: var(--panel2); color: var(--text); cursor: pointer;
}
.chart-btn:hover { border-color: #4f7cff; background: #24304a; }

/* タグ（結果・方向共通） */
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tag-win { color: var(--chance); background: rgba(34,197,94,.14); }
.tag-lose { color: var(--up); background: rgba(239,68,68,.14); }
.tag-HIGH { color: var(--up); background: rgba(239,68,68,.14); }
.tag-LOW { color: var(--down); background: rgba(59,130,246,.14); }
.tag-pf { color: var(--sub); background: rgba(154,168,189,.14); }
.tag-regime-range { color: #22c55e; background: rgba(34,197,94,.14); }
.tag-regime-choppy { color: #eab308; background: rgba(234,179,8,.14); }
.tag-regime-trend { color: #ef4444; background: rgba(239,68,68,.14); }
.tag-regime-unknown { color: var(--sub); background: rgba(154,168,189,.14); }

/* ───────── エントリー明細のチャートモーダル ───────── */
.modal {
  position: fixed; inset: 0; background: rgba(5,8,14,.72);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--panel); border-radius: 16px; padding: 18px;
  max-width: 960px; width: 100%; position: relative;
}
.close-btn {
  position: absolute; top: 10px; right: 14px; font-size: 22px; line-height: 1;
  background: none; border: none; color: var(--sub); cursor: pointer;
}
.close-btn:hover { color: var(--text); }
.chart-info {
  display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--sub);
  margin-bottom: 10px; padding-right: 26px;
}
.chart-info b { color: var(--text); }
#entryChartCanvas { width: 100%; height: auto; display: block; border-radius: 10px; cursor: grab; }
.chart-hint { margin-top: 6px; font-size: 11px; color: var(--sub); text-align: right; }

/* さらに画面が狭い場合は1カードあたりの最小幅をもっと小さくする */
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cards.layout-grid3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .card .dir { font-size: 34px; }
  .card .dir.soon-dir { font-size: 26px; }
  header.top h1 { font-size: 21px; }
  .cards { grid-template-columns: 1fr; }
  .cards.layout-grid3 { grid-template-columns: 1fr; }
}

/* ───────── スマホ用: 接近以上の通貨ペアを画面上部に固定表示する通知バー ─────────
   スクロールしてカードを1枚ずつ確認しなくても、どのペアが接近/まもなく/チャンスかを
   一目で把握できるようにする。position: stickyなので通常のドキュメントフロー内に
   居場所を持ちつつ、スクロールしても常にビューポート最上部に留まる（要素を隠さない）。
   PC幅では既に全カードが一望できるため非表示のまま。 */
.approach-banner { display: none; }
@media (max-width: 480px) {
  .approach-banner.show {
    display: flex; flex-wrap: wrap; gap: 6px;
    position: sticky; top: 0; z-index: 95;
    padding: 8px 10px;
    background: rgba(15, 20, 32, .97);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #33415c;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
  }
  .approach-banner .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; line-height: 1.3;
    white-space: nowrap; border: 1px solid transparent;
    background: none; color: inherit; cursor: pointer;
  }
  .approach-banner .chip.approach { color: var(--approach); background: rgba(245,197,24,.16); border-color: rgba(245,197,24,.4); }
  .approach-banner .chip.soon { color: var(--soon); background: rgba(249,115,22,.18); border-color: rgba(249,115,22,.45); animation: pulseSoon 1.4s infinite; }
  .approach-banner .chip.chance { color: var(--chance); background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.45); animation: pulse 1.1s infinite; }
}