/* Карта Кёнигсберга и граф Эйлера — общие для экрана и телефона. */
.kmap, .kgraph { display: block; width: 100%; height: auto; }
.kmap .km-land { fill: var(--land); }
.kmap .km-river-edge { fill: none; stroke: var(--water-edge); stroke-width: 76; stroke-linecap: round; }
.kmap .km-river { fill: none; stroke: var(--water); stroke-width: 64; stroke-linecap: round; }
.kmap .km-label { font-size: 30px; font-weight: 800; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--land); stroke-width: 8px; }
.kmap .km-pos { fill: none; stroke: none; }
.kmap .km-deck { fill: var(--bridge); }
.kmap .km-rail { stroke: var(--ink); stroke-width: 4; opacity: .55; }
.kmap .km-hit { fill: transparent; }
.kmap .km-lost { display: none; }
.kmap .km-lost line { stroke: var(--bad); stroke-width: 9; stroke-linecap: round; }
.kmap .km-bridge { transition: opacity .6s; }
.kmap .km-bridge.is-lost .km-deck { opacity: .25; }
.kmap .km-bridge.is-lost .km-rail { opacity: .15; }
.kmap .km-bridge.is-lost .km-lost { display: block; }
.kmap .km-num circle { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.kmap .km-num text { font-size: 24px; font-weight: 800; text-anchor: middle; fill: #101317; }
.kmap .km-bridge.is-walked .km-deck, .kmap .km-bridge.is-used .km-deck { fill: var(--accent); }
.kmap .km-ord { display: none; }
.kmap .km-bridge.has-order .km-ord { display: block; }
.kmap .km-ord circle { fill: var(--accent); stroke: var(--paper); stroke-width: 4; }
.kmap .km-ord text { font-size: 30px; font-weight: 800; text-anchor: middle; fill: var(--accent-ink); }
.kmap .km-bridge.is-avail .km-deck { fill: var(--accent2); animation: km-pulse 1.2s ease-in-out infinite; }
.kmap .km-bridge.is-shake .km-deck { fill: var(--bad); }
.kmap .km-landmark.is-here .km-pos { fill: var(--accent); fill-opacity: .25; stroke: var(--accent); stroke-width: 6; r: 44; animation: km-pulse 1.2s ease-in-out infinite; }
@keyframes km-pulse { 50% { opacity: .55; } }

.kgraph .kg-edge { fill: none; stroke: var(--accent2); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.kgraph.is-on .kg-edge { animation: kg-draw .7s ease-out forwards; animation-delay: calc(var(--i) * .18s + .3s); }
.kgraph .kg-dot { fill: var(--ink); }
.kgraph .kg-badge { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.kgraph .kg-node.is-odd .kg-badge { fill: var(--bad-soft); stroke: var(--bad); }
.kgraph .kg-node.is-even .kg-badge { fill: var(--good-soft); stroke: var(--good); }
.kgraph .kg-deg { font-size: 44px; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.kgraph .kg-node { opacity: 0; }
.kgraph.is-on .kg-node { animation: kg-fade .5s ease-out 1.6s forwards; }
@keyframes kg-draw { to { stroke-dashoffset: 0; } }
@keyframes kg-fade { to { opacity: 1; } }