/* =====================================================================
   学年共通ワールドマップの見た目
   ===================================================================== */
:root{--bg:#0d1517;--panel:#162427;--panel2:#1c2d31;--line:#283c41;--fg:#e2ebe7;--muted:#8ea2a1;--acid:#e5c650;--roleA:#5a92e3;--roleB:#e5c650;
  --f-title:'Dela Gothic One','Hiragino Kaku Gothic StdN','Yu Gothic',sans-serif;--f-ui:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 var(--f-ui)}
button,input,select,textarea{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,g[data-ep]:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
#fam{max-width:1120px;margin:0 auto;padding:12px 12px 40px}
.fam-loading{padding:40px 0;text-align:center;color:var(--muted)}
.fam-err{max-width:620px;margin:40px auto;padding:22px;border:1px solid #6b3a3a;border-radius:14px;background:#1a1416}
.fam-err h1{margin:0 0 8px;font-size:20px;color:#ff8a7a}.fam-err a{color:var(--acid)}
/* 見出し */
.fam-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:4px 2px 10px}
.fam-ttl small{display:block;font-size:12px;letter-spacing:.2em;color:var(--muted)}
.fam-ttl h1{margin:0;font:400 clamp(22px,5vw,30px)/1.25 var(--f-title);letter-spacing:.04em}
.fam-prog{display:flex;gap:8px}
.fam-prog span{padding:5px 12px;border-radius:999px;background:var(--panel);font-size:13px;color:var(--muted)}
.fam-prog b{font-size:17px;color:var(--acid);margin-left:2px}
.fam-items{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 2px 10px;font-size:13px}
.fam-items span{color:var(--muted)}
.fam-items b{padding:3px 10px;border-radius:999px;background:var(--panel2);font-weight:700}
/* マップ */
.fam-view{position:relative}
.fam-scroll{overflow:auto;max-height:min(78vh,760px);border-radius:16px;background:#2a8fd0;box-shadow:0 0 0 1px var(--line),0 10px 26px rgba(0,0,0,.45);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fam-canvas{min-width:100%}
.fam-svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.fam-name{fill:#fff;stroke:rgba(16,34,43,.85);paint-order:stroke;stroke-linejoin:round;font-family:var(--f-ui);font-weight:700;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.fam-glow{fill:none;stroke:#ffe066;filter:drop-shadow(0 0 12px #ffe066);pointer-events:none}
.fam-route{fill:none;stroke:#ffe066;stroke-linecap:round;stroke-dasharray:2% 1.4%;filter:drop-shadow(0 0 6px rgba(255,224,102,.8));pointer-events:none}
.fam-ov{pointer-events:none}
.fam-mk{cursor:pointer;outline:none}
.fam-dot{fill:#ff8a2b;stroke:#fff;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.fam-mk.st-done .fam-dot{fill:#36b26a}
.fam-mk.st-locked .fam-dot{fill:#5f6e74}
.fam-mk.st-soon .fam-dot{fill:#8d8a6a}
.fam-pulse{fill:none;stroke:#ff8a2b;stroke-width:6}
.fam-ic{fill:#fff;font-family:var(--f-ui);font-weight:700;text-anchor:middle;pointer-events:none}
.fam-mtitle{fill:#fff;stroke:#10222b;paint-order:stroke;stroke-linejoin:round;font-family:var(--f-ui);font-weight:700;text-anchor:middle;pointer-events:none}
.fam-mk:hover .fam-dot,.fam-mk:focus .fam-dot{stroke:var(--acid)}
.fam-zoom{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.fam-zoom button{width:44px;height:44px;border:0;border-radius:12px;background:rgba(13,21,23,.82);color:#fff;font:700 22px/1 var(--f-ui);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer}
.fam-zoom button:disabled{opacity:.35;cursor:default}
/* エピソードの一覧 */
.fam-list{margin-top:14px}
.fam-list h2{margin:0 2px 8px;font-size:14px;letter-spacing:.16em;color:var(--muted)}
.fam-row{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:left;cursor:pointer}
.fam-row:hover{background:var(--panel2)}
.fam-badge{flex:none;min-width:84px;padding:4px 8px;border-radius:999px;background:#ff8a2b;color:#fff;font-size:12px;font-weight:700;text-align:center}
.fam-row.st-done .fam-badge{background:#36b26a}
.fam-row.st-locked .fam-badge{background:#5f6e74}
.fam-row.st-soon .fam-badge{background:#8d8a6a}
.fam-rt{display:flex;flex-direction:column;min-width:0}
.fam-rt b{font-size:16px}
.fam-rt small{color:var(--muted);font-size:12.5px}
.fam-empty{color:var(--muted)}
/* エピソードの詳しい画面 */
.fam-sheet{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6)}
.fam-card{position:relative;width:min(100%,460px);max-height:90vh;overflow:auto;padding:22px 20px 20px;border-radius:16px;background:#dfe6d6;color:#1b2622;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.fam-x{position:absolute;right:10px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.08);font-size:18px;cursor:pointer}
.fam-unit{margin:0;font-size:12px;letter-spacing:.14em;color:#5a6a66}
.fam-card h2{margin:2px 40px 6px 0;font:400 24px/1.3 var(--f-title)}
.fam-where{margin:0 0 8px;font-size:13.5px;color:#3d4c48}
.fam-sum{margin:8px 0;line-height:1.75}
.fam-done{margin:8px 0;font-weight:700;color:#227a3c}
.fam-howto{margin:12px 0 6px;font-size:13px;color:#5a6a66}
.fam-go{display:grid;gap:8px}
.fam-btn{display:flex;align-items:center;justify-content:center;height:52px;border-radius:10px;font:400 16px var(--f-title);letter-spacing:.14em;text-decoration:none;color:#fff;background:var(--roleA)}
.fam-btn.b{background:#b8961e}
/* お知らせ */
.fam-toast{position:fixed;left:50%;bottom:22px;z-index:30;max-width:min(92vw,560px);padding:12px 18px;border-radius:12px;background:#1f2a2d;color:#fff1c2;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.5);transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .35s ease}
.fam-toast.on{transform:translate(-50%,0);opacity:1}
/* 編集者だけに表示 */
.fam-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;padding:12px 14px;border:1px dashed #6b5a2a;border-radius:12px;font-size:13px;color:var(--muted)}
.fam-foot b{color:var(--acid)}
.fam-foot a{color:var(--acid)}
.fam-foot button,.fam-editor button{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);cursor:pointer}
.fam-foot details{flex-basis:100%}
.fam-foot ul{margin:4px 0 0;padding-left:1.2em;color:#e7c98a}
.fam-editor{margin-top:16px;padding:14px;border:1px solid #6b5a2a;border-radius:12px;background:#171f21}
.fam-editor h2{margin:0 0 6px;font-size:16px;color:var(--acid)}
.fam-editor ol{margin:0 0 8px;padding-left:1.4em;font-size:13px;color:var(--muted)}
.fam-e-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0;font-size:13.5px}
.fam-e-row input,.fam-e-row select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#0d1517}
.fam-editor button.pri{background:var(--acid);color:#1b2622;border-color:var(--acid);font-weight:700}
.fam-editor button:disabled{opacity:.4;cursor:default}
.fam-editor a{color:var(--acid)}
.fam-e-out{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:#0d1517;font:12px/1.5 ui-monospace,monospace}
.fam-e-island{fill:none;stroke:#7fd3ff;stroke-dasharray:12 8}
.fam-e-reg{fill:rgba(255,255,255,.07);stroke:#fff;stroke-dasharray:10 6}
.fam-e-reg.cur{stroke:#ffd23f;fill:rgba(255,210,63,.12)}
.fam-e-name{fill:#fff;stroke:#000;stroke-width:4px;paint-order:stroke;font-family:var(--f-ui);font-weight:700;text-anchor:middle}
.fam-e-draw{fill:rgba(255,59,48,.12);stroke:#ff3b30}
.fam-e-pt{fill:#ff3b30;stroke:#fff;stroke-width:2}
.fam-e-pt.first{fill:#ffd23f}
.fam-e-hit{fill:transparent;cursor:crosshair}
@media (prefers-reduced-motion:reduce){.fam-toast{transition:none}}

/* エピソードの中の進み具合（ステージ 2／3） */
.fam-mprog{fill:#ffe08a;stroke:#10222b;paint-order:stroke;stroke-linejoin:round;font-family:var(--f-ui);font-weight:700;text-anchor:middle;pointer-events:none}
.fam-rprog{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:9px;background:rgba(229,198,80,.18);color:#8a6a00;font-style:normal;font-size:11.5px;font-weight:700}
.fam-stages{list-style:none;margin:8px 0 10px;padding:0;display:grid;gap:5px}
.fam-stages li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.04);font-size:13.5px;color:var(--muted)}
.fam-stages li span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.08);font-size:12px;font-weight:700;flex:none}
.fam-stages li.ok{color:#227a3c}.fam-stages li.ok span{background:#2e9b4d;color:#fff}
.fam-stages li.now{color:inherit;font-weight:700;background:rgba(229,198,80,.2)}.fam-stages li.now span{background:#e5a800;color:#fff}
/* ★のベスト記録（Ver.1.0.0） */
.fam-st-stars{margin-left:auto;font-style:normal;color:#e0a100;letter-spacing:.06em;font-size:14px;white-space:nowrap}

/* マップのBGM（Ver.1.1.0） */
.fam-bgm{order:3;border:1px solid rgba(0,0,0,.18);background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.fam-bgm[aria-pressed="true"]{background:#2e9b4d;border-color:#2e9b4d;color:#fff}
.fam-stages li a{display:flex;align-items:center;gap:8px;flex:1;color:inherit;text-decoration:none}
