@jjlmoya/utils-hardware 1.1.0

package/src/tool/gamepadTest/component.astro

@@ -0,0 +1,1419 @@
+---
+import type { KnownLocale } from '../../types';
+import type { TestMandoUI } from './ui';
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as TestMandoUI;
+---
+
+<div id="gamepad-root" class="tm-wrapper"
+  data-s={JSON.stringify({c:t.gameLogConnected,cm:t.connectionMessage,d:t.gameLogDisconnected,cl:t.gameLogCleared,bp:t.gameLogBtnPrefix,vn:t.gameVibNotSupported,vl:t.gameVibLow,vh:t.gameVibHigh,ms:t.gameMoveStick,pr:t.gamePress,rln:t.rankLegendaryName,rld:t.rankLegendaryDesc,rlf:t.rankLegendaryFlavor,rpn:t.rankProName,rpd:t.rankProDesc,rpf:t.rankProFlavor,rgn:t.rankGamerName,rgd:t.rankGamerDesc,rgf:t.rankGamerFlavor,rnn:t.rankNoobName,rnd:t.rankNoobDesc,rnf:t.rankNoobFlavor,gst:t.gameShareText,gsp:t.gameShareScorePrefix,gss:t.gameShareScoreSuffix,gt:t.gameShareTitle})}>
+  <style is:global>
+    .tm-wrapper {
+      --tm-accent: #4f46e5;
+      --tm-accent-glow: rgba(79, 70, 229, 0.4);
+      --tm-surface: #fff;
+      --tm-surface-alt: #f8fafc;
+      --tm-surface-dark: #020617;
+      --tm-border: #e2e8f0;
+      --tm-text: #0f172a;
+      --tm-text-muted: #64748b;
+      --tm-btn-bg: #f1f5f9;
+      --tm-btn-border: #cbd5e1;
+      --tm-active: #0ea5e9;
+      --tm-active-glow: rgba(14, 165, 233, 0.5);
+      --tm-success: #10b981;
+      --tm-danger: #f43f5e;
+      --tm-kb-bg: #1e293b;
+      --tm-kb-border: #334155;
+      --tm-stick-base: #475569;
+      --tm-stick-cap: #334155;
+      --tm-stick-border: #64748b;
+    }
+
+    .theme-dark .tm-wrapper {
+      --tm-surface: #0f172a;
+      --tm-surface-alt: #1e293b;
+      --tm-border: #334155;
+      --tm-text: #f1f5f9;
+      --tm-text-muted: #94a3b8;
+      --tm-btn-bg: #1e293b;
+      --tm-btn-border: #475569;
+      --tm-kb-bg: #020617;
+      --tm-kb-border: #1e293b;
+      --tm-stick-base: #0f172a;
+      --tm-stick-cap: #475569;
+      --tm-stick-border: #334155;
+    }
+
+    body.is-widget .tm-wrapper {
+      padding: 0;
+    }
+
+    .tm-active-btn {
+      background-color: var(--tm-active);
+      border-color: var(--tm-active);
+      color: white;
+      box-shadow: 0 0 18px var(--tm-active-glow), 0 0 36px var(--tm-active-glow);
+      transform: scale(0.88);
+    }
+
+    .tm-active-dpad {
+      background-color: var(--tm-active);
+      box-shadow: 0 0 14px var(--tm-active-glow);
+    }
+
+    .tm-active-stick-cap {
+      background-color: var(--tm-active);
+      border-color: #7dd3fc;
+      box-shadow: 0 0 18px var(--tm-active-glow);
+    }
+
+    .tm-target-pop {
+      animation: tm-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    }
+
+    @keyframes tm-pop {
+      0% {
+        transform: scale(0) rotate(-10deg);
+        opacity: 0;
+      }
+      100% {
+        transform: scale(1) rotate(0deg);
+        opacity: 1;
+      }
+    }
+
+    .tm-shake {
+      animation: tm-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    }
+
+    @keyframes tm-shake {
+      10%, 90% { transform: translate3d(-1px, 0, 0); }
+      20%, 80% { transform: translate3d(2px, 0, 0); }
+      30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+      40%, 60% { transform: translate3d(4px, 0, 0); }
+    }
+  </style>
+
+  <div class="tm-container">
+
+    <div class="tm-card">
+      <div class="tm-card-header">
+        <div class="tm-badge">
+          <Icon name="mdi:gamepad-variant" class="tm-badge-icon" />
+          {t.badge}
+        </div>
+        <h2 class="tm-title">{t.title}</h2>
+        <p class="tm-description" id="connection-msg">{t.connectionMessage}</p>
+      </div>
+
+      <div class="tm-stage-wrapper">
+        <div id="gamepad-stage" class="tm-stage tm-stage-inactive">
+
+          <div class="tm-trigger tm-trigger-left">
+            <div class="tm-trigger-bar-track">
+              <div id="bar-6" class="tm-trigger-bar"></div>
+            </div>
+            <div id="btn-6" class="tm-trigger-btn"></div>
+            <span class="tm-trigger-label">LT / L2</span>
+          </div>
+
+          <div class="tm-trigger tm-trigger-right">
+            <div class="tm-trigger-bar-track">
+              <div id="bar-7" class="tm-trigger-bar"></div>
+            </div>
+            <div id="btn-7" class="tm-trigger-btn"></div>
+            <span class="tm-trigger-label">RT / R2</span>
+          </div>
+
+          <div id="btn-4" class="tm-shoulder tm-shoulder-left">LB</div>
+          <div id="btn-5" class="tm-shoulder tm-shoulder-right">RB</div>
+
+          <div class="tm-left-cluster">
+            <div class="tm-stick-base">
+              <div id="stick-left" class="tm-stick-cap">
+                <div id="btn-10" class="tm-stick-press"></div>
+              </div>
+            </div>
+            <div class="tm-dpad">
+              <div id="btn-12" class="tm-dpad-up"></div>
+              <div id="btn-13" class="tm-dpad-down"></div>
+              <div id="btn-14" class="tm-dpad-left"></div>
+              <div id="btn-15" class="tm-dpad-right"></div>
+              <div class="tm-dpad-center"></div>
+            </div>
+          </div>
+
+          <div class="tm-right-cluster">
+            <div class="tm-face-buttons">
+              <div id="btn-3" class="tm-face-btn">Y</div>
+              <div id="btn-1" class="tm-face-btn">B</div>
+              <div id="btn-0" class="tm-face-btn">A</div>
+              <div id="btn-2" class="tm-face-btn">X</div>
+            </div>
+          </div>
+
+          <div class="tm-stick-right">
+            <div class="tm-stick-base">
+              <div id="stick-right" class="tm-stick-cap">
+                <div id="btn-11" class="tm-stick-press"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="tm-center-buttons">
+            <div id="btn-8" class="tm-center-btn">SEL</div>
+            <div id="btn-9" class="tm-center-btn">STA</div>
+          </div>
+
+          <div id="btn-16" class="tm-power-btn">
+            <Icon name="mdi:power" class="tm-power-icon" />
+          </div>
+        </div>
+
+        <div id="info-bar" class="tm-info-bar tm-info-inactive">
+          <div class="tm-info-left">
+            <span>ID: <strong id="gp-index">--</strong></span>
+            <span id="gp-id" class="tm-gp-id">No device</span>
+          </div>
+          <div class="tm-info-right">
+            <span>{t.axisLabel}: <span id="axis-count">0</span></span>
+            <span>{t.buttonsLabel}: <span id="btn-count">0</span></span>
+          </div>
+        </div>
+      </div>
+
+      <div id="vibration-panel" class="tm-vibration-panel tm-vibration-inactive">
+        <div class="tm-vibration-info">
+          <h3 class="tm-vibration-title">
+            <Icon name="mdi:vibrate" class="tm-vibration-icon" />
+            {t.vibrationTitle}
+          </h3>
+          <p class="tm-vibration-desc">{t.vibrationDescription}</p>
+        </div>
+        <div class="tm-vibration-btns">
+          <button id="vib-low" class="tm-vib-btn">{t.vibrationLow}</button>
+          <button id="vib-high" class="tm-vib-btn">{t.vibrationHigh}</button>
+        </div>
+      </div>
+
+      <div class="tm-log-section">
+        <div class="tm-log-header">
+          <span class="tm-log-title">{t.eventHistoryTitle}</span>
+          <button id="clear-log" class="tm-log-clear">{t.eventHistoryClear}</button>
+        </div>
+        <div id="debug-log" class="tm-log">
+          <div class="tm-log-waiting">{t.eventWaiting}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tm-game-card">
+      <div id="game-intro" class="tm-game-intro">
+        <div class="tm-game-icon">
+          <Icon name="mdi:controller" class="tm-game-icon-svg" />
+        </div>
+        <h2 class="tm-game-intro-title">{t.gameIntroTitlePre}<span class="tm-game-highlight">{t.gameIntroHighlight}</span>{t.gameIntroTitlePost}</h2>
+        <p class="tm-game-intro-desc">
+          {t.gameIntroDescPre}<strong>{t.gameIntroDescSeconds}</strong>{t.gameIntroDescPost}
+        </p>
+        <button id="start-game-btn" class="tm-game-start-btn">{t.gameStartBtn}</button>
+        <div id="game-controller-warning" class="tm-game-warning">
+          <Icon name="mdi:alert-circle" class="tm-game-warning-icon" />
+          {t.gameControllerWarning}
+        </div>
+      </div>
+
+      <div id="game-play" class="tm-game-play" style="display:none">
+        <div class="tm-game-hud">
+          <div class="tm-hud-item">
+            <span class="tm-hud-label">{t.gameTimer}</span>
+            <div class="tm-hud-value tm-hud-timer" id="game-timer">30.0s</div>
+          </div>
+          <div class="tm-hud-progress">
+            <div id="game-progress-bar" class="tm-progress-bar"></div>
+          </div>
+          <div class="tm-hud-item tm-hud-right">
+            <span class="tm-hud-label">{t.gameScore}</span>
+            <div class="tm-hud-value" id="game-score">000</div>
+          </div>
+        </div>
+
+        <div id="target-container" class="tm-target-container">
+          <div class="tm-target-ring"></div>
+          <div class="tm-target-ring-inner"></div>
+          <div id="target-button" class="tm-target-btn tm-target-hidden">
+            <span id="target-label">?</span>
+            <span id="target-sub" class="tm-target-sub">PRESS</span>
+          </div>
+          <div id="hit-flash" class="tm-flash tm-flash-hit"></div>
+          <div id="miss-flash" class="tm-flash tm-flash-miss"></div>
+        </div>
+
+        <div class="tm-game-instruction">
+          <div class="tm-instruction-dot"></div>
+          <span id="game-instruction">{t.gameInstruction}</span>
+        </div>
+      </div>
+
+      <div id="game-results" class="tm-game-results" style="display:none">
+        <div class="tm-trophy-wrapper">
+          <Icon name="mdi:trophy" class="tm-trophy" />
+          <div class="tm-new-record">{t.gameNewRecord}</div>
+        </div>
+        <h2 class="tm-results-title">{t.gameCompleted}</h2>
+        <div class="tm-final-score" id="final-score">0</div>
+        <p class="tm-game-result-feedback" id="game-feedback">{t.gameFeedback}</p>
+        <div class="tm-results-btns">
+          <button id="restart-game-btn" class="tm-restart-btn">{t.gameRestartBtn}</button>
+          <button id="share-btn" class="tm-share-btn">{t.gameShareBtn}</button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <style>
+    .tm-wrapper {
+      width: 100%;
+      color: var(--tm-text);
+    }
+
+    .tm-container {
+      max-width: 56rem;
+      margin: 0 auto;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 3rem;
+    }
+
+    .tm-card {
+      background: var(--tm-surface);
+      border-radius: 1.5rem;
+      padding: 2rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+      border: 1px solid var(--tm-border);
+    }
+
+    .tm-card-header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .tm-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.25rem 0.75rem;
+      border-radius: 9999px;
+      background-color: rgba(79, 70, 229, 0.1);
+      color: var(--tm-accent);
+      font-size: 0.75rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.75rem;
+    }
+
+    .tm-badge-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .tm-title {
+      font-size: 1.875rem;
+      font-weight: 900;
+      letter-spacing: -0.02em;
+      margin: 0 0 0.25rem;
+    }
+
+    .tm-description {
+      font-size: 0.9375rem;
+      color: var(--tm-text-muted);
+      margin: 0;
+    }
+
+    .tm-stage-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .tm-stage {
+      position: relative;
+      width: 600px;
+      height: 420px;
+      transition: all 500ms;
+    }
+
+    .tm-stage-inactive {
+      opacity: 0.25;
+      filter: grayscale(1);
+      transform: scale(0.9);
+    }
+
+    @media (min-width: 640px) {
+      .tm-stage-inactive {
+        transform: scale(1);
+      }
+    }
+
+    .tm-trigger {
+      position: absolute;
+      top: 0;
+      width: 8rem;
+      height: 4rem;
+      background: var(--tm-btn-bg);
+      border-radius: 0.75rem 0.75rem 0 0;
+      border: 1px solid var(--tm-btn-border);
+      border-bottom: none;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding: 0.5rem;
+    }
+
+    .tm-trigger-left { left: 2rem; }
+    .tm-trigger-right { right: 2rem; }
+
+    .tm-trigger-label {
+      position: absolute;
+      top: -1.5rem;
+      font-size: 0.625rem;
+      font-weight: 700;
+      color: var(--tm-text-muted);
+    }
+
+    .tm-trigger-left .tm-trigger-label { left: 0; }
+    .tm-trigger-right .tm-trigger-label { right: 0; }
+
+    .tm-trigger-bar-track {
+      width: 100%;
+      background: var(--tm-border);
+      height: 0.5rem;
+      border-radius: 9999px;
+      overflow: hidden;
+    }
+
+    .tm-trigger-bar {
+      height: 100%;
+      background: var(--tm-active);
+      width: 0;
+      transition: width 50ms;
+    }
+
+    .tm-trigger-btn {
+      margin-top: 0.5rem;
+      width: 100%;
+      height: 2rem;
+      border-radius: 0.5rem;
+      border: 2px solid var(--tm-btn-border);
+      transition: all 150ms;
+    }
+
+    .tm-shoulder {
+      position: absolute;
+      top: 5rem;
+      width: 8rem;
+      height: 2.5rem;
+      background: var(--tm-surface);
+      border-radius: 0.5rem;
+      border: 2px solid var(--tm-btn-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 700;
+      color: var(--tm-btn-border);
+      transition: all 150ms;
+    }
+
+    .tm-shoulder-left { left: 2rem; }
+    .tm-shoulder-right { right: 2rem; }
+
+    .tm-left-cluster {
+      position: absolute;
+      top: 8rem;
+      left: 4rem;
+      width: 12rem;
+      height: 12rem;
+    }
+
+    .tm-stick-base {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 6rem;
+      height: 6rem;
+      background: var(--tm-stick-base);
+      border-radius: 9999px;
+      border: 2px solid var(--tm-stick-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
+    }
+
+    .tm-left-cluster .tm-stick-base {
+      top: 0;
+      left: 0;
+    }
+
+    .tm-stick-cap {
+      width: 3.5rem;
+      height: 3.5rem;
+      background: var(--tm-stick-cap);
+      border-radius: 9999px;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.5);
+      position: relative;
+      will-change: transform;
+      transition: background 150ms, box-shadow 150ms;
+    }
+
+    .tm-stick-press {
+      width: 100%;
+      height: 100%;
+      border-radius: 9999px;
+      border: 4px solid transparent;
+      transition: border-color 150ms;
+    }
+
+    .tm-dpad {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 6rem;
+      height: 6rem;
+    }
+
+    .tm-dpad-up,
+    .tm-dpad-down,
+    .tm-dpad-left,
+    .tm-dpad-right {
+      position: absolute;
+      width: 2rem;
+      height: 2rem;
+      border-radius: 0.25rem;
+      background: var(--tm-btn-bg);
+      border: 2px solid var(--tm-btn-border);
+      transition: all 150ms;
+    }
+
+    .tm-dpad-up {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .tm-dpad-down {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .tm-dpad-left {
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .tm-dpad-right {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .tm-dpad-center {
+      position: absolute;
+      inset: 2rem;
+      background: var(--tm-btn-bg);
+      border-radius: 0.25rem;
+    }
+
+    .tm-right-cluster {
+      position: absolute;
+      top: 8rem;
+      right: 4rem;
+      width: 6rem;
+      height: 6rem;
+    }
+
+    .tm-stick-right {
+      position: absolute;
+      bottom: 12rem;
+      right: 16rem;
+    }
+
+    .tm-face-buttons {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 6rem;
+      height: 6rem;
+    }
+
+    .tm-face-btn {
+      position: absolute;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 9999px;
+      border: 2px solid var(--tm-btn-border);
+      background: var(--tm-surface);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 0.75rem;
+      color: var(--tm-btn-border);
+      transition: all 150ms;
+    }
+
+    #btn-3 {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #eab308;
+      border-color: rgba(234, 179, 8, 0.6);
+    }
+    #btn-1 {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #f43f5e;
+      border-color: rgba(244, 63, 94, 0.6);
+    }
+    #btn-0 {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #10b981;
+      border-color: rgba(16, 185, 129, 0.6);
+    }
+    #btn-2 {
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #0ea5e9;
+      border-color: rgba(14, 165, 233, 0.6);
+    }
+
+    .tm-center-buttons {
+      position: absolute;
+      top: 10rem;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 1.5rem;
+    }
+
+    .tm-center-btn {
+      width: 2rem;
+      height: 2rem;
+      border-radius: 9999px;
+      background: var(--tm-btn-bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.625rem;
+      font-weight: 700;
+      color: var(--tm-text-muted);
+      transition: all 150ms;
+    }
+
+    .tm-power-btn {
+      position: absolute;
+      top: 6rem;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 3rem;
+      height: 3rem;
+      border-radius: 9999px;
+      border: 4px solid var(--tm-btn-bg);
+      background: var(--tm-surface);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 150ms;
+    }
+
+    .tm-power-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      color: var(--tm-btn-border);
+    }
+
+    .tm-info-bar {
+      width: 100%;
+      padding-top: 1.5rem;
+      border-top: 1px solid var(--tm-border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.75rem;
+      color: var(--tm-text-muted);
+      transition: opacity 500ms;
+    }
+
+    .tm-info-inactive { opacity: 0.5; }
+
+    .tm-info-left,
+    .tm-info-right {
+      display: flex;
+      gap: 1rem;
+    }
+
+    .tm-gp-id {
+      display: none;
+    }
+
+    @media (min-width: 768px) {
+      .tm-gp-id { display: inline; }
+    }
+
+    .tm-vibration-panel {
+      margin-top: 2rem;
+      background: var(--tm-surface-alt);
+      border-radius: 1rem;
+      padding: 1.5rem;
+      border: 1px solid var(--tm-border);
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      transition: opacity 500ms;
+    }
+
+    @media (min-width: 768px) {
+      .tm-vibration-panel {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+
+    .tm-vibration-inactive {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .tm-vibration-title {
+      font-size: 0.9375rem;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0 0 0.25rem;
+    }
+
+    .tm-vibration-icon {
+      width: 1.25rem;
+      height: 1.25rem;
+      color: #d946ef;
+    }
+
+    .tm-vibration-desc {
+      font-size: 0.75rem;
+      color: var(--tm-text-muted);
+      margin: 0;
+    }
+
+    .tm-vibration-btns {
+      display: flex;
+      gap: 1rem;
+    }
+
+    .tm-vib-btn {
+      padding: 0.5rem 1rem;
+      background: var(--tm-surface);
+      border: 1px solid var(--tm-btn-border);
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 700;
+      cursor: pointer;
+      color: var(--tm-text);
+      transition: all 150ms;
+    }
+
+    .tm-vib-btn:hover {
+      border-color: var(--tm-accent);
+      color: var(--tm-accent);
+    }
+
+    .tm-log-section {
+      margin-top: 2rem;
+      background: var(--tm-surface-alt);
+      border-radius: 1rem;
+      padding: 1rem;
+      border: 1px solid var(--tm-border);
+    }
+
+    .tm-log-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+
+    .tm-log-title {
+      font-size: 0.75rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--tm-text-muted);
+      letter-spacing: 0.1em;
+    }
+
+    .tm-log-clear {
+      font-size: 0.625rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--tm-text-muted);
+    }
+
+    .tm-log-clear:hover {
+      color: var(--tm-active);
+    }
+
+    .tm-log {
+      height: 10rem;
+      overflow-y: auto;
+      font-size: 0.75rem;
+      color: var(--tm-text-muted);
+      background: var(--tm-kb-bg);
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      border: 1px solid var(--tm-kb-border);
+      scrollbar-width: thin;
+      scrollbar-color: var(--tm-border) transparent;
+    }
+
+    .tm-log::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    .tm-log::-webkit-scrollbar-thumb {
+      background: var(--tm-border);
+      border-radius: 2px;
+    }
+
+    .tm-log-waiting {
+      font-style: italic;
+      opacity: 0.5;
+      color: var(--tm-text-muted);
+    }
+
+    .tm-log div {
+      line-height: 1.8;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      padding-bottom: 0.125rem;
+    }
+
+    .tm-game-card {
+      background: var(--tm-surface-dark);
+      border-radius: 3rem;
+      padding: 2.5rem;
+      position: relative;
+      overflow: hidden;
+      min-height: 500px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      color: white;
+    }
+
+    .tm-game-intro {
+      position: relative;
+      z-index: 10;
+      text-align: center;
+    }
+
+    .tm-game-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 5rem;
+      height: 5rem;
+      border-radius: 1.5rem;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      margin-bottom: 1.5rem;
+    }
+
+    .tm-game-icon-svg {
+      width: 2.5rem;
+      height: 2.5rem;
+      color: var(--tm-success);
+    }
+
+    .tm-game-intro-title {
+      font-size: clamp(1.75rem, 5vw, 3rem);
+      font-weight: 900;
+      letter-spacing: -0.02em;
+      margin: 0 0 1rem;
+    }
+
+    .tm-game-highlight {
+      background: linear-gradient(to right, #34d399, #22d3ee);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .tm-game-intro-desc {
+      color: #94a3b8;
+      margin: 0 0 2.5rem;
+      max-width: 28rem;
+      font-size: 1.125rem;
+      line-height: 1.6;
+    }
+
+    .tm-game-start-btn {
+      position: relative;
+      padding: 1.25rem 2.5rem;
+      background: linear-gradient(to right, #10b981, #06b6d4);
+      border: none;
+      border-radius: 1rem;
+      font-weight: 900;
+      font-size: 1.25rem;
+      color: white;
+      cursor: pointer;
+      box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
+      transition: all 300ms;
+      overflow: hidden;
+    }
+
+    .tm-game-start-btn:hover {
+      box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5);
+      transform: scale(1.05);
+    }
+
+    .tm-game-start-btn:active {
+      transform: scale(0.95);
+    }
+
+    .tm-game-warning {
+      margin-top: 1.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      color: #94a3b8;
+    }
+
+    .tm-game-warning-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .tm-game-play {
+      position: relative;
+      z-index: 10;
+      width: 100%;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .tm-game-hud {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 3rem;
+    }
+
+    .tm-hud-item {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .tm-hud-right {
+      align-items: flex-end;
+    }
+
+    .tm-hud-label {
+      font-size: 0.625rem;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      color: #64748b;
+      font-weight: 900;
+    }
+
+    .tm-hud-value {
+      font-size: 2.25rem;
+      font-weight: 900;
+      color: white;
+    }
+
+    .tm-hud-timer {
+      color: var(--tm-success);
+    }
+
+    .tm-hud-progress {
+      width: 3rem;
+      height: 0.25rem;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 9999px;
+      overflow: hidden;
+    }
+
+    .tm-progress-bar {
+      height: 100%;
+      background: var(--tm-success);
+      width: 100%;
+      transition: width 100ms linear;
+    }
+
+    .tm-target-container {
+      position: relative;
+      width: 18rem;
+      height: 18rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .tm-target-ring {
+      position: absolute;
+      inset: 0;
+      border-radius: 9999px;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    }
+
+    .tm-target-ring-inner {
+      position: absolute;
+      inset: 1rem;
+      border-radius: 9999px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .tm-target-btn {
+      width: 10rem;
+      height: 10rem;
+      border-radius: 1.5rem;
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 3.75rem;
+      font-weight: 900;
+      transition: all 150ms;
+    }
+
+    .tm-target-hidden {
+      transform: scale(0);
+    }
+
+    .tm-target-sub {
+      font-size: 0.625rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      opacity: 0.4;
+    }
+
+    .tm-flash {
+      position: absolute;
+      inset: 0;
+      border-radius: 9999px;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 150ms;
+    }
+
+    .tm-flash-hit {
+      background: rgba(16, 185, 129, 0.3);
+      filter: blur(3rem);
+    }
+    .tm-flash-miss {
+      background: rgba(244, 63, 94, 0.3);
+      filter: blur(3rem);
+    }
+
+    .tm-game-instruction {
+      margin-top: 3rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 1.5rem;
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 9999px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .tm-instruction-dot {
+      width: 0.75rem;
+      height: 0.75rem;
+      border-radius: 9999px;
+      background: var(--tm-success);
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .tm-game-results {
+      position: relative;
+      z-index: 10;
+      text-align: center;
+    }
+
+    .tm-trophy-wrapper {
+      position: relative;
+      display: inline-block;
+      margin-bottom: 1.5rem;
+    }
+
+    .tm-trophy {
+      width: 6rem;
+      height: 6rem;
+      color: #facc15;
+      filter: drop-shadow(0 0 30px rgba(250, 204, 21, 0.4));
+    }
+
+    .tm-new-record {
+      position: absolute;
+      top: -0.5rem;
+      right: -0.5rem;
+      background: var(--tm-success);
+      color: white;
+      font-size: 0.625rem;
+      font-weight: 900;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.5rem;
+    }
+
+    .tm-results-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #94a3b8;
+      margin: 0 0 0.5rem;
+    }
+
+    .tm-final-score {
+      font-size: 6rem;
+      font-weight: 900;
+      color: white;
+      letter-spacing: -0.05em;
+      margin-bottom: 1.5rem;
+      line-height: 1;
+    }
+
+    .tm-game-result-feedback {
+      color: #cbd5e1;
+      margin: 0 0 2.5rem;
+      font-size: 1.125rem;
+    }
+
+    .tm-results-btns {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      justify-content: center;
+    }
+
+    @media (min-width: 640px) {
+      .tm-results-btns { flex-direction: row; }
+    }
+
+    .tm-restart-btn {
+      padding: 1rem 2rem;
+      background: white;
+      color: black;
+      border: none;
+      border-radius: 1rem;
+      font-weight: 900;
+      font-size: 1.125rem;
+      cursor: pointer;
+      transition: all 200ms;
+    }
+
+    .tm-restart-btn:hover { transform: scale(1.05); }
+    .tm-restart-btn:active { transform: scale(0.95); }
+
+    .tm-share-btn {
+      padding: 1rem 2rem;
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 1rem;
+      font-weight: 900;
+      font-size: 1.125rem;
+      cursor: pointer;
+      transition: all 200ms;
+    }
+
+    .tm-share-btn:hover { background: rgba(255, 255, 255, 0.2); }
+
+    @keyframes ping {
+      75%, 100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+
+    @keyframes pulse {
+      50% { opacity: 0.5; }
+    }
+  </style>
+
+  <script>
+    interface VibGamepad {
+      vibrationActuator?: { playEffect: (t: string, p: object) => Promise<void> };
+    }
+    type GameTarget =
+      | { label: string; color: string; index: number; type: 'button' }
+      | { label: string; color: string; index: -1; type: 'axis'; axis: number; value: number };
+    let rafId = 0;
+    const STICK_RANGE = 25;
+    const S: Record<string, string> = JSON.parse(document.getElementById('gamepad-root')?.dataset?.s ?? '{}');
+    const LABEL_MOVE = S.ms ?? 'MOVER STICK';
+    const LABEL_PRESS = S.pr ?? 'PULSA';
+    const stage = document.getElementById('gamepad-stage');
+    const infoBar = document.getElementById('info-bar');
+    const connMsg = document.getElementById('connection-msg');
+    const logEl = document.getElementById('debug-log');
+    const clearLogBtn = document.getElementById('clear-log');
+    const vibPanel = document.getElementById('vibration-panel');
+    const btnVibLow = document.getElementById('vib-low');
+    const btnVibHigh = document.getElementById('vib-high');
+    const txtIndex = document.getElementById('gp-index');
+    const txtId = document.getElementById('gp-id');
+    const txtAxis = document.getElementById('axis-count');
+    const txtBtn = document.getElementById('btn-count');
+    const barL = document.getElementById('bar-6');
+    const barR = document.getElementById('bar-7');
+    clearLogBtn?.addEventListener('click', () => {
+      if (logEl) logEl.innerHTML = `<div class="tm-log-waiting">${S.cl ?? 'Log limpiado...'}</div>`;
+    });
+    function addLog(msg: string) {
+      if (!logEl) return;
+      const time = new Date().toLocaleTimeString();
+      const line = document.createElement('div');
+      line.innerHTML = `<span style="opacity:0.5">[${time}]</span> ${msg}`;
+      logEl.prepend(line);
+      if (logEl.children.length > 50 && logEl.lastElementChild) logEl.lastElementChild.remove();
+    }
+    function triggerVibration(gpIndex: number, weak: number, strong: number) {
+      const gp = (navigator.getGamepads ? navigator.getGamepads() : [])[gpIndex] as VibGamepad | null;
+      if (!gp?.vibrationActuator) { addLog(`<span style="color:#f97316">${S.vn ?? 'Vibración no soportada.'}</span>`); return; }
+      gp.vibrationActuator
+        .playEffect('dual-rumble', { startDelay: 0, duration: 500, weakMagnitude: weak, strongMagnitude: strong })
+        .then(() => addLog(`Vibración: ${weak > 0.5 ? (S.vl ?? 'Grave') : (S.vh ?? 'Agudo')}`))
+        .catch((err: Error) => addLog(`<span style="color:#f43f5e">Error: ${err.message}</span>`));
+    }
+    function toggleConnectedUI(connected: boolean) {
+      stage?.classList.toggle('tm-stage-inactive', !connected);
+      infoBar?.classList.toggle('tm-info-inactive', !connected);
+      vibPanel?.classList.toggle('tm-vibration-inactive', !connected);
+    }
+    function updateGpInfo(gp: Gamepad) {
+      if (connMsg) connMsg.innerHTML = `<span style="color:#10b981;font-weight:700">${S.c ?? 'Conectado'}</span>`;
+      if (txtIndex) txtIndex.textContent = gp.index.toString();
+      if (txtId) txtId.textContent = gp.id;
+      if (txtAxis) txtAxis.textContent = gp.axes.length.toString();
+      if (txtBtn) txtBtn.textContent = gp.buttons.length.toString();
+    }
+    window.addEventListener('gamepadconnected', (e: GamepadEvent) => {
+      const gp = e.gamepad;
+      toggleConnectedUI(true); updateGpInfo(gp);
+      addLog(`<span style="color:#10b981;font-weight:700">${S.c ?? 'Conectado'}:</span> ${gp.id}`);
+      if (btnVibLow) btnVibLow.onclick = () => triggerVibration(gp.index, 1.0, 0.0);
+      if (btnVibHigh) btnVibHigh.onclick = () => triggerVibration(gp.index, 0.0, 1.0);
+      loop();
+    });
+    window.addEventListener('gamepaddisconnected', () => {
+      cancelAnimationFrame(rafId); toggleConnectedUI(false);
+      if (connMsg) connMsg.textContent = S.cm ?? 'Conecta tu dispositivo USB o Bluetooth';
+      if (txtIndex) txtIndex.textContent = '--';
+      addLog(`<span style="color:#f43f5e;font-weight:700">${S.d ?? 'Desconectado'}</span>`);
+    });
+    function loop() {
+      const gp = (navigator.getGamepads ? navigator.getGamepads() : [])[0];
+      if (gp) updateInput(gp); rafId = requestAnimationFrame(loop);
+    }
+    const prevButtons = new Array(17).fill(false);
+    function trackBtnLog(i: number, pressed: boolean) {
+      if (pressed && !prevButtons[i]) { addLog(`${S.bp ?? 'Botón'} <strong>${i}</strong>`); prevButtons[i] = true; }
+      else if (!pressed && prevButtons[i]) { prevButtons[i] = false; }
+    }
+    function updateTrigger(i: number, value: number, el: Element) {
+      const bar = i === 6 ? barL : barR;
+      if (bar) (bar as HTMLElement).style.width = `${value * 100}%`;
+      el.classList.toggle('tm-active-btn', value > 0.1);
+    }
+    function updateStickBtn(pressed: boolean, el: Element) {
+      const p = el.querySelector('.tm-stick-press') || el;
+      (p as HTMLElement).style.borderColor = pressed ? '#7dd3fc' : 'transparent';
+    }
+    function updateVisualButton(i: number, pressed: boolean, value: number) {
+      const el = document.getElementById(`btn-${i}`);
+      if (!el) return;
+      trackBtnLog(i, pressed);
+      if (i === 6 || i === 7) { updateTrigger(i, value, el); return; }
+      if (i >= 12 && i <= 15) { el.classList.toggle('tm-active-dpad', pressed); return; }
+      if (i === 10 || i === 11) { updateStickBtn(pressed, el); return; }
+      el.classList.toggle('tm-active-btn', pressed);
+    }
+    function updateInput(gp: Gamepad) {
+      gp.buttons.forEach((b, i) => updateVisualButton(i, b.pressed, b.value));
+      const sL = document.getElementById('stick-left');
+      if (sL) sL.style.transform = `translate(${(gp.axes[0] ?? 0) * STICK_RANGE}px, ${(gp.axes[1] ?? 0) * STICK_RANGE}px)`;
+      const sR = document.getElementById('stick-right');
+      if (sR) sR.style.transform = `translate(${(gp.axes[2] ?? 0) * STICK_RANGE}px, ${(gp.axes[3] ?? 0) * STICK_RANGE}px)`;
+    }
+    const BTN_KEY_MAP: Record<string, number> = { a: 0, b: 1, x: 2, y: 3, q: 4, e: 5 };
+    const ARROW_KEY_MAP: Record<string, number> = { arrowup: 12, arrowdown: 13, arrowleft: 14, arrowright: 15 };
+    window.addEventListener('keyup', (e) => {
+      const idx = BTN_KEY_MAP[e.key.toLowerCase()] ?? ARROW_KEY_MAP[e.key.toLowerCase()] ?? -1;
+      if (idx !== -1) updateVisualButton(idx, false, 0.0);
+    });
+    const BUTTON_MAP: GameTarget[] = [
+      { label: 'A', color: '#10b981', index: 0, type: 'button' }, { label: 'B', color: '#f43f5e', index: 1, type: 'button' },
+      { label: 'X', color: '#0ea5e9', index: 2, type: 'button' }, { label: 'Y', color: '#eab308', index: 3, type: 'button' },
+      { label: '↑', color: '#6366f1', index: -1, type: 'axis', axis: 1, value: -1 }, { label: '↓', color: '#6366f1', index: -1, type: 'axis', axis: 1, value: 1 },
+      { label: '←', color: '#6366f1', index: -1, type: 'axis', axis: 0, value: -1 }, { label: '→', color: '#6366f1', index: -1, type: 'axis', axis: 0, value: 1 },
+    ];
+    let gameActive = false;
+    let score = 0;
+    let timeLeft = 30;
+    let currentTarget: GameTarget | null = null;
+    let timerInterval: ReturnType<typeof setInterval> | null = null;
+    let axisCooldown = false;
+    const [introScreen, playScreen, resultsScreen, startBtn, restartBtn, shareBtn,
+      timerEl, scoreEl, progressBar, targetBtn, targetLabel, targetSub,
+      finalScoreEl, controllerWarning, hitFlash, missFlash] = [
+      'game-intro', 'game-play', 'game-results', 'start-game-btn', 'restart-game-btn', 'share-btn',
+      'game-timer', 'game-score', 'game-progress-bar', 'target-button', 'target-label', 'target-sub',
+      'final-score', 'game-controller-warning', 'hit-flash', 'miss-flash',
+    ].map(id => document.getElementById(id));
+    function checkGamepad() {
+      const connected = [...navigator.getGamepads()].some(Boolean);
+      if (startBtn) (startBtn as HTMLButtonElement).disabled = false;
+      if (controllerWarning) controllerWarning.style.display = connected ? 'none' : 'flex';
+    }
+    setInterval(checkGamepad, 1000);
+    function updateTimerUI() {
+      if (timerEl) timerEl.textContent = `${timeLeft.toFixed(1)}s`;
+      if (progressBar) (progressBar as HTMLElement).style.width = `${(timeLeft / 30) * 100}%`;
+      if (timerEl) timerEl.style.color = timeLeft < 5 ? '#f43f5e' : '#10b981';
+    }
+    function spawnTarget() {
+      currentTarget = BUTTON_MAP[Math.floor(Math.random() * BUTTON_MAP.length)] ?? null;
+      if (!currentTarget || !targetBtn || !targetLabel || !targetSub) return;
+      (targetBtn as HTMLElement).style.background = currentTarget.color;
+      (targetBtn as HTMLElement).style.color = 'white';
+      targetBtn.classList.remove('tm-target-hidden', 'tm-target-pop');
+      void targetBtn.offsetWidth;
+      targetBtn.classList.add('tm-target-pop');
+      targetLabel.textContent = currentTarget.label;
+      targetSub.textContent = currentTarget.type === 'axis' ? LABEL_MOVE : LABEL_PRESS;
+      setTimeout(() => targetBtn.classList.remove('tm-target-pop'), 300);
+    }
+    function startTimer() {
+      timeLeft = 30;
+      updateTimerUI();
+      timerInterval = setInterval(() => {
+        timeLeft -= 0.1;
+        if (timeLeft <= 0) { timeLeft = 0; endGame(); }
+        updateTimerUI();
+      }, 100);
+    }
+    const [RLN, RLD, RLF] = [S.rln ?? 'LEGENDARIO', S.rld ?? 'Tus dedos se mueven a la velocidad del sonido.', S.rlf ?? 'Mi mando vuela!'];
+    const [RPN, RPD, RPF] = [S.rpn ?? 'PRO GAMER', S.rpd ?? 'Tienes reflejos de acero y un mando bien calibrado.', S.rpf ?? 'Mi mando vuela!'];
+    const [RGN, RGD, RGF] = [S.rgn ?? 'GAMER', S.rgd ?? 'No está mal, pero para el competitivo te falta calle.', S.rgf ?? 'Casi lo tengo!'];
+    const [RNN, RND, RNF] = [S.rnn ?? 'MANCO', S.rnd ?? '¿Seguro que tienes el mando encendido?', S.rnf ?? 'El mando me tiene manía!'];
+    function getRank(s: number) {
+      if (s > 50) return { name: RLN, desc: RLD, flavor: RLF };
+      if (s > 35) return { name: RPN, desc: RPD, flavor: RPF };
+      if (s > 20) return { name: RGN, desc: RGD, flavor: RGF };
+      return { name: RNN, desc: RND, flavor: RNF };
+    }
+    function endGame() {
+      gameActive = false; if (timerInterval) clearInterval(timerInterval as unknown as number);
+      if (playScreen) playScreen.style.display = 'none';
+      if (resultsScreen) resultsScreen.style.display = 'block';
+      if (finalScoreEl) finalScoreEl.textContent = score.toString();
+      const rank = getRank(score), feedbackEl = document.getElementById('game-feedback');
+      if (feedbackEl) feedbackEl.innerHTML = `<span style="color:white;display:block;font-weight:900;font-size:1.25rem;margin-bottom:0.25rem">${rank.name}</span><span style="color:#94a3b8">${rank.desc}</span>`;
+    }
+    function flash(el: Element | null | undefined) {
+      if (!el) return;
+      (el as HTMLElement).style.opacity = '1';
+      setTimeout(() => { (el as HTMLElement).style.opacity = '0'; }, 100);
+    }
+    function handleHit() {
+      score++;
+      if (scoreEl) scoreEl.textContent = score.toString().padStart(3, '0');
+      flash(hitFlash);
+      spawnTarget();
+    }
+    function handleMiss() {
+      flash(missFlash);
+      targetBtn?.classList.add('tm-shake');
+      setTimeout(() => targetBtn?.classList.remove('tm-shake'), 400);
+    }
+    const KEY_BTN: Record<string, number> = { a: 0, b: 1, x: 2, y: 3 };
+    const KEY_AXIS: Record<string, string> = { ArrowUp: '↑', ArrowDown: '↓', ArrowLeft: '←', ArrowRight: '→' };
+    function checkGameKey(e: KeyboardEvent) {
+      if (!currentTarget) return;
+      const k = e.key.toLowerCase();
+      const isBtn = currentTarget.type === 'button';
+      const isHit = isBtn ? KEY_BTN[k] === currentTarget.index : KEY_AXIS[e.key] === currentTarget.label;
+      const isMiss = isBtn ? k in KEY_BTN : e.key in KEY_AXIS;
+      if (isHit) handleHit(); else if (isMiss) handleMiss();
+    }
+    window.addEventListener('keydown', (e) => {
+      const idx = BTN_KEY_MAP[e.key.toLowerCase()] ?? ARROW_KEY_MAP[e.key.toLowerCase()] ?? -1;
+      if (idx !== -1) { updateVisualButton(idx, true, 1.0); stage?.classList.remove('tm-stage-inactive'); }
+      if (!gameActive) { if (e.key === 'Enter') startGame(); return; }
+      checkGameKey(e);
+    });
+    shareBtn?.addEventListener('click', () => {
+      const rank = getRank(score), url = window.location.href;
+      const text = `${S.gsp ?? 'Hice'} ${score} ${S.gss ?? 'aciertos'}. ${rank.flavor} ${S.gst ?? '¿Me superas?'} ${url}`;
+      if (navigator.share) navigator.share({ title: S.gt ?? 'Test de Mando', text, url }).catch(() => navigator.clipboard.writeText(text));
+      else navigator.clipboard.writeText(text);
+    });
+    function startGame() {
+      score = 0; gameActive = true;
+      if (scoreEl) scoreEl.textContent = '000';
+      if (introScreen) introScreen.style.display = 'none';
+      if (resultsScreen) resultsScreen.style.display = 'none';
+      if (playScreen) playScreen.style.display = 'flex';
+      startTimer(); spawnTarget(); requestAnimationFrame(gameLoop);
+    }
+    const prevGameBtns = new Array(17).fill(false);
+    function processGameBtns(gp: Gamepad) {
+      gp.buttons.forEach((b, i) => {
+        if (b.pressed && !prevGameBtns[i]) {
+          prevGameBtns[i] = true;
+          if (currentTarget?.type === 'button' && i === currentTarget.index) handleHit();
+          else if (i < 4) handleMiss();
+        } else if (!b.pressed) { prevGameBtns[i] = false; }
+      });
+    }
+    function processGameAxes(gp: Gamepad) {
+      if (!currentTarget || currentTarget.type !== 'axis' || axisCooldown) return;
+      const val = gp.axes[currentTarget.axis] ?? 0;
+      const hit = currentTarget.value > 0 ? val > 0.5 : val < -0.5;
+      if (hit) { handleHit(); axisCooldown = true; setTimeout(() => (axisCooldown = false), 200); }
+    }
+    function gameLoop() {
+      if (!gameActive) return;
+      navigator.getGamepads().forEach(gp => { if (gp) { processGameBtns(gp); processGameAxes(gp); } });
+      requestAnimationFrame(gameLoop);
+    }
+    startBtn?.addEventListener('click', startGame);
+    restartBtn?.addEventListener('click', startGame);
+    window.addEventListener('gamepadconnected', checkGamepad);
+  </script>
+</div>