v0.6.3: hero detail bottom drawer that pushes role tags, matches page summary dedupe.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/frontend/style.css

@@ -318,7 +318,12 @@ body {
   min-height: 52px;
   margin: 0 14px var(--space-sm);
   padding: var(--space-sm) var(--space-md);
-  background: rgba(8, 12, 20, 0.62);
+  position: relative;
+  z-index: 3;
+  background: transparent;
+}
+body.detail-drawer-open .hero-role-toolbar {
+  margin-bottom: 0;
 }
 .toolbar.hidden,
 .board.hidden,
@@ -464,8 +469,7 @@ body {
   overflow: auto;
 }
 
-/* Hero picker fills leftover space above role toolbar + pinned detail;
-   scrolls inside when the grid is taller than the region. */
+/* Hero grid above role tags; detail sits below tags and grows upward to push them. */
 #heroes-view {
   flex: 1 1 auto;
   min-height: 0;
@@ -473,25 +477,81 @@ body {
   overflow: auto;
 }
 
-/* Heroes-only (#detail hidden on items page): pin to bottom with a gap above
-   the hero grid + role toolbar. One shared fixed height across all tabs so
-   技能 ↔ 核心装备 ↔ 被克装备 does not jump; tall tabs (走势/对位/…) scroll
-   inside .detail-tab-body. Prefer a taller detail on large viewports — the
-   hero grid only needs ~one board of portraits (+ scroll), not half the screen. */
-.detail {
-  --detail-fixed-h: min(640px, calc(100dvh - clamp(280px, 32vh, 380px) - 7rem));
+/* In-flow bottom drawer: height animates so the tagbar above is pushed up. */
+.detail-drawer {
+  --detail-fixed-h: min(720px, 88dvh);
+  flex: 0 0 auto;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transition: max-height 320ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.detail-drawer:not(.is-collapsed) {
+  max-height: var(--detail-fixed-h);
+  pointer-events: auto;
+}
+.detail-drawer.is-dragging {
+  transition: none;
+}
+.detail-drawer-panel.detail {
+  --detail-fixed-h: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex: 0 0 auto;
-  margin: 0 14px var(--space-md);
-  padding: var(--space-md) var(--space-lg);
+  width: 100%;
+  margin: 0;
+  padding: var(--space-sm) var(--space-lg) var(--space-md);
   border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  background: var(--panel-soft);
-  min-height: 0;
-  overflow: hidden;
+  border-bottom: none;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  background: var(--panel);
+  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35);
   box-sizing: border-box;
+  overflow: hidden;
+}
+.detail-drawer-handle {
+  flex: 0 0 auto;
+  align-self: center;
+  width: 56px;
+  height: 20px;
+  margin: 0 auto 6px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: grab;
+  touch-action: none;
+  position: relative;
+}
+.detail-drawer-handle::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 44px;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: rgba(140, 170, 210, 0.38);
+  transform: translate(-50%, -50%);
+}
+.detail-drawer.is-dragging .detail-drawer-handle {
+  cursor: grabbing;
+}
+body.detail-drawer-open {
+  overflow: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  .detail-drawer {
+    transition: none;
+  }
+}
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .heroes-site-foot {
   flex: 0 0 auto;
@@ -510,22 +570,17 @@ body {
   min-height: var(--detail-fixed-h);
   max-height: var(--detail-fixed-h);
 }
-.detail:not(.empty) > * {
+.detail:not(.empty) > *:not(.detail-drawer-handle) {
   width: 100%;
   max-width: none;
 }
-.detail.is-collapsed {
-  display: none;
-}
-.detail.empty:not(.is-collapsed) {
+.detail.empty {
   height: auto;
-  min-height: 64px;
+  min-height: 0;
   max-height: none;
-  justify-content: center;
-  color: var(--muted);
-  font-size: var(--fs-body);
-  line-height: var(--lh-body);
-  letter-spacing: 0.04em;
+  padding: 0;
+  border: none;
+  box-shadow: none;
 }
 .detail-head {
   display: flex;