/* 攻略ノートの FINAL PREP まわり（出し先タグ・設定画面・YOUR MAIN・ルール一覧） */

/* 背景：トップ以外の画面と同じ、荒いブラシの模様（紺を25%残したグレー寄り） */
body { background: radial-gradient(circle at 85% 0, rgba(55,219,239,.08), transparent 32rem), url("../vfprep_bg_dark_brush_rough.png?v=1") center / cover no-repeat fixed, var(--bg); }
/* ノートのカードはほんの少しだけ透かして、背景の模様をのぞかせる */
.note-card { background: rgba(14, 20, 23, .86); }
:root { --fp-self: #37dbef; --fp-opp: #c4f25a; --fp-warn: #f6b73c; --fp-dim: #5f6c72; }

/* ノートの行：左に出し先タグ（＋戦績）、右に日付 */
/* 顔アイコンが入ると高さが変わるので、日付などは中央でそろえる */
.note-meta { align-items: center; }
.note-meta-lead { display: flex; min-width: 0; align-items: center; gap: 8px; flex-wrap: wrap; }
a.note-result { font: 800 10px/1 ui-monospace, monospace; letter-spacing: .06em; }
.note-result.is-win { color: var(--fp-self); }
.note-result.is-loss { color: #ff7a8a; }

/* 出し先タグ */
.fp-chip { display: inline-flex; height: 32px; align-items: center; gap: 6px; margin-left: -4px; padding: 0 6px 0 4px; border: none; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; font-size: 12px; font-weight: 800; }
.fp-chip:hover { background: rgba(255,255,255,.06); filter: none; box-shadow: none; }
.fp-face { width: 26px; height: 26px; object-fit: cover; object-position: top; }
.fp-face.is-self { box-shadow: 0 0 0 1px var(--fp-self); }
.fp-face.is-opp { box-shadow: 0 0 0 1px var(--fp-opp); }
.fp-vs { font: 700 10px/1 ui-monospace, monospace; color: var(--fp-dim); }
.fp-all { color: var(--muted); font-weight: 700; }
.fp-any { padding-left: 2px; color: var(--fp-self); }
.fp-auto { margin-left: 2px; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .06em; color: var(--fp-dim); }
.fp-chip.is-unset { color: var(--fp-dim); font-weight: 700; }
.fp-chip.is-unset:hover { color: var(--muted); }
.fp-suggest { display: inline-flex; align-items: center; gap: 2px; }
.fp-chip.is-suggest { opacity: .5; }
.fp-chip.is-suggest .fp-face { filter: grayscale(.6); }
.fp-suggest:hover .fp-chip.is-suggest { opacity: .85; }
.fp-q { margin-left: 2px; font: 800 11px/1 ui-monospace, monospace; color: var(--muted); }
.fp-accept { width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--fp-dim); cursor: pointer; font-size: 14px; font-weight: 900; }
.fp-accept:hover { color: var(--fp-opp); background: rgba(196,242,90,.1); box-shadow: none; }

/* 設定画面・メインキャラ・ルール一覧 */
.fp-sheet { width: min(560px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 0; overflow-y: auto; border: 1px solid var(--line-bright); background: #0d1316; color: var(--text); }
.fp-sheet::backdrop { background: rgba(0,4,6,.78); }
.fp-sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fp-sheet-head h2 { flex: 1; margin: 0; font-size: 15px; }
.fp-x { width: 34px; height: 34px; border: 1px solid var(--line-bright); background: transparent; color: var(--text); cursor: pointer; }
.fp-preview { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); color: #dfe8eb; font-size: 14px; font-weight: 700; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.fp-preview[hidden] { display: none; }
.fp-pick { --c: var(--fp-self); padding: 12px 16px 4px; }
.fp-pick.is-opp { --c: var(--fp-opp); }
.fp-pick.is-which { --c: var(--fp-warn); }
.fp-pick h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--muted); font: 800 11px/1 ui-monospace, monospace; letter-spacing: .12em; }
.fp-pick h3::before { content: ""; width: 8px; height: 8px; background: var(--c); }
.fp-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-face-btn { width: 64px; padding: 0 0 5px; overflow: hidden; border: 1px solid var(--line); background: #131b1f; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.fp-face-btn .fp-face { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 4px; box-shadow: none; }
.fp-face-btn:hover { border-color: var(--line-bright); color: var(--text); box-shadow: none; }
.fp-face-btn[aria-pressed="true"] { border-color: var(--c); color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.fp-face-btn.is-none { display: grid; min-height: 87px; place-items: center; align-content: center; gap: 4px; padding: 6px; font-size: 11px; line-height: 1.3; }
.fp-face-btn.is-none b { color: var(--fp-dim); font-size: 18px; }
.fp-face-btn.is-big { width: 110px; font-size: 13px; }
.fp-more { min-height: 87px; padding: 0 12px; border: 1px dashed var(--line-bright); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.fp-grid { display: none; margin-top: 8px; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.fp-grid.is-open { display: grid; }
.fp-grid .fp-face-btn { width: auto; font-size: 9px; }
.fp-or { margin: 0; padding: 6px 16px 0; color: var(--fp-dim); font: 700 10px/1 ui-monospace, monospace; letter-spacing: .1em; }
.fp-sheet-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.fp-hint { flex: 1; color: var(--fp-dim); font-size: 11px; }
.fp-ghost { height: 36px; padding: 0 12px; border: 1px solid var(--line-bright); background: transparent; color: var(--text); cursor: pointer; font-size: 12px; font-weight: 800; }
.fp-ghost[hidden] { display: none; }
.fp-primary { height: 36px; padding: 0 16px; border: 1px solid var(--cyan); background: var(--cyan); color: #071116; cursor: pointer; font-size: 13px; font-weight: 900; }
.fp-primary:disabled { opacity: .4; cursor: default; }

/* YOUR MAIN（絞り込みの並び） */
.fp-main-btn { display: inline-flex; width: 100%; height: var(--note-tool-block); align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-bright); background: transparent; color: var(--text); cursor: pointer; font-size: var(--note-tool-font); font-weight: 800; }
.fp-main-btn .fp-face { width: 28px; height: 28px; }
.fp-main-off { display: grid; width: 28px; height: 28px; place-items: center; color: var(--muted); font: 800 9px/1 ui-monospace, monospace; box-shadow: 0 0 0 1px var(--line-bright); }
.fp-main-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 新規ノートの出し先 */
.fp-new { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fp-new-label { color: var(--cyan); font: 800 10px/1 ui-monospace, monospace; letter-spacing: .12em; }
.fp-new .fp-chip { margin-left: 0; }

/* ワンドの隣の i */
/* ルール一覧の i：大事なので目立たせる（シアンの塗り＋ゆっくり光る） */
.fp-rules-btn { position: relative; width: var(--note-tool-block); height: var(--note-tool-block); flex: 0 0 var(--note-tool-block); padding: 0; border: none; cursor: pointer;
  background: var(--fp-self); color: #071116; font: italic 900 22px/1 Georgia, serif;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); animation: fp-rules-glow 2.6s ease-in-out infinite; }
.fp-rules-btn:hover { filter: brightness(1.12); box-shadow: none; }
.fp-rules-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes fp-rules-glow { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(55,219,239,0)); } 50% { filter: brightness(1.18) drop-shadow(0 0 10px rgba(55,219,239,.55)); } }
@media (prefers-reduced-motion: reduce) { .fp-rules-btn { animation: none; } }

/* ワード検索は短めに（広い画面で横に伸びすぎない） */
.note-search-actions .search-field { flex: 0 1 300px; }
.fp-rules { width: min(680px, calc(100vw - 20px)); }
.fp-rules-body { display: grid; gap: 12px; padding: 14px 16px 18px; }
.fp-lead { margin: 0; color: #c7d1d5; font-size: 13px; line-height: 1.7; }
.fp-rule { padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.fp-rule > header { display: flex; align-items: center; gap: 10px; }
.fp-rule h3 { margin: 0; font-size: 17px; }
.fp-rule-lead { margin: 6px 0 12px; color: #dfe8eb; font-size: 14px; line-height: 1.6; }
.fp-rule-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.fp-rules .sw { width: 10px; height: 10px; border-radius: 2px; background: #fff; }
.fp-rules .sw.self { background: var(--fp-self); } .fp-rules .sw.opp { background: var(--fp-opp); } .fp-rules .sw.q { background: var(--fp-warn); } .fp-rules .sw.ring { background: #86d8e5; }
/* 例文 → 読み取り結果 */
.fp-rule-table { display: grid; border-top: 1px solid var(--line); }
.fp-rule-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fp-rule-in { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.fp-rule-arrow { color: var(--muted); text-align: center; font-size: 14px; }
.fp-rule-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #c7d1d5; font-size: 13px; font-weight: 700; }
.fp-rule-row.is-no .fp-rule-in { color: var(--muted); font-weight: 600; text-decoration: line-through rgba(255,122,138,.55); }
.fp-rule-row.is-no .fp-rule-arrow { color: #ff7a8a; }
.fp-no { color: var(--muted); font-weight: 600; }
.fp-who { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border: 1px solid var(--line-bright); font-size: 13px; }
.fp-who img { width: 22px; height: 22px; object-fit: cover; object-position: top; }
.fp-who.is-self { border-color: var(--fp-self); color: var(--fp-self); }
.fp-who.is-opp { border-color: var(--fp-opp); color: var(--fp-opp); }
@media (max-width: 520px) {
  .fp-rule-row { grid-template-columns: 1fr; gap: 4px; }
  .fp-rule-arrow { display: none; }
  .fp-rule-out::before { content: "→"; color: var(--muted); }
  .fp-rule-row.is-no .fp-rule-out::before { content: "×"; color: #ff7a8a; }
}
/* キャラ名の一覧（折りたたみ） */
.fp-alias-box summary { cursor: pointer; font-size: 15px; font-weight: 800; }
.fp-alias { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 10px; }
.fp-alias div { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.fp-alias img { width: 30px; height: 30px; object-fit: cover; object-position: top; }
.fp-alias b { display: block; color: var(--text); font-size: 12px; }

/* スマホ幅のメニュー：☰ メニュー のバーと、開くと出る1枚のパネル */
.fp-menu { display: none; }
@media (max-width: 759px) {
  .note-tools > .fp-menu, .fp-menu { grid-column: 1 / -1; display: block; flex: 0 0 100%; width: 100%; }
  .fp-menu-toggle, .note-toolbar .fp-menu-toggle { display: flex; width: 100%; height: 44px; min-height: 44px; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line-bright); background: #11181c; color: var(--text); cursor: pointer; text-align: left; font-size: 14px; }
  .fp-menu-toggle:hover { border-color: var(--cyan); box-shadow: none; filter: none; }
  .fp-menu-icon { display: grid; width: 20px; height: 20px; place-items: center; color: var(--text); }
  .fp-menu-icon svg { width: 20px; height: 20px; }
  .fp-menu-label { flex: 0 0 auto; font: 800 13px/1 ui-monospace, monospace; letter-spacing: .14em; }
  .fp-menu-summary { flex: 1; min-width: 0; overflow: hidden; padding: 4px 8px; border: 1px solid rgba(55,219,239,.45); background: rgba(55,219,239,.1); color: var(--cyan); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .fp-menu-summary[hidden] { display: block; visibility: hidden; border: none; background: none; }
  .fp-menu-caret { flex: 0 0 auto; margin-left: auto; color: var(--muted); transition: transform .15s; }
  .fp-menu-toggle.has-filter .fp-menu-icon { color: var(--cyan); }
  .fp-menu-open .fp-menu-toggle { border-color: var(--cyan); background: #0f1d22; }
  .fp-menu-open .fp-menu-caret { transform: rotate(180deg); color: var(--cyan); }
  /* パネル：バーとつながった1枚の箱。見出しで3つに分ける */
  .fp-menu-panel { display: grid; gap: 0; border: 1px solid var(--cyan); border-top: none; background: #0b1215; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
  .fp-menu-panel[hidden] { display: none; }
  .fp-menu-section { padding: 12px; border-top: 1px solid var(--line); }
  .fp-menu-section:first-child { border-top: none; }
  .fp-menu-heading { margin: 0 0 10px; color: var(--cyan); font: 800 10px/1 ui-monospace, monospace; letter-spacing: .14em; }
  .fp-menu-slot.is-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fp-menu-slot.is-view #note-filters { display: contents; }
  .fp-menu-slot.is-view .note-tool-field, .fp-menu-slot.is-view .note-sort-field { width: auto; min-width: 0; }
  .fp-menu-slot.is-finalprep, .fp-menu-slot.is-final-prep { display: block; }
  .fp-menu-slot .fp-main-field { width: 100%; }
  .fp-menu-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fp-menu-row > :is(button, a) { width: 100%; min-height: 44px; margin: 0; }
  .fp-menu-slot.is-data .note-storage { margin-top: 10px; }
  /* 同期の詳しい状態は普段は隠し、再試行・再連携が必要なときだけ出す */
  #strategy-notes-sync-status { display: none !important; }
  #strategy-notes-sync-status:has([data-sync-action]:not([hidden])) { display: flex !important; }
  .note-toolbar { margin-top: 14px; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .fp-menu-caret { transition: none; } }