From 6b84607b25e8c62d18ae680033e3ba3c9fb48c08 Mon Sep 17 00:00:00 2001
From: Shinuwa <git@shinuwa.fr>
Date: Wed, 22 Jul 2026 23:22:18 +0200
Subject: [PATCH] fix style files

---
 tests/static-smoke.test.mjs       |   9 +-
 website/src/styles/_games.scss    | 263 ++++++++++++++++++++++++++++++
 website/src/styles/_mhwilds.scss  | 230 --------------------------
 website/src/styles/_overlays.scss |   4 +-
 4 files changed, 271 insertions(+), 235 deletions(-)

diff --git a/tests/static-smoke.test.mjs b/tests/static-smoke.test.mjs
index 6326bec..c27dad0 100644
--- a/tests/static-smoke.test.mjs
+++ b/tests/static-smoke.test.mjs
@@ -20,6 +20,7 @@ test("react application defines the expected local toolbox primitives", async ()
   const styleHome = await readFile("website/src/styles/_home.scss", "utf8");
   const styleToolboxes = await readFile("website/src/styles/_toolboxes.scss", "utf8");
   const styleIcons = await readFile("website/src/styles/_icons.scss", "utf8");
+  const styleGames = await readFile("website/src/styles/_games.scss", "utf8");
   const styleMhwilds = await readFile("website/src/styles/_mhwilds.scss", "utf8");
   const styleResponsive = await readFile("website/src/styles/_responsive.scss", "utf8");
   const iconComponent = await readFile("website/src/components/Icon.jsx", "utf8");
@@ -72,9 +73,11 @@ test("react application defines the expected local toolbox primitives", async ()
   assert.match(styleIcons, /ui-icon-add/);
   assert.match(styleMhwilds, /\.mhwilds-card/);
   assert.match(styleMhwilds, /\.mhwilds-flip-indicator/);
-  assert.match(styleMhwilds, /\.game-home-card/);
-  assert.match(styleMhwilds, /\.game-layout/);
-  assert.match(styleMhwilds, /\.game-grid/);
+  assert.match(styleGames, /\.game-home-card/);
+  assert.match(styleGames, /\.game-layout/);
+  assert.match(styleGames, /\.game-grid/);
+  assert.match(styleGames, /\.filter-panel/);
+  assert.doesNotMatch(styleMhwilds, /\.game-(home-card|layout|grid)/);
   assert.match(styleCards, /compact-data-card/);
   assert.match(styleResponsive, /@media \(max-width: 760px\)/);
   assert.match(source, /features\/toolboxes\/modules\/index\.jsx/);
diff --git a/website/src/styles/_games.scss b/website/src/styles/_games.scss
index e7feb49..824accc 100644
--- a/website/src/styles/_games.scss
+++ b/website/src/styles/_games.scss
@@ -1,3 +1,266 @@
+@use "mixins";
+
+.game-home-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 380px));
+  justify-content: center;
+  gap: var(--space-4);
+  margin-top: var(--space-6);
+}
+
+.game-home-card {
+  overflow: hidden;
+  border-color: transparent;
+  border-radius: var(--radius-md);
+  padding: 0;
+  min-height: 230px;
+  background:
+    linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
+    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
+    linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
+}
+
+@supports (corner-shape: scoop) {
+  .game-home-card {
+    corner-shape: scoop;
+  }
+}
+
+.game-home-card:hover {
+  transform: none;
+  border-color: transparent;
+  background:
+    linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
+    linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
+  box-shadow:
+    var(--shadow-sm),
+    0 0 18px rgba(139, 92, 246, 0.22),
+    0 0 34px rgba(196, 181, 253, 0.12);
+}
+
+.game-home-card img {
+  display: block;
+  width: 100%;
+  height: 120px;
+  object-fit: contain;
+  padding: var(--space-4);
+  border-bottom: 1px solid rgba(246, 196, 83, 0.42);
+  background: rgba(5, 7, 17, 0.28);
+}
+
+.game-home-card strong,
+.game-home-card span {
+  margin-inline: var(--space-5);
+}
+
+.game-home-card strong {
+  margin-top: var(--space-4);
+}
+
+.game-home-card span {
+  margin-bottom: var(--space-5);
+}
+
+.game-heading p {
+  max-width: 70ch;
+}
+
+.game-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.game-title-row h1 {
+  margin-bottom: 0;
+}
+
+.results-count {
+  display: inline-flex;
+  min-height: 28px;
+  align-items: center;
+  padding: 4px 10px;
+  border: 1px solid rgba(165, 180, 252, 0.16);
+  border-radius: var(--radius-pill);
+  background: rgba(5, 7, 17, 0.34);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: 800;
+}
+
+.game-layout {
+  display: grid;
+  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+  gap: var(--space-5);
+  margin-top: var(--space-6);
+  align-items: start;
+}
+
+.game-filters {
+  position: sticky;
+  top: 92px;
+}
+
+.filter-panel {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xl);
+  background: rgba(16, 20, 38, 0.58);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(10px);
+  padding: var(--space-4);
+}
+
+.filter-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 92% 12%, rgba(246, 196, 83, 0.009), transparent 34%),
+    radial-gradient(circle at 0% 100%, rgba(139, 92, 246, 0.011), transparent 42%);
+  pointer-events: none;
+}
+
+.filter-panel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  padding: 1px;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.42), transparent 34%),
+    linear-gradient(135deg, rgba(246, 196, 83, 0.42), rgba(139, 92, 246, 0.32) 54%, rgba(196, 181, 253, 0.24));
+  @include mixins.border-mask;
+  pointer-events: none;
+}
+
+.filter-panel > * {
+  position: relative;
+  z-index: 1;
+}
+
+.filter-panel-head,
+.filter-logic {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.filter-panel-head {
+  align-items: flex-start;
+}
+
+.filter-logic {
+  align-items: center;
+}
+
+.filter-panel-head h2 {
+  margin-bottom: 0;
+  font-size: var(--font-size-lg);
+}
+
+.filter-reset-button {
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+.filter-reset-button:hover {
+  background: rgba(21, 26, 48, 0.96);
+}
+
+.field.compact {
+  padding: var(--space-4) 0;
+}
+
+.filter-logic {
+  min-height: 42px;
+  margin-bottom: var(--space-4);
+  padding: 8px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: rgba(5, 7, 17, 0.36);
+}
+
+.filter-logic button {
+  min-height: 30px;
+  padding: 0 12px;
+  background: var(--color-primary-soft);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.filter-options {
+  display: grid;
+  gap: 8px;
+  max-height: calc(100vh - 360px);
+  overflow: auto;
+  margin-right: -6px;
+  padding-right: 12px;
+}
+
+.filter-chip {
+  display: grid;
+  grid-template-columns: 18px 22px 1fr;
+  min-height: 40px;
+  align-items: center;
+  column-gap: 6px;
+  padding: 7px 10px 7px 13px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pill);
+  background: rgba(5, 7, 17, 0.32);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.filter-chip:hover,
+.filter-chip.active {
+  border-color: var(--color-primary-border);
+  background: var(--color-primary-soft);
+  color: var(--color-text-primary);
+}
+
+.filter-chip input {
+  flex: 0 0 18px;
+  width: 18px;
+  min-width: 18px;
+  max-width: 18px;
+  inline-size: 18px;
+  min-inline-size: 18px;
+  max-inline-size: 18px;
+  height: 18px;
+  min-height: 18px;
+  max-height: 18px;
+  block-size: 18px;
+  min-block-size: 18px;
+  max-block-size: 18px;
+}
+
+.filter-chip img {
+  width: 22px;
+  height: 22px;
+  object-fit: contain;
+}
+
+.filter-chip span {
+  overflow: hidden;
+  color: inherit;
+  font-size: var(--font-size-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.game-grid {
+  display: grid;
+  gap: var(--space-4);
+}
+
 .game-card .card-cover {
   display: block;
   height: 170px;
diff --git a/website/src/styles/_mhwilds.scss b/website/src/styles/_mhwilds.scss
index 4612b6f..c00fc39 100644
--- a/website/src/styles/_mhwilds.scss
+++ b/website/src/styles/_mhwilds.scss
@@ -1,233 +1,3 @@
-@use "mixins";
-
-.game-home-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 380px));
-  justify-content: center;
-  gap: var(--space-4);
-  margin-top: var(--space-6);
-}
-
-.game-home-card {
-  overflow: hidden;
-  border-color: transparent;
-  border-radius: var(--radius-md);
-  padding: 0;
-  min-height: 230px;
-  background:
-    linear-gradient(rgba(16, 20, 38, 0.88), rgba(16, 20, 38, 0.88)) padding-box,
-    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.42), transparent 28%) border-box,
-    linear-gradient(135deg, rgba(246, 196, 83, 0.62) 0%, rgba(246, 196, 83, 0.42) 72%, rgba(34, 211, 238, 0.24) 100%) border-box;
-}
-
-@supports (corner-shape: scoop) {
-  .game-home-card {
-    corner-shape: scoop;
-  }
-}
-
-.game-home-card:hover {
-  transform: none;
-  border-color: transparent;
-  background:
-    linear-gradient(rgba(21, 26, 48, 0.96), rgba(21, 26, 48, 0.96)) padding-box,
-    linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(196, 181, 253, 0.72)) border-box;
-  box-shadow:
-    var(--shadow-sm),
-    0 0 18px rgba(139, 92, 246, 0.22),
-    0 0 34px rgba(196, 181, 253, 0.12);
-}
-
-.game-home-card img {
-  display: block;
-  width: 100%;
-  height: 120px;
-  object-fit: contain;
-  padding: var(--space-4);
-  border-bottom: 1px solid rgba(246, 196, 83, 0.42);
-  background: rgba(5, 7, 17, 0.28);
-}
-
-.game-home-card strong,
-.game-home-card span {
-  margin-inline: var(--space-5);
-}
-
-.game-home-card strong {
-  margin-top: var(--space-4);
-}
-
-.game-home-card span {
-  margin-bottom: var(--space-5);
-}
-
-.game-heading p {
-  max-width: 70ch;
-}
-
-.game-title-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-}
-
-.game-title-row h1 {
-  margin-bottom: 0;
-}
-
-.results-count {
-  display: inline-flex;
-  min-height: 28px;
-  align-items: center;
-  padding: 4px 10px;
-  border: 1px solid rgba(165, 180, 252, 0.16);
-  border-radius: var(--radius-pill);
-  background: rgba(5, 7, 17, 0.34);
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-  font-weight: 800;
-}
-
-.game-layout {
-  display: grid;
-  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
-  gap: var(--space-5);
-  margin-top: var(--space-6);
-  align-items: start;
-}
-
-.game-filters {
-  position: sticky;
-  top: 92px;
-}
-
-.filter-panel {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  background: rgba(16, 20, 38, 0.72);
-  box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(10px);
-  padding: var(--space-4);
-}
-
-.filter-panel-head,
-.filter-logic {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-3);
-}
-
-.filter-panel-head {
-  align-items: flex-start;
-}
-
-.filter-logic {
-  align-items: center;
-}
-
-.filter-panel-head h2 {
-  margin-bottom: 0;
-  font-size: var(--font-size-lg);
-}
-
-.filter-reset-button {
-  color: var(--color-text-secondary);
-  box-shadow: var(--shadow-sm);
-}
-
-.filter-reset-button:hover {
-  background: rgba(21, 26, 48, 0.96);
-}
-
-.field.compact {
-  padding: var(--space-4) 0;
-}
-
-.filter-logic {
-  min-height: 42px;
-  margin-bottom: var(--space-4);
-  padding: 8px 10px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: rgba(5, 7, 17, 0.36);
-}
-
-.filter-logic button {
-  min-height: 30px;
-  padding: 0 12px;
-  background: var(--color-primary-soft);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.filter-options {
-  display: grid;
-  gap: 8px;
-  max-height: calc(100vh - 360px);
-  overflow: auto;
-  margin-right: -6px;
-  padding-right: 12px;
-}
-
-.filter-chip {
-  display: grid;
-  grid-template-columns: 18px 22px 1fr;
-  min-height: 40px;
-  align-items: center;
-  column-gap: 6px;
-  padding: 7px 10px 7px 13px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-pill);
-  background: rgba(5, 7, 17, 0.32);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-}
-
-.filter-chip:hover,
-.filter-chip.active {
-  border-color: var(--color-primary-border);
-  background: var(--color-primary-soft);
-  color: var(--color-text-primary);
-}
-
-.filter-chip input {
-  flex: 0 0 18px;
-  width: 18px;
-  min-width: 18px;
-  max-width: 18px;
-  inline-size: 18px;
-  min-inline-size: 18px;
-  max-inline-size: 18px;
-  height: 18px;
-  min-height: 18px;
-  max-height: 18px;
-  block-size: 18px;
-  min-block-size: 18px;
-  max-block-size: 18px;
-}
-
-.filter-chip img {
-  width: 22px;
-  height: 22px;
-  object-fit: contain;
-}
-
-.filter-chip span {
-  overflow: hidden;
-  color: inherit;
-  font-size: var(--font-size-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.game-grid {
-  display: grid;
-  gap: var(--space-4);
-}
-
 .monster-grid {
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 }
diff --git a/website/src/styles/_overlays.scss b/website/src/styles/_overlays.scss
index 50c9396..858d381 100644
--- a/website/src/styles/_overlays.scss
+++ b/website/src/styles/_overlays.scss
@@ -76,8 +76,8 @@
       rgba(196, 181, 253, 0.72)
     ) left top / 1px 100% no-repeat,
     rgba(7, 9, 19, 0.82);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
   box-shadow:
     inset 8px 0 18px rgba(139, 92, 246, 0.08),
     var(--shadow-lg);