@jjlmoya/utils-hardware 1.16.0 → 1.18.0

package/src/tool/colorAccuracyTest/logic.ts

@@ -0,0 +1,226 @@
+export interface ColorTest {
+  name: string;
+  description: string;
+  instruction: string;
+  colors: string[];
+}
+
+export const SRGB_TESTS: ColorTest[] = [
+  {
+    name: 'Spectral Purity',
+    description: 'Primary & secondary colors',
+    instruction: 'Watch for consistent, pure colors. Any color shift or banding indicates display inaccuracy.',
+    colors: ['#000', '#fff', '#f00', '#0f0', '#00f', '#ff0', '#0ff', '#f0f'],
+  },
+  {
+    name: 'Gradient Dynamics',
+    description: 'Smooth color transitions',
+    instruction: 'Look for banding (visible steps) instead of smooth gradients. Banding = poor color depth or calibration.',
+    colors: [],
+  },
+  {
+    name: 'Black Crush Detection',
+    description: 'Shadow detail test',
+    instruction: 'Can you see all 6 shades? If blacks blur together, your display is crushing shadow details.',
+    colors: ['#000', '#111', '#222', '#333', '#444', '#555'],
+  },
+  {
+    name: 'White Point Calibration',
+    description: 'Brightness & temperature',
+    instruction: 'Check for color tint in whites. A neutral white has no warm (yellow) or cool (blue) cast.',
+    colors: ['#fff', '#f5f5f5', '#e8e8e8', '#d0d0d0', '#b0b0b0'],
+  },
+];
+
+export const DCIP3_TESTS: ColorTest[] = [
+  {
+    name: 'Spectral Purity (DCI-P3)',
+    description: 'Cinema gamut colors',
+    instruction: 'DCI-P3 covers more colors than sRGB. Watch for vibrant, saturated colors without clipping.',
+    colors: ['#000', '#fff', '#ff0000', '#00ff00', '#0000ff'],
+  },
+  {
+    name: 'Gradient Dynamics',
+    description: 'Smooth color transitions',
+    instruction: 'Cinema displays should show silky-smooth gradients. Any stepping = insufficient bit depth.',
+    colors: [],
+  },
+  {
+    name: 'Black Crush Detection',
+    description: 'Shadow detail test',
+    instruction: 'Can you see all 6 shades? If blacks blur together, your display is crushing shadow details.',
+    colors: ['#000', '#111', '#222', '#333', '#444', '#555'],
+  },
+  {
+    name: 'White Point Calibration',
+    description: 'Brightness & temperature',
+    instruction: 'Check for color tint in whites. A neutral white has no warm (yellow) or cool (blue) cast.',
+    colors: ['#fff', '#f5f5f5', '#e8e8e8', '#d0d0d0', '#b0b0b0'],
+  },
+];
+
+export class SpectrumCanvasTest {
+  private currentTestIndex = 0;
+  private currentColorIndex = 0;
+  private gamut: 'srgb' | 'dcip3' = 'srgb';
+  private tests: ColorTest[] = SRGB_TESTS;
+  private testBg: HTMLElement | null = null;
+  private testName: HTMLElement | null = null;
+  private testDescription: HTMLElement | null = null;
+  private progressBar: HTMLElement | null = null;
+  private testOverlay: HTMLElement | null = null;
+  private dashboard: HTMLElement | null = null;
+
+  constructor() {
+    this.testBg = document.getElementById('test-bg');
+    this.testName = document.getElementById('test-name');
+    this.testDescription = document.getElementById('test-description');
+    this.progressBar = document.querySelector('.sc-progress-bar');
+    this.testOverlay = document.getElementById('test-overlay');
+    this.dashboard = document.getElementById('dashboard');
+  }
+
+  start(gamut: 'srgb' | 'dcip3' = 'srgb') {
+    this.gamut = gamut;
+    this.tests = gamut === 'dcip3' ? DCIP3_TESTS : SRGB_TESTS;
+    this.currentTestIndex = 0;
+    this.currentColorIndex = 0;
+    this.showCurrentTest();
+    this.attachKeyboardListeners();
+  }
+
+  private showCurrentTest() {
+    const test = this.tests[this.currentTestIndex];
+    if (!test) return;
+
+    if (this.testName) {
+      this.testName.textContent = test.name;
+    }
+
+    if (this.testDescription) {
+      this.testDescription.textContent = test.instruction;
+    }
+
+    this.updateProgress();
+    this.displayColor();
+
+    const win = window as Record<string, unknown>;
+    if (win.updateTestUI) {
+      (win.updateTestUI as () => void)();
+    }
+  }
+
+  private displayColor() {
+    const test = this.tests[this.currentTestIndex];
+    if (!test || !this.testBg) return;
+
+    if (test.colors.length === 0) {
+      this.testBg.style.backgroundColor = '';
+      this.testBg.style.background =
+        'linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)';
+    } else {
+      this.testBg.style.background = '';
+      const color = test.colors[this.currentColorIndex % test.colors.length];
+      this.testBg.style.backgroundColor = color;
+    }
+  }
+
+  private updateProgress() {
+    const totalTests = this.tests.length;
+    const progress = ((this.currentTestIndex + 1) / totalTests) * 100;
+    if (this.progressBar) {
+      this.progressBar.style.width = `${progress}%`;
+    }
+  }
+
+  nextColor() {
+    const test = this.tests[this.currentTestIndex];
+
+    if (!test || test.colors.length === 0) {
+      this.nextTest();
+      return;
+    }
+
+    this.currentColorIndex++;
+
+    if (this.currentColorIndex >= test.colors.length) {
+      this.nextTest();
+    } else {
+      this.displayColor();
+    }
+  }
+
+  prevColor() {
+    const test = this.tests[this.currentTestIndex];
+
+    if (!test || test.colors.length === 0) {
+      if (this.currentTestIndex === 0) return;
+      this.currentTestIndex--;
+      this.currentColorIndex = 0;
+      this.showCurrentTest();
+      return;
+    }
+
+    this.currentColorIndex--;
+
+    if (this.currentColorIndex < 0) {
+      if (this.currentTestIndex === 0) {
+        this.currentColorIndex = 0;
+        return;
+      }
+      this.currentTestIndex--;
+      const prevTest = this.tests[this.currentTestIndex];
+      this.currentColorIndex = prevTest.colors.length - 1;
+      this.showCurrentTest();
+    } else {
+      this.displayColor();
+    }
+  }
+
+  nextTest() {
+    this.currentTestIndex++;
+    this.currentColorIndex = 0;
+
+    if (this.currentTestIndex >= this.tests.length) {
+      setTimeout(() => this.finish(), 300);
+    } else {
+      this.showCurrentTest();
+    }
+  }
+
+  reset() {
+    this.currentTestIndex = 0;
+    this.currentColorIndex = 0;
+    this.showCurrentTest();
+  }
+
+  finish() {
+    if (this.testOverlay) {
+      this.testOverlay.style.display = 'none';
+    }
+    if (this.testBg) {
+      this.testBg.style.backgroundColor = '';
+      this.testBg.style.background = '';
+    }
+    this.currentTestIndex = 0;
+    this.currentColorIndex = 0;
+  }
+
+  private attachKeyboardListeners() {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.code === 'Space') {
+        e.preventDefault();
+        this.nextColor();
+      } else if (e.key === 'r' || e.key === 'R') {
+        e.preventDefault();
+        this.reset();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.finish();
+        document.removeEventListener('keydown', handleKeydown);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeydown);
+  }
+}

