style(breakpoints): consolidate 9 ad-hoc values into 5 SCSS tokens

Adds src/styles/_breakpoints.scss with five canonical tokens
(\$bp-sm 600, \$bp-md 800, \$bp-lg 1024, \$bp-xl 1280, \$bp-2xl 1600)
and migrates all 15 @media (max-width: ...) occurrences across 9 files.
Configures vite.config.ts with scss loadPaths so any file can
@use "breakpoints" without relative paths.

Conservative rounding-up where existing values were near-duplicates:
500 and 512 collapse to 600, 768 collapses to 800, 1000 collapses to
1024. Slightly more viewports get the smaller-layout treatment in
those bands, which is usually beneficial on cramped widths.

Converts 7 Svelte files from <style> to <style lang="scss"> to access
the SCSS tokens. SCSS is a CSS superset, so existing rules stay valid.

5 files changed, 22 insertions, 12 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 460afcce..c0bf86e9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -361,6 +361,8 @@ $: {
 {/if}
 
 <style lang="scss">
+  @use "breakpoints" as *;
+
   .header {
     font-family:
       'DM Sans',
@@ -458,7 +460,7 @@ $: {
     display: none;
   }
 
-  @media (max-width: 800px) {
+  @media (max-width: $bp-md) {
     .header {
       position: fixed;
       top: 1.25rem;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ad3971d8..218bc8d5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -331,7 +331,9 @@ onDestroy(() => {
   </div>
 {/if}
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   .balanced-list-flow {
     display: grid;
     grid-template-columns: repeat(var(--balanced-list-columns), minmax(0, 1fr));
@@ -355,7 +357,7 @@ onDestroy(() => {
     margin: 0;
   }
 
-  @media (max-width: 800px) {
+  @media (max-width: $bp-md) {
     .balanced-list-flow {
       grid-template-columns: 1fr;
     }
diff --git a/src/routes/girls/+page.svelte b/src/routes/girls/+page.svelte
index 88f06460..bbe57ac9 100644
--- a/src/routes/girls/+page.svelte
+++ b/src/routes/girls/+page.svelte
@@ -92,7 +92,9 @@ import "$styles/girls.scss";
   {/await}
 </details>
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   img {
     border-radius: 8px;
     width: 25vh;
@@ -102,25 +104,25 @@ import "$styles/girls.scss";
     columns: 6;
   }
 
-  @media (max-width: 1280px) {
+  @media (max-width: $bp-xl) {
     .languages ul {
       columns: 5;
     }
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: $bp-lg) {
     .languages ul {
       columns: 4;
     }
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: $bp-md) {
     .languages ul {
       columns: 3;
     }
   }
 
-  @media (max-width: 512px) {
+  @media (max-width: $bp-sm) {
     .languages ul {
       columns: 2;
     }
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index a1674c8f..139f333e 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -85,14 +85,16 @@ onMount(async () => {
   {/await}
 {/if}
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   .schedule-container {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(35%, 1fr));
     gap: 0.5em;
   }
 
-  @media (max-width: 800px) {
+  @media (max-width: $bp-md) {
     .schedule-container {
       grid-template-columns: 1fr !important;
     }
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c93f4dc9..054a126b 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -94,7 +94,9 @@ export let data: PageData;
   <Category title={$locale().settings.attributions.title} open={false}><Attributions /></Category>
 {/if}
 
-<style>
+<style lang="scss">
+  @use "breakpoints" as *;
+
   .small-categories {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -102,7 +104,7 @@ export let data: PageData;
     align-items: start;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: $bp-sm) {
     .small-categories {
       grid-template-columns: 1fr;
     }