From f6078542ef52d66863a10753b7e2a783f77c53b6 Mon Sep 17 00:00:00 2001
From: Akurosia Kamo <akurosia@akurosia.de>
Date: Mon, 8 Jun 2026 17:08:29 +0200
Subject: [PATCH] add hint, hover for boss skills

---
 css/planner.css | 49 ++++++++++++++++++++++++++++++++++++++++++++-----
 js/planner.js   |  8 ++++++--
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/css/planner.css b/css/planner.css
index a5a5e24..48d6543 100644
--- a/css/planner.css
+++ b/css/planner.css
@@ -711,11 +711,26 @@
 
 /* ── Planner Timeline ───────────────────────────────────────────────────────── */
 .timeline-hint {
-  font-size: 12px;
-  color:     var(--t3);
+  display:       flex;
+  align-items:   center;
+  flex-wrap:     wrap;
+  gap:           8px;
+  font-size:     12px;
+  color:         var(--t3);
   margin-bottom: 8px;
 }
 
+.timeline-zoom-hint {
+  display:       inline-flex;
+  align-items:   center;
+  padding:       2px 7px;
+  border:        1px solid rgba(200,168,75,.25);
+  border-radius: var(--r);
+  background:    rgba(200,168,75,.08);
+  color:         var(--gold);
+  font-weight:   600;
+}
+
 .timeline-controls {
   display:     flex;
   align-items: center;
@@ -850,18 +865,42 @@
   position:       absolute;
   top:            0;
   bottom:         0;
-  width:          1px;
+  width:          10px;
   transform:      translateX(-50%);
-  background:     rgba(200,168,75,.38);
-  pointer-events: none;
+  background:     transparent;
+  pointer-events: auto;
+  cursor:         help;
   z-index:        1;
 }
 
+.timeline-hit-line::before {
+  content:    "";
+  position:   absolute;
+  top:        0;
+  bottom:     0;
+  left:       50%;
+  width:      1px;
+  transform:  translateX(-50%);
+  background: rgba(200,168,75,.38);
+}
+
 .timeline-hit-line--tankbuster {
+  width: 12px;
+}
+
+.timeline-hit-line--tankbuster::before {
   width:      2px;
   background: rgba(177,112,255,.62);
 }
 
+.timeline-hit-line:hover::before {
+  background: var(--gold);
+}
+
+.timeline-hit-line--tankbuster:hover::before {
+  background: #b170ff;
+}
+
 .timeline-player-row .timeline-track {
   background-color: rgba(255,255,255,0.015);
 }
diff --git a/js/planner.js b/js/planner.js
index 13562ad..905f35c 100644
--- a/js/planner.js
+++ b/js/planner.js
@@ -459,10 +459,12 @@ function renderPlanDetail(plan) {
                     </label>
                 </div>
             </div>
-            <div class="timeline-hint">Boss-Aktion klicken zum Zuweisen · Mitigation ziehen · Modifier+Scroll zum Zoomen · Klick für Zeiten</div>
             <div id="planner-timeline">
                 ${renderTimelineHtml(plan)}
             </div>
+            <div class="timeline-hint">
+                <span class="timeline-zoom-hint">Zoom: Strg + Mausrad</span>
+            </div>
             <div id="timeline-settings">
                 ${renderTimelineSettingsHtml(plan)}
             </div>
@@ -1595,7 +1597,9 @@ function renderTimelineHtml(plan) {
     const bossActions = layoutBossActions(mechanics, duration);
     const laneCount = Math.max(1, ...bossActions.map(item => item.lane + 1));
     const hitLines = mechanics.map(m => `
-        <span class="timeline-hit-line${m.isHeavyTankbuster ? ' timeline-hit-line--tankbuster' : ''}" style="left:${(m.timestamp / duration) * 100}%"></span>
+        <span class="timeline-hit-line${m.isHeavyTankbuster ? ' timeline-hit-line--tankbuster' : ''}"
+              style="left:${(m.timestamp / duration) * 100}%"
+              title="${escHtml(`${fmtTimestamp(m.timestamp)} · ${m.name} · ${m.isHeavyTankbuster ? 'Tankbuster' : 'AoE'}`)}"></span>
     `).join('');
 
     const bossItems = bossActions.map(({ mechanic: m, left, lane }) => `