package/src/tool/colorAccuracyTest/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { spectrumCanvas } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await spectrumCanvas.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/colorAccuracyTest/ui.ts

@@ -0,0 +1,27 @@
+export interface SpectrumCanvasUI extends Record<string, string> {
+  badge: string;
+  title: string;
+  description: string;
+  btnStartCalibration: string;
+  btnFullscreen: string;
+  kbdFullscreen: string;
+  kbdFullscreenLabel: string;
+  kbdReset: string;
+  kbdResetLabel: string;
+  kbdEsc: string;
+  kbdEscLabel: string;
+  gamutSRGB: string;
+  gamutDCIP3: string;
+  gamutToggle: string;
+  hardwareName: string;
+  hardwareNamePlaceholder: string;
+  purityTest: string;
+  gradientTest: string;
+  blackHoleTest: string;
+  whitePointTest: string;
+  colorCheckpoint: string;
+  generateReport: string;
+  viewResults: string;
+  btnExit: string;
+  compareSideBySide: string;
+}

package/src/tool/deadPixelTest/i18n/ru.ts

@@ -118,7 +118,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Это самый распространенный дефект. Он возникает, когда один или несколько субпикселей (красный, зеленый или синий) застревают во включенном состоянии. <strong>Симптом:</strong> вы увидите постоянно горящую цветную точку (красную, зеленую, синюю или белую) на темном фоне. <strong>Часто подлежит ремонту.</strong> Жидкий кристалл все еще реагирует; он просто «заблокирован» в определенной поляризации. Наш стробоскопический инструмент пытается разблокировать его с помощью быстрой стимуляции напряжением.',
+      html: 'Это самый распространенный дефект. Он возникает, когда один или несколько субпикселей (красный, зеленый или синий) застревают во включенном состоянии. <strong>Симптом:</strong> вы увидите постоянно горящую цветную точку (красную, зеленую, синюю или белую) на темном фоне. <strong>Часто подлежит ремонту.</strong> Жидкий кристалл все еще реагирует; он просто "заблокирован" в определенной поляризации. Наш стробоскопический инструмент пытается разблокировать его с помощью быстрой стимуляции напряжением.',
     },
     {
       type: 'title',
@@ -136,7 +136,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Функция «Ремонт пикселя» использует метод, известный как <strong>Pixel Exercising</strong> (тренировка пикселей). Она генерирует высокочастотный шаблон случайного шума (быстрое мигание цветов) над пораженной областью.',
+      html: 'Функция "Ремонт пикселя" использует метод, известный как <strong>Pixel Exercising</strong> (тренировка пикселей). Она генерирует высокочастотный шаблон случайного шума (быстрое мигание цветов) над пораженной областью.',
     },
     {
       type: 'title',
@@ -145,7 +145,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: 'В ЖК-мониторах используются жидкие кристаллы, которые меняют свою прозрачность в зависимости от приложенного напряжения. Когда субпиксель застревает, это означает, что кристалл «застыл» в определенной поляризации. Быстрые изменения напряжения (достигаемые за счет быстрой смены основных цветов) пытаются «размять» кристалл и заставить его сменить состояние.',
+      html: 'В ЖК-мониторах используются жидкие кристаллы, которые меняют свою прозрачность в зависимости от приложенного напряжения. Когда субпиксель застревает, это означает, что кристалл "застыл" в определенной поляризации. Быстрые изменения напряжения (достигаемые за счет быстрой смены основных цветов) пытаются "размять" кристалл и заставить его сменить состояние.',
     },
     {
       type: 'title',
@@ -154,7 +154,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: '<ul><li>Рекомендуется запускать инструмент над пораженной областью в течение как минимум <strong>10–20 минут</strong>.</li><li>Если это не помогло, попробуйте более длительные сеансы (до 1 часа) или попробуйте очень осторожно надавить на пиксель салфеткой из микрофибры (на ваш страх и риск).</li><li>В некоторых случаях легкий прогрев монитора феном (на низкой температуре) перед активацией стробоскопа улучшает результаты.</li></ul>',
+      html: '<ul><li>Рекомендуется запускать инструмент над пораженной областью в течение как минимум <strong>10-20 минут</strong>.</li><li>Если это не помогло, попробуйте более длительные сеансы (до 1 часа) или попробуйте очень осторожно надавить на пиксель салфеткой из микрофибры (на ваш страх и риск).</li><li>В некоторых случаях легкий прогрев монитора феном (на низкой температуре) перед активацией стробоскопа улучшает результаты.</li></ul>',
     },
     {
       type: 'title',
@@ -172,7 +172,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Если вы подтвердили наличие дефектных пикселей (особенно нескольких битых пикселей), вы можете использовать наш тест как доказательство для гарантийных претензий. Многие производители считают более 2–3 ярких пикселей или 1 битый пиксель производственным браком, дающим право на замену в соответствии со стандартом ISO 9241-307 (класс 1).',
+      html: 'Если вы подтвердили наличие дефектных пикселей (особенно нескольких битых пикселей), вы можете использовать наш тест как доказательство для гарантийных претензий. Многие производители считают более 2-3 ярких пикселей или 1 битый пиксель производственным браком, дающим право на замену в соответствии со стандартом ISO 9241-307 (класс 1).',
     },
     {
       type: 'title',
@@ -181,7 +181,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: 'На протяжении десятилетий ЖК-мониторы страдали от дефектов пикселей из-за сложности производства. Панель Full HD (1920×1080) содержит 6 220 800 пикселей (18 662 400 субпикселей). Статистическая вероятность возникновения дефектов неизбежна. Вот почему существуют такие стандарты, как ISO 9241-307, определяющие «допустимые битые пиксели» в зависимости от класса монитора.',
+      html: 'На протяжении десятилетий ЖК-мониторы страдали от дефектов пикселей из-за сложности производства. Панель Full HD (1920×1080) содержит 6 220 800 пикселей (18 662 400 субпикселей). Статистическая вероятность возникновения дефектов неизбежна. Вот почему существуют такие стандарты, как ISO 9241-307, определяющие "допустимые битые пиксели" в зависимости от класса монитора.',
     },
   ],
   ui: {

package/src/tool/deadPixelTest/i18n/sv.ts

@@ -172,7 +172,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Om du bekräftar defekta pixlar (särskilt flera döda pixlar) kan du använda vårt test som bevis vid garantianspråk. Många tillverkare anser att fler än 2–3 ljusa pixlar eller 1 död pixel är ett tillverkningsfel som berättigar till utbyte enligt ISO 9241-307 (Klass 1)-standarden.',
+      html: 'Om du bekräftar defekta pixlar (särskilt flera döda pixlar) kan du använda vårt test som bevis vid garantianspråk. Många tillverkare anser att fler än 2-3 ljusa pixlar eller 1 död pixel är ett tillverkningsfel som berättigar till utbyte enligt ISO 9241-307 (Klass 1)-standarden.',
     },
     {
       type: 'title',

package/src/tool/deadPixelTest/i18n/zh.ts

@@ -27,7 +27,7 @@ const faqData = [
   {
     question: '保修范围涵盖多少个坏点？',
     answer:
-      '这取决于制造商和 ISO 9241-307 标准。通常，品牌认为对于 1 级面板，最多 2 到 3 个亮点是“正常”的，而 0 级面板则不允许有任何坏点。',
+      '这取决于制造商和 ISO 9241-307 标准。通常，品牌认为对于 1 级面板，最多 2 到 3 个亮点是"正常"的，而 0 级面板则不允许有任何坏点。',
   },
 ];
 
@@ -118,7 +118,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: '这是最常见的缺陷。它发生在红、绿、蓝子像素中的一个或多个卡在“开启”状态时。<strong>症状：</strong>在深色背景下，你会看到一个永久发光的色点（红、绿、蓝或白色）。<strong>通常是可修复的。</strong>液晶仍然有反应，只是被“锁”在特定的偏振状态。我们的 Strobe 修复工具尝试通过快速电压刺激来解锁它。',
+      html: '这是最常见的缺陷。它发生在红、绿、蓝子像素中的一个或多个卡在"开启"状态时。<strong>症状：</strong>在深色背景下，你会看到一个永久发光的色点（红、绿、蓝或白色）。<strong>通常是可修复的。</strong>液晶仍然有反应，只是被"锁"在特定的偏振状态。我们的 Strobe 修复工具尝试通过快速电压刺激来解锁它。',
     },
     {
       type: 'title',
@@ -136,7 +136,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: '“修复像素”功能使用了一种被称为 <strong>Pixel Exercising</strong>（像素锻炼）的技术。它在受影响的区域产生高频随机噪声模式（颜色快速闪烁）。',
+      html: '"修复像素"功能使用了一种被称为 <strong>Pixel Exercising</strong>（像素锻炼）的技术。它在受影响的区域产生高频随机噪声模式（颜色快速闪烁）。',
     },
     {
       type: 'title',
@@ -145,7 +145,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: '液晶显示器使用液晶，其透明度根据施加的电压而改变。当一个子像素卡住时，意味着液晶“冻结”在特定的偏振状态。快速的电压变化（通过快速切换原色实现）尝试“锻炼”液晶并迫使它改变状态。',
+      html: '液晶显示器使用液晶，其透明度根据施加的电压而改变。当一个子像素卡住时，意味着液晶"冻结"在特定的偏振状态。快速的电压变化（通过快速切换原色实现）尝试"锻炼"液晶并迫使它改变状态。',
     },
     {
       type: 'title',
@@ -181,7 +181,7 @@ export const content: ToolLocaleContent<PixelesPantallaUI> = {
     },
     {
       type: 'paragraph',
-      html: '几十年来，由于制造的复杂性，液晶显示器一直存在像素缺陷。一个全高清面板（1920×1080）包含 6,220,800 个像素（18,662,400 个子像素）。统计上的缺陷概率是不可避免的。这就是为什么存在 ISO 9241-307 等标准，来根据显示器级别定义“可接受的死点”数量。',
+      html: '几十年来，由于制造的复杂性，液晶显示器一直存在像素缺陷。一个全高清面板（1920×1080）包含 6,220,800 个像素（18,662,400 个子像素）。统计上的缺陷概率是不可避免的。这就是为什么存在 ISO 9241-307 等标准，来根据显示器级别定义"可接受的死点"数量。',
     },
   ],
   ui: {

package/src/tool/gamepadTest/gamepad-test.css

@@ -20,7 +20,15 @@
   --tm-stick-border: #64748b;
 
   width: 100%;
+  max-width: 100%;
   color: var(--tm-text);
+  overflow-x: clip;
+}
+
+.tm-wrapper *,
+.tm-wrapper *::before,
+.tm-wrapper *::after {
+  box-sizing: border-box;
 }
 
 .theme-dark .tm-wrapper {
@@ -103,6 +111,8 @@ body.is-widget .tm-wrapper {
       padding: 2rem;
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
       border: 1px solid var(--tm-border);
+      max-width: 100%;
+      overflow: hidden;
     }
 
     .tm-card-header {
@@ -148,24 +158,28 @@ body.is-widget .tm-wrapper {
       flex-direction: column;
       align-items: center;
       gap: 1rem;
+      width: 100%;
+      overflow: hidden;
     }
 
     .tm-stage {
       position: relative;
       width: 600px;
       height: 420px;
+      flex: 0 0 600px;
+      transform-origin: top center;
       transition: all 500ms;
     }
 
     .tm-stage-inactive {
       opacity: 0.25;
       filter: grayscale(1);
-      transform: scale(0.9);
+      transform: scale(var(--tm-stage-scale, 1));
     }
 
     @media (min-width: 640px) {
       .tm-stage-inactive {
-        transform: scale(1);
+        transform: scale(var(--tm-stage-scale, 1));
       }
     }
 
@@ -460,6 +474,7 @@ body.is-widget .tm-wrapper {
       font-size: 0.75rem;
       color: var(--tm-text-muted);
       transition: opacity 500ms;
+      min-width: 0;
     }
 
     .tm-info-inactive { opacity: 0.5; }
@@ -468,6 +483,7 @@ body.is-widget .tm-wrapper {
     .tm-info-right {
       display: flex;
       gap: 1rem;
+      min-width: 0;
     }
 
     .tm-gp-id {
@@ -630,6 +646,7 @@ body.is-widget .tm-wrapper {
       justify-content: center;
       border: 1px solid rgba(255, 255, 255, 0.05);
       color: white;
+      max-width: 100%;
     }
 
     .tm-game-intro {
@@ -732,6 +749,7 @@ body.is-widget .tm-wrapper {
       align-items: center;
       width: 100%;
       margin-bottom: 3rem;
+      gap: 1rem;
     }
 
     .tm-hud-item {
@@ -783,6 +801,7 @@ body.is-widget .tm-wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
+      max-width: 100%;
     }
 
     .tm-target-ring {
@@ -852,6 +871,8 @@ body.is-widget .tm-wrapper {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 9999px;
       border: 1px solid rgba(255, 255, 255, 0.1);
+      max-width: 100%;
+      text-align: center;
     }
 
     .tm-instruction-dot {
@@ -922,6 +943,153 @@ body.is-widget .tm-wrapper {
       justify-content: center;
     }
 
+    @media (max-width: 700px) {
+      .tm-container {
+        padding: 0;
+        gap: 1.25rem;
+      }
+
+      .tm-card,
+      .tm-game-card {
+        border-radius: 0.875rem;
+        padding: 1rem;
+      }
+
+      .tm-card-header {
+        margin-bottom: 1.25rem;
+      }
+
+      .tm-title {
+        font-size: 1.5rem;
+      }
+
+      .tm-stage-wrapper {
+        --tm-stage-scale: 0.9;
+
+        min-height: calc(420px * var(--tm-stage-scale));
+      }
+
+      .tm-stage {
+        transform: scale(var(--tm-stage-scale));
+        margin-bottom: calc((420px * var(--tm-stage-scale)) - 420px);
+      }
+
+      .tm-info-bar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5rem;
+        padding-top: 0.75rem;
+      }
+
+      .tm-info-left,
+      .tm-info-right {
+        justify-content: space-between;
+        gap: 0.5rem;
+      }
+
+      .tm-vibration-panel,
+      .tm-log-section {
+        margin-top: 1rem;
+        border-radius: 0.75rem;
+        padding: 0.875rem;
+      }
+
+      .tm-vibration-btns,
+      .tm-results-btns {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+      }
+
+      .tm-vib-btn,
+      .tm-restart-btn,
+      .tm-share-btn {
+        width: 100%;
+      }
+
+      .tm-game-card {
+        min-height: 420px;
+      }
+
+      .tm-game-icon {
+        width: 4rem;
+        height: 4rem;
+        margin-bottom: 1rem;
+      }
+
+      .tm-game-intro-title {
+        font-size: 1.65rem;
+      }
+
+      .tm-game-intro-desc {
+        margin-bottom: 1.5rem;
+        font-size: 0.95rem;
+      }
+
+      .tm-game-start-btn {
+        width: 100%;
+        padding: 1rem;
+        font-size: 1rem;
+      }
+
+      .tm-game-hud {
+        margin-bottom: 1.5rem;
+      }
+
+      .tm-hud-label {
+        font-size: 0.55rem;
+      }
+
+      .tm-hud-value {
+        font-size: 1.5rem;
+      }
+
+      .tm-target-container {
+        width: min(15rem, 78vw);
+        height: min(15rem, 78vw);
+      }
+
+      .tm-target-btn {
+        width: min(8rem, 45vw);
+        height: min(8rem, 45vw);
+        font-size: 2.5rem;
+      }
+
+      .tm-game-instruction {
+        margin-top: 1.5rem;
+        border-radius: 0.75rem;
+        padding: 0.75rem 1rem;
+      }
+
+      .tm-final-score {
+        font-size: 4rem;
+      }
+    }
+
+    @media (max-width: 560px) {
+      .tm-stage-wrapper {
+        --tm-stage-scale: 0.82;
+      }
+    }
+
+    @media (max-width: 500px) {
+      .tm-stage-wrapper {
+        --tm-stage-scale: 0.72;
+      }
+    }
+
+    @media (max-width: 440px) {
+      .tm-stage-wrapper {
+        --tm-stage-scale: 0.62;
+      }
+    }
+
+    @media (max-width: 380px) {
+      .tm-stage-wrapper {
+        --tm-stage-scale: 0.54;
+      }
+    }
+
     @media (min-width: 640px) {
       .tm-results-btns { flex-direction: row; }
     }
@@ -964,4 +1132,4 @@ body.is-widget .tm-wrapper {
 
     @keyframes pulse {
       50% { opacity: 0.5; }
-    }
+    }

package/src/tool/gamepadTest/i18n/es.ts

@@ -158,16 +158,16 @@ export const content: ToolLocaleContent<TestMandoUI> = {
     gamePress: 'PULSA',
     rankLegendaryName: 'LEGENDARIO',
     rankLegendaryDesc: 'Tus dedos se mueven a la velocidad del sonido.',
-    rankLegendaryFlavor: 'Mi mando vuela!',
+    rankLegendaryFlavor: '¡Mi mando vuela!',
     rankProName: 'PRO GAMER',
     rankProDesc: 'Tienes reflejos de acero y un mando bien calibrado.',
-    rankProFlavor: 'Mi mando vuela!',
+    rankProFlavor: '¡Mi mando vuela!',
     rankGamerName: 'GAMER',
     rankGamerDesc: 'No está mal, pero para el competitivo te falta calle.',
-    rankGamerFlavor: 'Casi lo tengo!',
+    rankGamerFlavor: '¡Casi lo tengo!',
     rankNoobName: 'MANCO',
     rankNoobDesc: '¿Seguro que tienes el mando encendido?',
-    rankNoobFlavor: 'El mando me tiene manía!',
+    rankNoobFlavor: '¡El mando me tiene manía!',
     gameShareText: '¿Me superas?',
     gameShareScorePrefix: 'Hice',
     gameShareScoreSuffix: 'aciertos',

package/src/tool/gamepadTest/i18n/ru.ts

@@ -14,7 +14,7 @@ const faqData = [
   },
   {
     question: 'Как исправить дрифт программно?',
-    answer: 'Если дрифт незначительный, вы можете настроить увеличенную «Мертвую зону» (Deadzone) в настройках игры. Это позволит игнорировать небольшие движения стика в центре.',
+    answer: 'Если дрифт незначительный, вы можете настроить увеличенную "Мертвую зону" (Deadzone) в настройках игры. Это позволит игнорировать небольшие движения стика в центре.',
   },
   {
     question: 'Совместим ли тест с контроллерами PS5, Xbox и Switch?',
@@ -104,7 +104,7 @@ export const content: ToolLocaleContent<TestMandoUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Дрифт — это распространенный дефект аналоговых стиков, при котором регистрируется движение без прикосновения к джойстику. Это вызвано износом внутренних потенциометров.',
+      html: 'Дрифт -это распространенный дефект аналоговых стиков, при котором регистрируется движение без прикосновения к джойстику. Это вызвано износом внутренних потенциометров.',
     },
     {
       type: 'title',