/* lane-combos.css: combo hints. Tooltip lines, shop anvil badge, fight-opener craft beats, end-screen strip.
   Motion is dropped under prefers-reduced-motion. */

/* ---- tooltip ---- */
.tt-card .tt-line.tt-keep { color: #f2d089; }
.tt-card .tt-line.tt-unknown i { color: #b9a77a; font-style: italic; }
.tt-card .tt-line.tt-more { color: #9a8a66; font-size: .9em; }
.tt-card .tt-line.tt-made, .tt-card .tt-line.tt-completes { color: #f2d089; }

/* ---- shop badge: small anvil on a ware that is the last missing piece of a recipe ---- */
.ware .recipe-badge { position: absolute; left: auto; right: 4px; top: 4px; transform: none; width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 50%; font-size: 13px; line-height: 22px; text-align: center; cursor: help; }
.ware .recipe-badge.pulse { animation: combo-pulse 1.4s ease-in-out infinite; box-shadow: inset 0 0 0 1px #f2d089, 0 0 8px rgba(242, 208, 137, .7); }
@keyframes combo-pulse { 50% { box-shadow: inset 0 0 0 1px #f2d089, 0 0 14px rgba(255, 220, 140, 1); transform: scale(1.12); } }

/* ---- fight opener ---- */
.craft-opener { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); z-index: 26; pointer-events: none; text-align: center; }
.co-beat { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: co-in var(--beat, 450ms) ease-out both; }
.co-in { display: flex; gap: 38px; justify-content: center; }
.co-ing { width: 44px; height: 44px; border-radius: 5px; box-shadow: 0 0 0 2px #000, 0 2px 8px #000; animation: co-slide var(--beat, 450ms) ease-in both; }
.co-ing:nth-child(odd) { --dir: 1; } .co-ing:nth-child(even) { --dir: -1; }
.co-ing.kept { box-shadow: 0 0 0 2px #ffd36b, 0 0 14px 4px rgba(255, 211, 107, .85); animation: none; }
.co-out { width: 56px; height: 56px; border-radius: 6px; margin-top: -50px; box-shadow: 0 0 0 2px #000, 0 0 18px 6px var(--qc, #fff); animation: co-flash var(--beat, 450ms) ease-out both; }
.co-beat.r-uncommon { --qc: #1eff00; } .co-beat.r-rare { --qc: #0070dd; } .co-beat.r-epic { --qc: #a335ee; } .co-beat.r-legendary { --qc: #ff8000; } .co-beat.r-common { --qc: #fff; }
.co-plate { padding: 3px 12px; border-radius: 10px; background: rgba(12, 8, 4, .9); box-shadow: inset 0 0 0 1px #8a6a2c; font-family: var(--font-head); font-size: 15px; text-shadow: 0 1px 0 #000; }
.co-text { font-size: 14px; color: #f2d089; }
.co-burst .co-ing { animation: none; width: 34px; height: 34px; }
.co-burst .co-in { gap: 6px; }
@keyframes co-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes co-slide { from { transform: translateX(calc(var(--dir, 1) * -34px)); opacity: .4; } to { transform: translateX(calc(var(--dir, 1) * 40px)); opacity: 0; } }
@keyframes co-flash { 0%, 40% { opacity: 0; transform: scale(.6); filter: brightness(3); } 100% { opacity: 1; transform: scale(1); filter: none; } }

/* ---- end screen ---- */
.end-combos { margin: 8px 0; text-align: center; }
.end-combos small { display: block; color: var(--muted, #9a8a66); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; margin-bottom: 4px; }
.ec-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ec-item { position: relative; display: inline-block; }
.ec-ico { width: 34px; height: 34px; border-radius: 4px; box-shadow: 0 0 0 2px var(--qc, #555); display: block; }
.ec-item i { position: absolute; right: -3px; bottom: -3px; font-style: normal; font-size: 10px; padding: 0 3px; border-radius: 6px; background: #000; color: #f2d089; }

@media (prefers-reduced-motion: reduce) {
  .ware .recipe-badge.pulse, .co-beat, .co-ing, .co-out { animation: none; }
}