/* 地図エンジン NetMap の周り：路線カルテ・会社の長さ・見た目の切り替え */
.karte { border: 1px solid var(--line-2); border-left: 6px solid var(--kc); border-radius: 4px; padding: 8px 10px; background: var(--paper); }
.karte .k-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.karte .k-head b { font-size: 17px; letter-spacing: .06em; }
.karte .k-head small { color: var(--ink-3); font-size: 11px; }
.karte .k-tag { font-size: 10px; background: var(--ink); color: var(--paper); padding: 0 6px; border-radius: 2px; letter-spacing: .1em; }
.karte .k-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 6px 0; }
.karte .k-dl dt { font-size: 10px; color: var(--ink-3); letter-spacing: .08em; }
.karte .k-dl dd { margin: 0; font-family: var(--mono); font-size: 13px; }
.karte .k-spark { width: 100%; height: auto; display: block; background: var(--paper-2); border-radius: 3px; }
.karte .k-ax { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); font-family: var(--mono); }
.karte .k-fate { font-size: 12px; margin-top: 4px; }
.karte .k-note { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.k-empty { font-size: 12px; color: var(--ink-3); margin: 0; }
.rank { display: flex; flex-direction: column; gap: 3px; }
.rk { display: grid; grid-template-columns: 118px 1fr 58px; gap: 6px; align-items: center; font-size: 12px; }
.rk-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-b { height: 8px; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.rk-b b { display: block; height: 100%; border-radius: 2px; }
.rk-k { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--ink-2); }
/* 夜景のときは地図の上のボタンも暗く */
body[data-look="night"] .map-mode .seg-btns, body[data-look="night"] .map-mode .chk, body[data-look="night"] .map-ctl button, body[data-look="night"] .legend { background: rgba(14, 20, 30, .88); color: #dfe6ee; border-color: #2e3a4a; }
body[data-look="night"] .map-mode .seg-btns button.on { background: #dfe6ee; color: #0b1119; }
body[data-look="night"] .map-mode .seg-btns button { border-color: #2e3a4a; }
body[data-look="night"] .legend div[style*="ink-3"] { color: #8a97a8 !important; }
body[data-look="night"] .jtip .card { background: #0f1620; color: #e8eef6; border-color: #3d5a80; }
body[data-look="chikei"] .mapwrap canvas { filter: saturate(.85); }
.map-mode { max-width: min(560px, calc(100% - 70px)); }
.map-mode .seg-btns button { padding: 5px 9px; }
/* テーマ編 */
.themepage { --tc: #ffab1a; }
.theme-lead { font-size: 12.5px; margin: 0 0 8px; color: var(--ink-2); border-left: 4px solid var(--tc); padding-left: 8px; }
.themepage .board { grid-template-columns: auto 1fr; }
.rk-go { cursor: pointer; border-radius: 3px; }
.rk-go:hover { background: var(--paper-2); }
/* 比べる画面 */
.cmp-bar { position: absolute; top: 0; bottom: 0; width: 0; z-index: 6; pointer-events: none; }
.cmp-line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #ffab1a; box-shadow: 0 0 10px rgba(255, 171, 26, .8); }
.cmp-knob { position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 3px solid #ffab1a; background: #0b1119; color: #ffab1a; font-size: 18px; font-weight: 700; cursor: ew-resize; pointer-events: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); touch-action: none; }
.cmp-l, .cmp-r { position: absolute; top: 56px; white-space: nowrap; background: #0b1119; color: #ffab1a; font-family: var(--mono); font-weight: 700; font-size: 14px; padding: 3px 8px; border: 1px solid #ffab1a; border-radius: 3px; pointer-events: auto; }
.cmp-l { right: 10px; }
.cmp-r { left: 10px; display: inline-flex; align-items: center; gap: 2px; }
.cmp-r input { width: 60px; background: transparent; border: 0; color: #ffab1a; font: inherit; text-align: right; color-scheme: dark; }
.map-ctl .cmp-btn.on { background: #ffab1a; color: #111; border-color: #ffab1a; }