structure optimisation

website/src/styles/_cards.scss

@@ -79,6 +79,39 @@
     0 0 34px rgba(196, 181, 253, 0.12);
 }
 
+.compact-data-card {
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(rgba(17, 20, 34, 0.93), rgba(17, 20, 34, 0.93)) padding-box,
+    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.24), transparent 24%) border-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.34) 0%, rgba(246, 196, 83, 0.2) 54%, rgba(34, 211, 238, 0.22) 100%) border-box;
+  box-shadow: var(--shadow-sm);
+  transition:
+    transform var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+
+@supports (corner-shape: scoop) {
+  .compact-data-card {
+    corner-shape: scoop;
+  }
+}
+
+.compact-data-card:hover {
+  transform: none;
+  border-color: transparent;
+  background:
+    linear-gradient(rgba(20, 23, 39, 0.96), rgba(20, 23, 39, 0.96)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.62), rgba(196, 181, 253, 0.42)) border-box;
+  box-shadow:
+    var(--shadow-sm),
+    0 0 14px rgba(139, 92, 246, 0.12),
+    0 0 22px rgba(196, 181, 253, 0.07);
+}
+
 .feature {
   display: grid;
   gap: 8px;
@@ -114,6 +147,7 @@
 }
 
 .toolbox-card {
+  position: relative;
   display: flex;
   min-height: 292px;
   flex-direction: column;
@@ -157,6 +191,57 @@
   padding-top: var(--space-5);
 }
 
+.toolbox-card-drag-handle {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 3;
+  display: inline-grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  padding: 0;
+  border-color: rgba(165, 180, 252, 0.12);
+  background: rgba(7, 10, 24, 0.42);
+  color: var(--color-text-muted);
+  cursor: grab;
+  opacity: 0.72;
+  touch-action: none;
+  user-select: none;
+}
+
+.toolbox-card-drag-handle .ui-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.toolbox-card:hover .toolbox-card-drag-handle,
+.toolbox-card:focus-within .toolbox-card-drag-handle {
+  opacity: 1;
+}
+
+.toolbox-card-drag-handle:active {
+  cursor: grabbing;
+}
+
+.toolbox-card.is-dragging {
+  cursor: grabbing;
+  opacity: 0.58;
+  transform: scale(0.99);
+}
+
+.toolbox-card.is-drop-target {
+  box-shadow:
+    var(--shadow-sm),
+    inset 3px 0 0 rgba(246, 196, 83, 0.82);
+}
+
+.toolbox-card.is-drop-target.drop-after {
+  box-shadow:
+    var(--shadow-sm),
+    inset -3px 0 0 rgba(246, 196, 83, 0.82);
+}
+
 .toolbox-page {
   display: flex;
   min-height: calc(100vh - 68px - var(--space-8) - var(--space-12));

website/src/styles/_diablo4.scss

@@ -25,7 +25,7 @@
   color: var(--color-text-primary);
 }
 
-.mhwilds-home-card .diablo4-home-mark {
+.game-home-card .diablo4-home-mark {
   margin: 0;
 }
 

website/src/styles/_mhwilds.scss

@@ -1,6 +1,6 @@
 @use "mixins";
 
-.mhwilds-home-grid {
+.game-home-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 380px));
   justify-content: center;
@@ -8,7 +8,7 @@
   margin-top: var(--space-6);
 }
 
-.mhwilds-home-card {
+.game-home-card {
   overflow: hidden;
   border-color: transparent;
   border-radius: var(--radius-md);
@@ -21,12 +21,12 @@
 }
 
 @supports (corner-shape: scoop) {
-  .mhwilds-home-card {
+  .game-home-card {
     corner-shape: scoop;
   }
 }
 
-.mhwilds-home-card:hover {
+.game-home-card:hover {
   transform: none;
   border-color: transparent;
   background:
@@ -38,7 +38,7 @@
     0 0 34px rgba(196, 181, 253, 0.12);
 }
 
-.mhwilds-home-card img {
+.game-home-card img {
   display: block;
   width: 100%;
   height: 120px;
@@ -48,31 +48,31 @@
   background: rgba(5, 7, 17, 0.28);
 }
 
-.mhwilds-home-card strong,
-.mhwilds-home-card span {
+.game-home-card strong,
+.game-home-card span {
   margin-inline: var(--space-5);
 }
 
-.mhwilds-home-card strong {
+.game-home-card strong {
   margin-top: var(--space-4);
 }
 
-.mhwilds-home-card span {
+.game-home-card span {
   margin-bottom: var(--space-5);
 }
 
-.mhwilds-heading p {
+.game-heading p {
   max-width: 70ch;
 }
 
-.mhwilds-title-row {
+.game-title-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
 }
 
-.mhwilds-title-row h1 {
+.game-title-row h1 {
   margin-bottom: 0;
 }
 
@@ -89,7 +89,7 @@
   font-weight: 800;
 }
 
-.mhwilds-layout {
+.game-layout {
   display: grid;
   grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
   gap: var(--space-5);
@@ -97,7 +97,7 @@
   align-items: start;
 }
 
-.mhwilds-filters {
+.game-filters {
   position: sticky;
   top: 92px;
 }
@@ -223,7 +223,7 @@
   white-space: nowrap;
 }
 
-.mhwilds-grid {
+.game-grid {
   display: grid;
   gap: var(--space-4);
 }

website/src/styles/_responsive.scss

@@ -143,12 +143,12 @@
     display: contents;
   }
 
-  .mhwilds-home-grid,
-  .mhwilds-layout {
+  .game-home-grid,
+  .game-layout {
     grid-template-columns: 1fr;
   }
 
-  .mhwilds-filters {
+  .game-filters {
     position: static;
   }