/* Map v6: a single, scoped visual language loaded after the legacy stylesheet. */
body[data-route="map"] .map-v3-canvas{overflow:hidden}
body[data-route="map"] .map-v3-center-controls label{min-height:36px;cursor:pointer}
body[data-route="map"] .map-v3-center-controls input{width:16px;height:16px;accent-color:#2563eb}

/* Route lines stop before camps, keeping every arrowhead visible. */
body[data-route="map"] .map-v3-route-lines{z-index:4!important;opacity:.9;filter:drop-shadow(0 1px 2px rgba(0,0,0,.92))}
body[data-route="map"] .map-v3-route-lines .main-route-lines line{stroke-width:.62}

/* Camp art is always circular. Contest severity is a ring, never punctuation or dashes. */
body[data-route="map"] .map-v3-monster-layer{z-index:5}
body[data-route="map"] .map-v3-monster>b{display:grid;width:34px;height:34px;place-items:center;border-radius:50%!important;background:rgba(4,13,18,.78);overflow:hidden}
body[data-route="map"] .map-v3-monster img,
body[data-route="map"] .map-v3-monster .inline-icon{width:32px!important;height:32px!important;--inline-icon-size:32px!important;border-radius:50%!important;object-fit:cover;filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))}
body[data-route="map"] .map-v3-monster.owner-blue>b{box-shadow:0 0 0 2px #27adff,0 0 7px rgba(39,173,255,.8)}
body[data-route="map"] .map-v3-monster.owner-red>b{box-shadow:0 0 0 2px #ff5064,0 0 7px rgba(255,80,100,.8)}
body[data-route="map"] .map-v3-monster.owner-tie>b,
body[data-route="map"] .map-v3-monster.warning>b{box-shadow:0 0 0 3px #f5b82e,0 0 10px rgba(245,184,46,.9)}
body[data-route="map"] .map-v3-monster.danger>b{box-shadow:0 0 0 3px #ef4057,0 0 12px rgba(239,64,87,.95)}
body[data-route="map"] .map-v3-monster>em{display:none!important}

/* Prevent any pseudo-element dashes on monsters or map tokens */
body[data-route="map"] .route-map span::after,
body[data-route="map"] .route-map span::before,
body[data-route="map"] .map-v3-canvas span::after,
body[data-route="map"] .map-v3-canvas span::before,
body[data-route="map"] .map-v3-monster::after,
body[data-route="map"] .map-v3-monster::before,
body[data-route="map"] .map-monster-node::after,
body[data-route="map"] .map-monster-node::before{content:none!important;display:none!important}

/* Route order is one small circular badge at each camp corner. */
body[data-route="map"] .map-v3-route-number-layer{z-index:7}
body[data-route="map"] .map-v3-route-number{display:grid;width:16px;height:16px;place-items:center;border:1px solid #fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.72)}
body[data-route="map"] .map-v3-route-number>b{width:100%!important;height:100%!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:7px;line-height:1}

body[data-route="map"] .map-v3-route-strip .map-v3-step-gank{display:grid;min-width:34px;height:27px;place-items:center;border-radius:999px;background:#17384d;color:#fff;font-size:7px;line-height:1}

/* Lane: Blue champions | centered push signal | Red champions without token overlap. */
body[data-route="map"] .map-v3-lanes{z-index:9}
body[data-route="map"] .map-v3-lane{display:inline-flex;width:max-content;align-items:center;justify-content:center;gap:6px;transform:translate(-50%,-50%);border-radius:999px;outline:2px solid transparent;outline-offset:3px;cursor:help;white-space:nowrap;pointer-events:auto;transition:outline-color .18s ease,filter .18s ease}
body[data-route="map"] .map-v3-lane-team{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
body[data-route="map"] .map-v3-lane-team.blue{justify-content:flex-end}
body[data-route="map"] .map-v3-lane-team.red{justify-content:flex-start}
body[data-route="map"] .map-v3-lane-team .map-champion-token{position:static!important;flex:0 0 32px;width:32px!important;height:32px!important;margin:0!important;transform:none!important}
body[data-route="map"] .map-v3-lane-team .map-champion-token+.map-champion-token{margin-left:0!important}
body[data-route="map"] .map-v3-lane-team .portrait{width:32px!important;height:32px!important;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.75)!important}
body[data-route="map"] .map-v3-lane-signals{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
body[data-route="map"] .map-v3-lane-edge{display:inline-flex;align-items:center;justify-content:center;width:30px;min-width:30px;height:28px;min-height:28px;border:1px solid rgba(255,255,255,.78);border-radius:999px;background:rgba(5,18,25,.92);padding:2px;box-shadow:0 3px 8px rgba(0,0,0,.72);flex-shrink:0}
body[data-route="map"] .map-v3-lane-edge small{display:none}
body[data-route="map"] .map-v3-lane-edge b{display:grid;place-items:center;line-height:0}
body[data-route="map"] .map-v3-direction-icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
body[data-route="map"] .map-v3-direction-icon circle{fill:currentColor;stroke:none}
body[data-route="map"] .direction-blue{color:#4bc2ff}
body[data-route="map"] .direction-red{color:#ff6679}
body[data-route="map"] .direction-tie{color:#f5d66f}
body[data-route="map"] .map-v3-lane-risk{position:absolute;right:-5px;top:-5px;z-index:2;display:grid;width:11px;height:11px;place-items:center;border:2px solid #fff;border-radius:50%;background:#d69b18;box-shadow:0 2px 6px rgba(0,0,0,.72)}
body[data-route="map"] .map-v3-lane-risk.warning{background:#ed6b2f}
body[data-route="map"] .map-v3-lane-risk.critical{background:#df3048}
body[data-route="map"] .map-v3-lane:hover,
body[data-route="map"] .map-v3-lane:focus-visible{z-index:15;outline-color:#f6c84b;filter:drop-shadow(0 0 9px rgba(246,200,75,.9))}
body[data-route="map"] .map-v3-lane:focus-visible{box-shadow:0 0 0 5px rgba(11,28,39,.82)}

/* Junglers use the same circular champion token language. */
body[data-route="map"] .map-v3-jungler{z-index:10}
body[data-route="map"] .map-v3-jungler>b{display:none!important}
body[data-route="map"] .map-v3-jungler .portrait{width:32px!important;height:32px!important;border:2px solid #fff!important;border-radius:50%;box-shadow:0 2px 7px rgba(0,0,0,.8)!important}
body[data-route="map"] .map-v3-jungler.blue .portrait{border-color:#7dd3fc!important}
body[data-route="map"] .map-v3-jungler.red .portrait{border-color:#fca5a5!important}

/* Legend mirrors the map shapes without !, !! or triangle variants. */
body[data-route="map"] .map-v3-legend span{display:flex;gap:5px;align-items:center}
body[data-route="map"] .map-v3-legend span>b{display:grid;width:14px;height:14px;place-items:center;border:1px solid #fff;border-radius:50%;color:#fff;font-size:7px}
body[data-route="map"] .map-v3-legend .blue>b{background:#087fc5}
body[data-route="map"] .map-v3-legend .red>b{background:#d93248}
body[data-route="map"] .map-v3-legend span>i{display:block;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#d69b18;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
body[data-route="map"] .map-v3-legend .danger>i{background:#df3048}

/* Lane summary uses text lane badges and the same SVG direction icon. */
body[data-route="map"] .map-v3-lane-read article{grid-template-columns:38px 1fr;min-height:56px;transition:border-color .18s ease,box-shadow .18s ease}
body[data-route="map"] .map-v3-lane-read article:hover{border-left-width:4px;box-shadow:0 6px 16px rgba(23,56,77,.12)}
body[data-route="map"] .map-v3-lane-name{display:grid;width:36px;height:36px;place-items:center;border:1px solid #b8c8d2;border-radius:8px;background:#f3f7f9;color:#24465d;font-size:8px;letter-spacing:.04em}
body[data-route="map"] .map-v3-lane-read article span>b{display:flex;gap:5px;align-items:center}
body[data-route="map"] .map-v3-lane-read .map-v3-direction-icon{width:20px;height:20px;flex:0 0 20px}

/* Objective cards get one border only; the icon carries elemental color. */
body[data-route="map"] .map-v3-objective-list>article{min-height:76px;border:1px solid #cbd7de;border-top-width:1px;box-shadow:none}
body[data-route="map"] .map-v3-objective-list>article.danger{border-color:#e45a6d;background:#fffafb;box-shadow:none}
body[data-route="map"] .map-v3-objective-list>article.warning{border-color:#e0b64b;background:#fffdf7;box-shadow:none}
body[data-route="map"] .map-v3-objective-center{grid-template-columns:52px minmax(0,1fr);gap:8px}
body[data-route="map"] .map-v3-objective-center>.objective-icon-shell{width:52px;height:52px;padding:3px}
body[data-route="map"] .map-v3-objective-center .objective-img{width:46px;height:46px}
body[data-route="map"] .map-v3-objective-center small,
body[data-route="map"] .map-v3-objective-center b,
body[data-route="map"] .map-v3-objective-center em{overflow:visible;max-width:100%;text-overflow:clip;white-space:normal}
body[data-route="map"] .map-v3-objective-center b{font-size:12px;line-height:1.2}
body[data-route="map"] .map-v3-objective-center em{width:auto;line-height:1.2}

body[data-route="map"] .global-hover-layer[data-kind="map-lane"]{z-index:100!important;pointer-events:none}

@media(max-width:650px){
  body[data-route="map"] .map-v3-lane{grid-template-columns:auto 26px auto;gap:2px}
  body[data-route="map"] .map-v3-lane-signals{width:26px}
  body[data-route="map"] .map-v3-lane-edge{width:25px;min-width:25px}
  body[data-route="map"] .map-v3-objective-center{grid-template-columns:44px minmax(0,1fr);gap:6px}
  body[data-route="map"] .map-v3-objective-center>.objective-icon-shell{width:44px;height:44px}
  body[data-route="map"] .map-v3-objective-center .objective-img{width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){
  body[data-route="map"] .map-v3-lane,
  body[data-route="map"] .map-v3-lane-read article{transition:none}
}

/* ==========================================================================
   Tactical Objectives: Baron Pit vs Dragon Pit & 10 LoL Rank Tiers
   ========================================================================== */
body[data-route="map"] .map-objective-split-layout {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 20px;
  margin-top: 18px;
  align-items: start;
}

body[data-route="map"] .objective-pillar {
  border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: var(--radius, 14px);
  background: var(--surface, rgba(8, 20, 36, 0.72));
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  padding: 16px;
}

body[data-route="map"] .baron-pillar {
  border-top: 3px solid #a855f7;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.09) 0%, rgba(8, 20, 36, 0.78) 220px);
}

body[data-route="map"] .dragon-pillar {
  border-top: 3px solid #06b6d4;
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.09) 0%, rgba(8, 20, 36, 0.78) 220px);
}

body[data-route="map"] .pillar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body[data-route="map"] .pillar-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

body[data-route="map"] .void-badge {
  background: rgba(168, 85, 247, 0.22);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

body[data-route="map"] .dragon-badge {
  background: rgba(6, 182, 212, 0.22);
  color: #cffafe;
  border: 1px solid rgba(6, 182, 212, 0.5);
}

body[data-route="map"] .pillar-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
}

body[data-route="map"] .pillar-header small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

body[data-route="map"] .pillar-count {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  white-space: nowrap;
}

body[data-route="map"] .pillar-grid {
  display: grid;
  gap: 14px;
}

body[data-route="map"] .baron-grid {
  grid-template-columns: 1fr;
}

body[data-route="map"] .dragon-subgroup {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-route="map"] .dragon-subgroup:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body[data-route="map"] .subgroup-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

body[data-route="map"] .subgroup-title b {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}

body[data-route="map"] .subgroup-title small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
}

body[data-route="map"] .subgroup-count {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  white-space: nowrap;
}

body[data-route="map"] .mythic-count {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35), rgba(245, 158, 11, 0.35));
  color: #fef08a;
  border: 1px solid rgba(245, 158, 11, 0.6);
}

body[data-route="map"] .drakes-grid,
body[data-route="map"] .souls-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Standalone Mythic Elder Dragon Card */
body[data-route="map"] .elder-standalone-wrap {
  margin-top: 8px;
}

body[data-route="map"] .elder-mythic-card {
  position: relative;
  border: 2px solid transparent!important;
  background-image: linear-gradient(rgba(10, 22, 38, 0.94), rgba(10, 22, 38, 0.94)), linear-gradient(135deg, #00f2fe, #38bdf8, #f59e0b, #ec4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 28px rgba(2, 132, 199, 0.38), 0 0 35px rgba(245, 158, 11, 0.22)!important;
}

body[data-route="map"] .elder-mythic-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.32), rgba(245, 158, 11, 0.32));
  border: 1px solid rgba(245, 158, 11, 0.7);
  color: #fef08a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* LoL 10-Tier Rank Badges */
body[data-route="map"] .lol-rank-duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

body[data-route="map"] .lol-rank-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 17, 30, 0.88);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  min-height: 52px;
}

body[data-route="map"] .rank-emblem-wrap {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

body[data-route="map"] .rank-emblem-svg {
  width: 24px;
  height: 24px;
}

body[data-route="map"] .rank-info-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

body[data-route="map"] .rank-side-label {
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  color: #94a3b8;
}

body[data-route="map"] .lol-rank-badge.blue .rank-side-label { color: #38bdf8; }
body[data-route="map"] .lol-rank-badge.red .rank-side-label { color: #f87171; }

body[data-route="map"] .rank-title {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-route="map"] .rank-ease {
  font-size: 8.5px;
  font-style: normal;
  color: #cbd5e1;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-route="map"] .rank-short-tag {
  font-size: 10px;
  font-weight: 950;
  padding: 2px 5px;
  border-radius: 6px;
  flex-shrink: 0;
  align-self: center;
}

/* 10 LoL Ranks Specific Glow and Accents */
body[data-route="map"] .rank-challenger {
  border-color: rgba(245, 158, 11, 0.7);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
}
body[data-route="map"] .rank-challenger .rank-title {
  color: #fef08a;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
body[data-route="map"] .rank-challenger .rank-short-tag {
  background: linear-gradient(135deg, #fef08a, #f59e0b);
  color: #0f172a;
}

body[data-route="map"] .rank-grandmaster {
  border-color: rgba(239, 68, 68, 0.7);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}
body[data-route="map"] .rank-grandmaster .rank-title {
  color: #fca5a5;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
body[data-route="map"] .rank-grandmaster .rank-short-tag {
  background: linear-gradient(135deg, #fca5a5, #ef4444);
  color: #fff;
}

body[data-route="map"] .rank-master {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}
body[data-route="map"] .rank-master .rank-title {
  color: #e9d5ff;
}
body[data-route="map"] .rank-master .rank-short-tag {
  background: linear-gradient(135deg, #e9d5ff, #a855f7);
  color: #2e1065;
}

body[data-route="map"] .rank-diamond {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}
body[data-route="map"] .rank-diamond .rank-title {
  color: #bae6fd;
}
body[data-route="map"] .rank-diamond .rank-short-tag {
  background: linear-gradient(135deg, #e0f2fe, #38bdf8);
  color: #0c4a6e;
}

body[data-route="map"] .rank-emerald {
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}
body[data-route="map"] .rank-emerald .rank-title {
  color: #a7f3d0;
}
body[data-route="map"] .rank-emerald .rank-short-tag {
  background: linear-gradient(135deg, #d1fae5, #10b981);
  color: #064e3b;
}

body[data-route="map"] .rank-platinum {
  border-color: rgba(20, 184, 166, 0.65);
}
body[data-route="map"] .rank-platinum .rank-title {
  color: #99f6e4;
}
body[data-route="map"] .rank-platinum .rank-short-tag {
  background: linear-gradient(135deg, #ccfbf1, #14b8a6);
  color: #134e4a;
}

body[data-route="map"] .rank-gold {
  border-color: rgba(234, 179, 8, 0.65);
}
body[data-route="map"] .rank-gold .rank-title {
  color: #fde047;
}
body[data-route="map"] .rank-gold .rank-short-tag {
  background: linear-gradient(135deg, #fef08a, #eab308);
  color: #713f12;
}

body[data-route="map"] .rank-silver {
  border-color: rgba(148, 163, 184, 0.6);
}
body[data-route="map"] .rank-silver .rank-title {
  color: #f1f5f9;
}
body[data-route="map"] .rank-silver .rank-short-tag {
  background: linear-gradient(135deg, #f8fafc, #94a3b8);
  color: #1e293b;
}

body[data-route="map"] .rank-bronze {
  border-color: rgba(180, 83, 9, 0.6);
}
body[data-route="map"] .rank-bronze .rank-title {
  color: #fed7aa;
}
body[data-route="map"] .rank-bronze .rank-short-tag {
  background: linear-gradient(135deg, #fed7aa, #b45309);
  color: #451a03;
}

body[data-route="map"] .rank-iron {
  border-color: rgba(113, 113, 122, 0.5);
}
body[data-route="map"] .rank-iron .rank-title {
  color: #d4d4d8;
}
body[data-route="map"] .rank-iron .rank-short-tag {
  background: linear-gradient(135deg, #e4e4e7, #71717a);
  color: #18181b;
}

/* 4-Pillar Dragon Soul Evaluation */
body[data-route="map"] .soul-criteria-wrap {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(4, 12, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-route="map"] .soul-criteria-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

body[data-route="map"] .soul-criteria-header b {
  font-size: 11px;
  color: #f0e6d2;
  font-weight: 800;
}

body[data-route="map"] .soul-criteria-header small {
  font-size: 9px;
  color: #94a3b8;
}

body[data-route="map"] .soul-criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body[data-route="map"] .criteria-card {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-route="map"] .criteria-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 4px;
}

body[data-route="map"] .criteria-duo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-route="map"] .criteria-duo>span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 9px;
}

body[data-route="map"] .criteria-duo>span.blue small { color: #38bdf8; }
body[data-route="map"] .criteria-duo>span.red small { color: #f87171; }

body[data-route="map"] .criteria-duo small {
  font-weight: 850;
  text-transform: uppercase;
  flex-shrink: 0;
}

body[data-route="map"] .criteria-duo b {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

body[data-route="map"] .criteria-duo em {
  font-size: 8.5px;
  font-style: normal;
  color: #cbd5e1;
  flex: 1;
  line-height: 1.25;
}

body[data-route="map"] .soul-formula-sum-bar {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9.5px;
  line-height: 1.35;
}

body[data-route="map"] .soul-formula-sum-bar span.blue {
  color: #93c5fd;
}

body[data-route="map"] .soul-formula-sum-bar span.red {
  color: #fca5a5;
}

body[data-route="map"] .soul-formula-sum-bar strong {
  color: #fef08a;
  font-weight: 900;
  font-size: 11px;
}

body[data-route="map"] .soul-formula-sum-bar em {
  font-style: normal;
  font-weight: 700;
}

@media(max-width: 1024px){
  body[data-route="map"] .map-objective-split-layout {
    grid-template-columns: 1fr;
  }
  body[data-route="map"] .baron-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media(max-width: 600px){
  body[data-route="map"] .soul-criteria-grid {
    grid-template-columns: 1fr;
  }
  body[data-route="map"] .lol-rank-duel {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ValoPlant LoL Combat Whiteboard & Tactical Sandbox
   ========================================================================== */

/* Dual Tab Switcher */
.tf-tab-switcher {
  display: flex;
  gap: 10px;
  background: #09131a;
  border: 1px solid #1e3542;
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 12px;
}

.tf-tab-switcher button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #9cb0ba;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.tf-tab-switcher button:hover {
  background: #11232d;
  color: #edf4f6;
}

.tf-tab-switcher button.active {
  background: #152b38;
  border-color: #36b9ff;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(54, 185, 255, 0.2);
}

.tf-tab-switcher button .tab-icon {
  font-size: 22px;
}

.tf-tab-switcher button b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tf-tab-switcher button small {
  display: block;
  font-size: 10px;
  color: #7b94a1;
  margin-top: 2px;
}

.tf-tab-switcher button.active small {
  color: #a5d8f6;
}

/* ValoPlant Floating Whiteboard Toolbar */
.tf-valoplant-hud {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg, rgba(13, 25, 34, 0.95), rgba(7, 16, 22, 0.96));
  border: 1px solid #284454;
  border-radius: 10px;
  padding: 8px 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.tf-tool-group {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #09141c;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #1a2f3c;
}

.tf-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #a4bcc7;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tf-tool-btn:hover {
  background: #152733;
  color: #fff;
}

.tf-tool-btn.active {
  background: #1c3c4f;
  border-color: #36b9ff;
  color: #36b9ff;
  box-shadow: 0 0 10px rgba(54, 185, 255, 0.35);
}

.tf-tool-btn span.label {
  font-size: 10px;
  font-weight: 800;
  margin-left: 5px;
  text-transform: uppercase;
}

.tf-color-palette {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tf-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.tf-color-dot:hover {
  transform: scale(1.15);
}

.tf-color-dot.active {
  border-color: #ffffff;
  box-shadow: 0 0 8px currentColor;
  transform: scale(1.2);
}

.tf-width-picker {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tf-width-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: #0c1822;
  border: 1px solid #1c3340;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
}

.tf-width-btn i {
  display: block;
  background: #a4bcc7;
  border-radius: 999px;
  width: 16px;
}

.tf-width-btn.active {
  border-color: #36b9ff;
  background: #142836;
}

.tf-width-btn.active i {
  background: #36b9ff;
}

/* Tactical Utility Palette Bar (Wards, Pings, Spells, Objectives) */
.tf-palette-drawer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #09131a;
  border: 1px solid #1c3340;
  border-radius: 9px;
  padding: 8px 12px;
  margin-top: 6px;
}

.tf-palette-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tf-palette-section small {
  color: #7b94a1;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.tf-palette-items {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tf-palette-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: #11222c;
  border: 1px solid #233d4e;
  border-radius: 6px;
  cursor: grab;
  transition: all 0.15s ease;
  overflow: hidden;
}

.tf-palette-btn:hover {
  border-color: #36b9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.tf-palette-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf-palette-btn svg {
  width: 22px;
  height: 22px;
}

/* Whiteboard SVG Layer */
.tf-whiteboard-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tf-whiteboard-svg .tf-interactive-path {
  pointer-events: stroke;
  cursor: pointer;
}

.tf-whiteboard-svg .tf-interactive-path:hover {
  filter: drop-shadow(0 0 6px #fff);
  stroke-width: 5px;
}

/* Ghost tracking of previous step */
.tf-ghost-unit {
  position: absolute;
  z-index: 4;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.5);
}

.tf-ghost-unit img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.tf-ghost-line {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-dasharray: 2 2;
  stroke-width: 1.5;
}

/* Champion Unit Facing Pointer */
.tf-unit-facing-arrow {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #36b9ff;
  transform-origin: 50% 38px;
  filter: drop-shadow(0 0 4px rgba(54, 185, 255, 0.8));
  cursor: pointer;
}

.tf-map-unit.red .tf-unit-facing-arrow {
  border-bottom-color: #ff5267;
  filter: drop-shadow(0 0 4px rgba(255, 82, 103, 0.8));
}

/* Health/Mana mini bars on champion tokens */
.tf-unit-bars {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 44px;
  padding: 1px;
  background: #040c11;
  border-radius: 2px;
  pointer-events: none;
}

.tf-unit-bars .bar-hp {
  height: 3px;
  background: #22c55e;
  border-radius: 1px;
}

.tf-unit-bars .bar-mp {
  height: 2px;
  background: #3b82f6;
  border-radius: 1px;
}

/* Tactical Notes */
.tf-map-note {
  position: absolute;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(11, 22, 30, 0.92);
  border: 1px solid rgba(251, 191, 36, 0.7);
  border-radius: 6px;
  color: #fef08a;
  font-size: 10px;
  font-weight: 700;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  white-space: nowrap;
}

.tf-map-note button {
  background: transparent;
  border: 0;
  color: #ff5267;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* Spell Markers (Flash, TP, Smite, etc.) */
.tf-ability-marker.item-spell {
  border-color: #fbbf24;
  background: #1a1608;
}

.tf-ability-marker.item-spell img {
  border-radius: 6px;
}

/* Objective Markers (Baron, Dragon, Herald, Grubs) */
.tf-ability-marker.item-objective {
  width: 52px;
  height: 52px;
  border-color: #a855f7;
  background: #140922;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}

.tf-ability-marker.item-objective img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
}

/* Control Ward Pink Aura Ring */
.tf-control-ward-aura {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border: 1.5px dashed rgba(192, 132, 252, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.15) 0%, rgba(192, 132, 252, 0.03) 70%, transparent 100%);
  pointer-events: none;
  animation: pulseAura 3s infinite ease-in-out;
}

@keyframes pulseAura {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* Sweeper Radar Scanner */
.tf-sweeper-aura {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Skillshot Quick Shape Selector Modal/Popover */
.tf-shape-selector-popover {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 5px;
  padding: 6px;
  background: #0d1e29;
  border: 1px solid #36b9ff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -120%);
}

.tf-shape-selector-popover button {
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  background: #142836;
  border: 1px solid #284c63;
  border-radius: 5px;
  color: #d1e4ed;
  cursor: pointer;
}

.tf-shape-selector-popover button:hover,
.tf-shape-selector-popover button.active {
  background: #36b9ff;
  color: #07131a;
  border-color: #36b9ff;
}

/* Sequencer Enhancements */
.tf-sequence-bar {
  background: #0b1720;
  border: 1px solid #1f3745;
  border-radius: 10px;
  padding: 8px 12px;
}

.tf-sequence-bar header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tf-sequence-bar [role="tablist"] {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}

.tf-sequence-bar [role="tab"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: #0f212c;
  border: 1px solid #243d4c;
  border-radius: 6px;
  color: #9ab1bc;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tf-sequence-bar [role="tab"]:hover {
  background: #162f3e;
  color: #fff;
}

.tf-sequence-bar [role="tab"].active {
  background: #18384b;
  border-color: #36b9ff;
  color: #36b9ff;
  box-shadow: 0 0 10px rgba(54, 185, 255, 0.35);
}

.tf-sequence-bar [role="tab"] b {
  font-size: 14px;
  font-weight: 900;
}

.tf-sequence-bar [role="tab"] small {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: 0.05em;
}

.tf-sequence-bar [role="tab"].has-items {
  border-bottom: 2px solid #fbbf24;
}

.tf-sequence-speed {
  background: #13242e;
  border: 1px solid #2b4554;
  border-radius: 6px;
  color: #c4d7e0;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 6px;
}

/* Combat Presets Dropdown */
.tf-presets-dropdown {
  position: relative;
  display: inline-block;
}

.tf-presets-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: none;
  min-width: 280px;
  background: #0d1e29;
  border: 1px solid #2d4c5e;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.tf-presets-dropdown:hover .tf-presets-menu,
.tf-presets-dropdown.open .tf-presets-menu {
  display: block;
}

.tf-preset-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #d1e3ec;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tf-preset-item:hover {
  background: #173445;
  color: #fff;
}

.tf-preset-item b {
  display: block;
  font-size: 12px;
  color: #36b9ff;
}

.tf-preset-item small {
  display: block;
  font-size: 9.5px;
  color: #8da4b0;
  margin-top: 2px;
  line-height: 1.3;
}