/* Illustrated tactical surface. The existing calculations and hit targets are retained. */
.sy-grid{grid-template-columns:200px minmax(0,1fr) 280px;gap:16px}
#sy-map-content{padding:0 12px}
.sy-map.sy-map-illustrated{--map-accent:#58c5ff;--map-edge:#2589cf;--map-tint:rgba(22,121,200,.23);aspect-ratio:3/2;min-height:530px;background:#071421;border:1px solid #213c4b;border-radius:14px;box-shadow:inset 0 0 0 1px #ffffff0a,0 8px 24px #0e233518;overflow:hidden}
.sy-map.sy-map-red{--map-accent:#ff9298;--map-edge:#d96272;--map-tint:rgba(177,45,64,.22)}
.sy-rift-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none}
.sy-map-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#06132226 0%,#06132205 40%,#06132236 100%);box-shadow:inset 0 0 65px #04111c88}
.sy-map-caption{position:absolute;right:16px;top:14px;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:#e4f0f5;font-size:12px;letter-spacing:1.6px;font-weight:700;text-shadow:0 2px 6px #000}
.sy-map-caption span{font-size:12px;letter-spacing:0;font-weight:400;color:#c1d0d5}
.sy-map-illustrated .sy-network{z-index:1}
.sy-map-illustrated .sy-edge-line{stroke:#d7e6eb;opacity:.88;filter:drop-shadow(0 0 3px #d7e6eb66)}
.sy-map-illustrated .sy-edge.positive .sy-edge-line{stroke:#9cf367;filter:drop-shadow(0 0 4px #7fff47aa)}
.sy-map-illustrated .sy-edge.negative .sy-edge-line{stroke:#ff697e;filter:drop-shadow(0 0 4px #ff406799)}
.sy-map-illustrated .sy-edge.insufficient .sy-edge-line,.sy-map-illustrated .sy-edge.unknown .sy-edge-line{stroke:#d7e4e9;opacity:.55;filter:none}
.sy-map-illustrated .sy-edge:hover .sy-edge-line,.sy-map-illustrated .sy-edge:focus-visible .sy-edge-line,.sy-map-illustrated .sy-edge.is-selected .sy-edge-line{opacity:1;filter:drop-shadow(0 0 6px #ffffffbb)}
.sy-map-illustrated .sy-edge:focus-visible .sy-edge-hit{stroke:#ffffff36}
.sy-map-illustrated .sy-slot{width:clamp(128px,23%,164px);border:1px solid var(--map-edge);border-radius:9px;background:linear-gradient(145deg,#07182ff5,#07101af7);box-shadow:0 0 0 2px #020b1d80,0 0 14px var(--map-tint),0 6px 15px #00000066;transition:box-shadow .15s,border-color .15s;backdrop-filter:blur(8px)}
.sy-map-illustrated .sy-slot:hover{border-color:var(--map-accent);box-shadow:0 0 0 1px var(--map-accent),0 0 18px var(--map-tint),0 6px 18px #0009}
.sy-map-illustrated .sy-slot.is-picked{outline:2px solid #ffda84;outline-offset:3px}
.sy-map-illustrated .sy-slot.is-empty{border-style:dashed;background:#071827df}
.sy-map-illustrated .sy-slot-main{display:grid;grid-template-columns:32px minmax(0,1fr);gap:7px;align-items:center;padding:9px 10px 0;min-height:0;color:#eff7ff;border-radius:8px;overflow:hidden}
.sy-map-illustrated .sy-slot-main:focus-visible{outline:2px solid #ffda84;outline-offset:3px}
.sy-map-illustrated .sy-slot-avatar{display:grid;place-items:center;width:32px;height:38px;font-size:20px;font-weight:650;line-height:1;background:linear-gradient(145deg,var(--map-tint),#34495644);border:1px solid #a3bdd12e;border-radius:6px;color:var(--map-accent)}
.sy-map-illustrated .sy-slot-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.sy-map-illustrated .sy-slot-role{font-size:12px;line-height:1.1;letter-spacing:.7px;color:var(--map-accent);font-weight:750}
.sy-map-illustrated .sy-slot-copy b{font-size:15px;line-height:1.2;font-weight:650;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#f7fbff}
.sy-map-illustrated .sy-slot-elo{font-size:12px;line-height:1.2;color:#b0c3d2;font-variant-numeric:tabular-nums}
.sy-map-illustrated .sy-slot-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:5px;margin:0 -10px;padding:5px 9px;border-top:1px solid #88b4d126;background:#030c1870;font-size:12px;line-height:1.2;color:#bed2dd}
.sy-map-illustrated .sy-slot-foot>span{font-size:12px;color:#b4c6d2}
.sy-map-illustrated .sy-slot-foot.main{color:#94dbc5}.sy-map-illustrated .sy-slot-foot.sub{color:#cdb5f1}.sy-map-illustrated .sy-slot-foot.challenge{color:#f0bf93}
.sy-map-illustrated .sy-slot.is-empty .sy-slot-main{padding-bottom:10px}
.sy-map-illustrated .sy-remove{top:-14px;right:-14px;width:32px;height:32px;border:1px solid #6b889b;border-radius:50%;background:#102235;color:#c7dce9;box-shadow:0 2px 8px #0008;font-size:19px;z-index:3}
.sy-map-illustrated .sy-remove:hover{background:#344357;color:#fff}
.sy-map-illustrated .sy-tooltip{color:#253149;box-shadow:0 10px 36px #0008;top:48px;right:12px;border-color:#d5e2e9}
.sy-legend{font-size:12px;gap:8px 12px;line-height:1.5}.sy-legend .positive{color:#337f55}.sy-legend .negative{color:#bd4961}
@media(max-width:1439px){.sy-grid{grid-template-columns:210px minmax(0,1fr)}.sy-analysis{grid-column:1/-1;max-height:none}.sy-analysis #sy-analysis-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.sy-analysis .sy-layer{grid-column:1/-1}}
@media(max-width:900px){.sy-grid{grid-template-columns:180px minmax(0,1fr)}.sy-map.sy-map-illustrated{min-height:590px}.sy-map-illustrated .sy-slot{width:128px}.sy-map-illustrated .sy-slot-main{grid-template-columns:24px minmax(0,1fr);gap:5px;padding:8px 8px 0}.sy-map-illustrated .sy-slot-avatar{width:24px;height:32px;font-size:17px}.sy-map-illustrated .sy-slot-copy b{font-size:14px}.sy-map-illustrated .sy-slot-foot{margin:0 -8px;padding:5px 7px}.sy-map-caption{right:10px;top:10px}}
@media(max-width:650px){.sy-grid{display:flex;flex-direction:column}.sy-analysis #sy-analysis-content{display:block}.sy-map.sy-map-illustrated{min-height:620px;aspect-ratio:auto}.sy-map-illustrated .sy-rift-art{object-position:48% center}.sy-map-illustrated .sy-remove{width:36px;height:36px;right:-13px;top:-15px}.sy-map-illustrated .sy-slot{width:128px}.sy-map-caption{font-size:12px;letter-spacing:.6px}.sy-map-caption span{display:none}.sy-map-illustrated .sy-tooltip{max-width:calc(100% - 24px)}.sy-legend{gap:7px 10px}}
@media(prefers-reduced-motion:reduce){.sy-map-illustrated .sy-slot{transition:none}}
/* Pan the tactical canvas rather than cropping or distorting the reference map. */
.sy-map-viewport{width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;border-radius:14px;scrollbar-color:#637f96 #142536;scrollbar-width:thin}
.sy-map-viewport:focus-visible{outline:3px solid #9986cd;outline-offset:3px}
.sy-map-viewport .sy-map-illustrated{min-width:720px;min-height:0;aspect-ratio:3/2}
.sy-map-viewport .sy-rift-art{object-fit:cover;object-position:center}
.sy-map-viewport .sy-slot{width:clamp(128px,18%,164px)}
.sy-map-illustrated .sy-edge path{fill:none}
.sy-map-viewport .sy-map-caption span{display:block}
.sy-map-viewport .sy-tooltip{left:18px;right:auto}
.sy-map-pan-hint{font-size:12px;color:#808ba0;line-height:1.6;margin:10px 0 0}
@media(min-width:1800px){.sy-map-pan-hint{display:none}}