/* lane-synergy.css: owned by the synergy lane. Live drop preview (.syn-gain/.syn-lost/.syn-plan), connectors (.syn-layer),
   link pings, live tooltip values, battle plan. Motion is dropped under prefers-reduced-motion and .syn-static. */

/* ---- live drop preview ---- */
.board > .syn-gain, .board > .syn-lost, .board > .syn-plan-cell { position: absolute; width: var(--cell); height: var(--cell); pointer-events: none; z-index: 29; border-radius: 5px; }
.syn-gain { box-shadow: inset 0 0 0 2px #7dff8a, 0 0 10px rgba(125,255,138,.65); background: rgba(125,255,138,.14); animation: synRing 1s ease-in-out infinite; }
.syn-lost { box-shadow: inset 0 0 0 2px #ffb12e, 0 0 8px rgba(255,177,46,.55); background: rgba(255,177,46,.14); }
.syn-gain[data-mark]::after, .syn-lost[data-mark]::after { content: attr(data-mark); position: absolute; right: 2px; top: 0; font: 700 15px/1 var(--font-head, sans-serif); text-shadow: 0 0 3px #000, 0 0 2px #000; }
.syn-gain[data-mark]::after { color: #9dffa6; }
.syn-lost[data-mark]::after { color: #ffc766; }
@keyframes synRing { 50% { box-shadow: inset 0 0 0 3px #b6ffbd, 0 0 18px rgba(125,255,138,.9); } }
.syn-gain.syn-static { animation: none; }

/* drop plan: displaced items as dashed outlines; orange = goes to the bin */
.board > .syn-plan-cell { border: 2px dashed #ffd45a; background: rgba(255,212,90,.10); z-index: 28; }
.board > .syn-plan-cell.is-bin { border-color: #ff8a3d; background: rgba(255,138,61,.14); }
.syn-plan-cell[data-mark]::after { content: attr(data-mark); position: absolute; left: 2px; bottom: 1px; font: 700 10px/1 sans-serif; color: #ffb27a; text-transform: uppercase; text-shadow: 0 0 3px #000; }
.syn-plan-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 28; }
.syn-plan-svg .plan-arrow { stroke: #ffd45a; stroke-width: 2.5; stroke-dasharray: 5 4; }
.syn-plan-svg .plan-head { fill: #ffd45a; }

/* ---- connectors + chips ---- */
.syn-layer { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.syn-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.syn-link { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: .38; filter: drop-shadow(0 0 3px currentColor); transition: opacity .15s, stroke-width .15s; }
.syn-link.syn-hot { opacity: 1; stroke-width: 3.2; }
.syn-dot { opacity: .6; }
.syn-dot.syn-hot { opacity: 1; }
.syn-link.syn-new { stroke-dasharray: 14 86; animation: synFlow .9s ease-out forwards; opacity: .95; }
@keyframes synFlow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -14; stroke-dasharray: 100 0; opacity: .38; } }
.syn-chip { position: absolute; transform: translate(-100%, 0); padding: 0 4px; border-radius: 6px 0 4px 0; font: 700 10px/14px var(--font-body, sans-serif); white-space: nowrap;
  color: #c9ffd0; background: rgba(8,28,12,.88); box-shadow: 0 0 0 1px rgba(125,255,138,.6); text-shadow: 0 1px 1px #000; transition: transform .15s, box-shadow .15s; }
.syn-chip.syn-hot { box-shadow: 0 0 0 1px #7dff8a, 0 0 8px rgba(125,255,138,.8); }
.board.syn-on .piece .buffed { display: none; }   /* the chip replaces the old blue triangle */
.syn-layer.syn-static .syn-link.syn-new { animation: none; stroke-dasharray: none; opacity: .38; }

/* link formed: both pieces pulse, a chip floats from source to recipient */
.piece.syn-pulse .frame, .piece.syn-pulse .sprite-holder, .piece.syn-pulse .art { animation: synPulse .6s ease-out; }
@keyframes synPulse { 0% { filter: brightness(1.8) drop-shadow(0 0 8px #ffd45a); } 100% { filter: none; } }
.syn-float { position: absolute; transform: translate(-50%, -50%); padding: 0 5px; border-radius: 8px; font: 700 11px/16px var(--font-body, sans-serif); color: #fff3b0; background: rgba(40,28,6,.9);
  box-shadow: 0 0 0 1px #ffd45a; animation: synFloat .85s ease-out forwards; white-space: nowrap; }
@keyframes synFloat { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05); } }

/* piece whose bonus row is hovered / tapped in the tooltip */
.piece.syn-src .frame, .piece.syn-src .sprite-holder, .piece.syn-src .art { filter: brightness(1.35) drop-shadow(0 0 6px #7fd1ff); }

@media (prefers-reduced-motion: reduce) {
  .syn-gain, .syn-link.syn-new, .piece.syn-pulse .frame, .piece.syn-pulse .sprite-holder, .piece.syn-pulse .art { animation: none; }
  .syn-float { display: none; }
}

/* ---- live tooltip values ---- */
.tt-base { margin-left: 4px; font-size: 11px; color: #8f8369; text-decoration: line-through; }
.tt-weapon .tt-base { margin: 0; line-height: 1; }
.tt-up { color: #5dff7a !important; }
.tt-down { color: #ff6a5a !important; }
.tt-card .tt-line.tt-live { color: #7dff8a; }
.tt-dps { margin: -2px 0 8px; text-align: center; font-size: 12px; color: #cdbf9d; }
.tt-dps-crit { color: #a8987a; }
.tt-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #a8987a; margin-bottom: 2px; }
.tt-sect.active .tt-line { color: #7dff8a; }
.tt-sect.active .tt-row { cursor: default; padding: 1px 3px; margin: 1px -3px; border-radius: 3px; }
@media (hover: hover) { .tt-sect.active .tt-row:hover { background: rgba(127,209,255,.14); } }
.tt-sect.star .tt-line.tt-off { color: #ffb27a; }
.tt-sect.star .tt-line.tt-on { color: #7dff8a; }
.tt-boosting { color: #7ad0ff !important; }
#tooltip .tt-row { pointer-events: auto; }

/* ---- battle plan ---- */
.battle-plan { margin: 8px 0; border: 1px solid rgba(201,162,74,.28); border-radius: 6px; background: rgba(0,0,0,.28); font-size: 12px; color: #d8ccb0; }
.battle-plan > summary { cursor: pointer; padding: 6px 10px; min-height: 32px; list-style: none; color: #e6d7ac; }
.battle-plan > summary::-webkit-details-marker { display: none; }
.battle-plan > summary::before { content: '▸ '; }
.battle-plan[open] > summary::before { content: '▾ '; }
.bp-rows { display: grid; gap: 2px; padding: 0 6px 6px; }
.bp-row { display: grid; grid-template-columns: 24px 1fr 38px minmax(70px, auto) 26px; gap: 6px; align-items: center; text-align: left; padding: 3px 4px; min-height: 30px;
  border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) { .bp-row:hover { background: rgba(255,212,90,.1); } }
.bp-row:active { background: rgba(255,212,90,.18); }
.bp-ico { width: 22px; height: 22px; border-radius: 3px; }
.bp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-cd { color: #a8987a; text-align: right; }
.bp-out { color: #efe4c8; font-size: 11.5px; }
.bp-syn.on { color: #7dff8a; font-weight: 700; text-align: right; }
.bp-warn { padding: 3px 10px; color: #ffb27a; font-size: 11.5px; }