/**
 * public/css/tools/apm-test.css
 * APM Test Tool Styles — Game Boy Retro Industrial Style
 */

/* ============================================
 * Countdown Overlay
 * ============================================ */
.apm-countdown {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.apm-cd-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 8rem;
  font-weight: 700;
  color: #94b54f;
  text-shadow: 0 0 40px rgba(148,181,79,0.6);
  animation: apm-cd-pop 0.5s ease-out;
}
@keyframes apm-cd-pop {
  0% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================
 * Control Area
 * ============================================ */
.apm-ctrl-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 14px;
}
/* Duration 2×2 grid, no panel-raised backing */
.apm-timer-presets {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.apm-preset-btns {
  display: flex;
  gap: 0.45rem;
}
/* Scheme/Game buttons — scheme-btn style */
.apm-scheme-btn {
  display: inline-block;
  padding: 0 0.75rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border: 1px solid #959292;
  border-radius: 4px;
  background: #e6e3de;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
}
.apm-scheme-btn:hover {
  background: #ccc8c3;
}
.apm-scheme-btn.active {
  background: #8ea85c;
  color: white;
  border-color: #8ea85c;
}
/* Start/Reset — vertical stack */
.apm-ctrl-btns-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 100px;
}
.apm-ctrl-btns-col .core-btn {
  white-space: nowrap;
  width: 100%;
}
.apm-duration-btn {
  width: 4rem;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0;
  text-align: center;
}

/* ============================================
 * Custom Key Zone
 * ============================================ */
.apm-custom-keys {
  margin-bottom: 14px;
  padding: 10px 12px;
}
.apm-custom-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.apm-custom-key {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 3px 6px;
  background: #f0ede6;
  border: 1px solid #d8d5cf;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
}
.apm-custom-key:hover {
  background: #e6e3de;
}
.apm-custom-key input[type="checkbox"] {
  margin: 0;
}

/* ============================================
 * APM Main Display
 * ============================================ */
.apm-hero {
  text-align: center;
  margin: 10px 0 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.apm-hero-val {
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: #94b54f;
  line-height: 1;
  transition: color 0.2s;
}
.apm-hero-unit {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #959292;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ============================================
 * Progress Bar
 * ============================================ */
.apm-progress-bar {
  width: 100%;
  height: 20px;
  background: #ccc8c3;
  border-radius: 10px;
  margin: 1rem 0;
  overflow: hidden;
}
.apm-progress-fill {
  height: 100%;
  background: #8ea85c;
  border-radius: 10px;
  transition: width 0.1s ease, background 0.3s ease;
  width: 0%;
}

/* ============================================
 * Current Key
 * ============================================ */
.apm-curr-key-section {
  text-align: center;
  margin-bottom: 12px;
}
.apm-curr-key-label {
  font-size: 13px;
  color: #959292;
}
.apm-curr-key-highlight {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #94b54f;
  background: #e8f0d0;
  border: 2px solid #a0c060;
  border-radius: 6px;
  padding: 4px 14px;
  min-width: 48px;
  text-align: center;
  animation: apm-blink 0.6s ease-in-out infinite;
}
@keyframes apm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================
 * Stats Area (compact row)
 * ============================================ */
.apm-stats-bar {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin: 6px 0 12px;
  flex-wrap: wrap;
}
.apm-sb-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #f0ede6;
  border: 1px solid #d8d5cf;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
}
.apm-sb-item strong {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2b2f36;
}
.apm-sb-item small {
  font-size: 10px;
  color: #959292;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================
 * Visual Area (keyboard heatmap + mouse)
 * ============================================ */
.apm-visual-area {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.apm-heatmap {
  flex: 1 1 480px;
  padding: 10px 8px;
  overflow-x: auto;
}
.apm-mouse-area {
  flex: 0 0 auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ============================================
 * Keyboard Heatmap (5-row standard keyboard)
 * ============================================ */
.apm-kbd-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  justify-content: center;
}
.apm-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 28px;
  min-height: 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  font-weight: 400;
  background: #e6e3de;
  border: 1px solid #959292;
  border-radius: 4px;
  color: #2b2f36;
  transition: all 0.1s ease;
  box-sizing: border-box;
  cursor: pointer;
}
.apm-key-space {
  width: 200px;
  min-width: 100px;
}
.apm-key-shift { min-width: 72px; width: auto; }
.apm-key-caps  { min-width: 60px; width: auto; }
.apm-key-tab   { min-width: 50px; width: auto; }
.apm-key-mod   { min-width: 46px; width: auto; }
.apm-key-enter { min-width: 60px; width: auto; }
.apm-key-bksp  { min-width: 62px; width: auto; }

/* Heat levels */
.apm-key.heat-1 { background: rgba(142,168,92,0.2); border-color: rgba(142,168,92,0.3); }
.apm-key.heat-2 { background: rgba(142,168,92,0.4); border-color: rgba(142,168,92,0.5); }
.apm-key.heat-3 { background: rgba(142,168,92,0.6); border-color: rgba(142,168,92,0.7); }
.apm-key.heat-4 { background: rgba(142,168,92,0.8); border-color: #8ea85c; color: #fff; }
.apm-key.heat-5 { background: #8ea85c; border-color: #7a9648; color: #fff; box-shadow: 0 0 8px rgba(142,168,92,0.5); }

/* Keys in current scheme → green border */
.apm-key.is-required {
  border: 2px solid #8ea85c;
}

/* Current target key → amber highlight + pulse animation */
.apm-key.is-current {
  background: #e6a23c !important;
  border-color: #e6a23c !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(230,162,60,0.7) !important;
  transform: scale(1.1);
  z-index: 10;
  animation: apm-pulse-in 0.3s ease-out;
}
@keyframes apm-pulse-in {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* ============================================
 * Mouse Area (referencing mouse-tester)
 * ============================================ */
.apm-mouse {
  position: relative;
  width: 140px;
  height: 200px;
}
.apm-mouse-buttons {
  position: absolute;
  top: 12px;
  left: -4px;
  width: calc(100% + 8px);
  height: 60px;
  display: flex;
  gap: 4px;
  z-index: 1;
}
.apm-mouse-btn {
  flex: 1;
  height: 100%;
  background: #aea99f;
  border: 1px solid #a0a0a0;
  border-radius: 5px 5px 3px 3px;
  transition: transform 0.05s, box-shadow 0.1s;
}
.apm-mouse-btn.active {
  background: #8a857a;
  transform: scale(0.97);
  box-shadow: 0 0 16px 4px rgba(138,185,78,0.55);
}
.apm-mouse-btn.target {
  animation: apm-mouse-target-pulse 1s ease-in-out infinite;
}

@keyframes apm-mouse-target-pulse {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(230,162,60,0.3); }
  50% { box-shadow: 0 0 24px 8px rgba(230,162,60,0.7); }
}
.apm-mouse-body {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 170px;
  background: linear-gradient(to bottom, #e7e3d9, #dbd6c9);
  border-radius: 0 0 70px 70px;
  border: 1px solid #a0a0a0;
  border-top: none;
  transition: transform 0.05s, box-shadow 0.15s;
}
.apm-mouse-body.active {
  background: linear-gradient(to bottom, #c8c4ba, #bcb8ab);
  transform: scale(0.97);
  box-shadow: 0 0 24px 8px rgba(138,185,78,0.6);
  animation: apm-mouse-glow 1.2s ease-out;
}
@keyframes apm-mouse-glow {
  0%   { box-shadow: 0 0 8px 2px rgba(138,185,78,0.3); }
  30%  { box-shadow: 0 0 40px 16px rgba(138,185,78,0.8); }
  60%  { box-shadow: 0 0 32px 12px rgba(138,185,78,0.7); }
  100% { box-shadow: 0 0 24px 8px rgba(138,185,78,0.6); }
}

/* ============================================
 * History
 * ============================================ */
.apm-history {
  margin-bottom: 16px;
  padding: 12px;
}
.apm-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.apm-history-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.apm-hstat {
  flex: 1;
  min-width: 80px;
  text-align: center;
  background: #e6e3de;
  border: 1px solid #959292;
  border-radius: 4px;
  padding: 8px 6px;
  box-shadow:
    6px 6px 12px rgba(82,87,99,0.18),
    -3px -3px 6px rgba(248,246,242,0.72),
    inset 1px 1px 0 rgba(248,246,242,0.5);
}
.apm-hstat-green {
  border: 1px solid rgba(148,181,79,0.7);
  background: linear-gradient(145deg, rgba(190,210,118,0.28), rgba(137,161,83,0.18));
}
.apm-hstat-blue {
  border: 1px solid rgba(82,92,168,0.5);
  background: linear-gradient(145deg, rgba(118,165,210,0.2), rgba(83,137,161,0.12));
}
.apm-hstat-amber {
  border: 1px solid rgba(230,162,60,0.6);
  background: linear-gradient(145deg, rgba(230,200,118,0.22), rgba(210,147,33,0.12));
}
.apm-hstat-val {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2d2d2d;
}
.apm-hstat-green .apm-hstat-val { color: rgb(55,94,46); }
.apm-hstat-blue .apm-hstat-val { color: rgb(30,60,110); }
.apm-hstat-amber .apm-hstat-val { color: rgb(140,80,10); }
.apm-hstat-lbl {
  display: block;
  font-size: 10px;
  color: #959292;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 2px;
}
.apm-history-list {
  max-height: 260px;
  overflow-y: auto;
}
.apm-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #ccc8c3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}
.apm-history-item:nth-child(odd) {
  background: rgba(142,168,92,0.06);
}
.apm-hi-time {
  color: #959292;
  min-width: 60px;
}
.apm-hi-scheme {
  color: #525ca8;
  min-width: 50px;
  font-weight: 600;
}
.apm-hi-apm {
  color: #8ea85c;
  font-weight: 700;
  min-width: 60px;
}
.apm-hi-acc {
  color: #959292;
  min-width: 60px;
}
.apm-hi-ops {
  color: #959292;
}
.apm-history-empty {
  text-align: center;
  padding: 20px;
  color: #959292;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}

/* ============================================
 * APM Reference
 * ============================================ */
.apm-ref {
  padding: 12px;
}
.apm-ref-list {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.apm-ref-item {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: #e6e3de;
  border: 1px solid #959292;
  border-radius: 4px;
  box-shadow:
    6px 6px 13px rgba(82,87,99,0.2),
    -3px -3px 6px rgba(248,246,242,0.75),
    inset 1px 1px 0 rgba(248,246,242,0.5);
}
.apm-ref-green {
  border-color: rgba(148,181,79,0.6);
  box-shadow: 6px 6px 13px rgba(82,87,99,0.2), -3px -3px 6px rgba(248,246,242,0.75), inset 1px 1px 0 rgba(190,210,118,0.3);
}
.apm-ref-amber {
  border-color: rgba(230,162,60,0.6);
  box-shadow: 6px 6px 13px rgba(82,87,99,0.2), -3px -3px 6px rgba(248,246,242,0.75), inset 1px 1px 0 rgba(230,200,118,0.3);
}
.apm-ref-purple {
  border-color: rgba(195,66,141,0.6);
  box-shadow: 6px 6px 13px rgba(82,87,99,0.2), -3px -3px 6px rgba(248,246,242,0.75), inset 1px 1px 0 rgba(246,196,224,0.45);
}
.apm-ref-range {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #8ea85c;
}
.apm-ref-level {
  font-size: 11px;
  color: #959292;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
}

/* ============================================
 * Dark Theme
 * ============================================ */
[data-theme="dark"] .apm-sb-item {
  background: #1e241e;
  border-color: #3a3e3a;
}
[data-theme="dark"] .apm-sb-item strong { color: #8a9a6a; }
[data-theme="dark"] .apm-sb-item small { color: #5a6e5a; }
[data-theme="dark"] .apm-hero-val { color: #8aac50; }
[data-theme="dark"] .apm-hero-unit { color: #5a5e5a; }
[data-theme="dark"] .apm-curr-key-label { color: #5a5e5a; }
[data-theme="dark"] .apm-curr-key-highlight {
  color: #8aac50;
  background: #2a3a1a;
  border-color: #6a8a30;
}
[data-theme="dark"] .apm-progress-bar { background: #2a2e2a; }
[data-theme="dark"] .apm-key {
  background: #2a2e2a;
  border-color: #3a3e3a;
  color: #8a8e8a;
}
[data-theme="dark"] .apm-key.heat-1 { background: rgba(142,168,92,0.15); border-color: rgba(142,168,92,0.2); }
[data-theme="dark"] .apm-key.heat-2 { background: rgba(142,168,92,0.3); border-color: rgba(142,168,92,0.35); }
[data-theme="dark"] .apm-key.heat-3 { background: rgba(142,168,92,0.45); border-color: rgba(142,168,92,0.5); }
[data-theme="dark"] .apm-key.heat-4 { background: rgba(142,168,92,0.7); border-color: #7a9648; }
[data-theme="dark"] .apm-key.heat-5 { background: #6a8a30; border-color: #5a7a28; }
[data-theme="dark"] .apm-key.is-required { border-color: #6a8a30; }
[data-theme="dark"] .apm-key.is-current {
  background: #c88a20 !important;
  border-color: #c88a20 !important;
  box-shadow: 0 0 15px rgba(200,138,32,0.6) !important;
}
[data-theme="dark"] .apm-custom-key {
  background: #1e241e;
  border-color: #3a3e3a;
  color: #8a8e8a;
}
[data-theme="dark"] .apm-custom-key:hover {
  background: #2a2e2a;
}
[data-theme="dark"] .apm-hstat {
  background: #1e241e;
  border-color: #3a3e3a;
  box-shadow: none;
}
[data-theme="dark"] .apm-hstat-green {
  border-color: rgba(148,181,79,0.4);
  background: linear-gradient(145deg, rgba(100,130,60,0.2), rgba(80,110,40,0.15));
}
[data-theme="dark"] .apm-hstat-green .apm-hstat-val { color: #8aac50; }
[data-theme="dark"] .apm-hstat-purple {
  border-color: rgba(195,66,141,0.4);
  background: linear-gradient(145deg, rgba(120,30,80,0.15), rgba(100,20,70,0.1));
}
[data-theme="dark"] .apm-hstat-purple .apm-hstat-val { color: #c86ab0; }
[data-theme="dark"] .apm-hstat-val { color: #8a9a6a; }
[data-theme="dark"] .apm-hstat-blue {
  border-color: rgba(82,92,168,0.4);
  background: linear-gradient(145deg, rgba(40,80,120,0.15), rgba(30,60,100,0.1));
}
[data-theme="dark"] .apm-hstat-blue .apm-hstat-val { color: #7a9ac8; }
[data-theme="dark"] .apm-hstat-amber {
  border-color: rgba(230,162,60,0.4);
  background: linear-gradient(145deg, rgba(120,80,20,0.15), rgba(100,60,10,0.1));
}
[data-theme="dark"] .apm-hstat-amber .apm-hstat-val { color: #d8a840; }
[data-theme="dark"] .apm-hstat-lbl { color: #5a5e5a; }
[data-theme="dark"] .apm-history-item { border-color: #2a2e2a; }
[data-theme="dark"] .apm-history-item:nth-child(odd) { background: rgba(142,168,92,0.04); }
[data-theme="dark"] .apm-hi-time { color: #5a5e5a; }
[data-theme="dark"] .apm-hi-scheme { color: #6a7eb8; }
[data-theme="dark"] .apm-hi-apm { color: #8aac50; }
[data-theme="dark"] .apm-hi-acc { color: #6a6e6a; }
[data-theme="dark"] .apm-hi-ops { color: #6a6e6a; }
[data-theme="dark"] .apm-history-empty { color: #5a5e5a; }
[data-theme="dark"] .apm-ref-item {
  background: #1e241e;
  border-color: #3a3e3a;
}
[data-theme="dark"] .apm-ref-green { border-color: rgba(148,181,79,0.3); }
[data-theme="dark"] .apm-ref-green .apm-ref-range { color: #8aac50; }
[data-theme="dark"] .apm-ref-amber { border-color: rgba(230,162,60,0.3); }
[data-theme="dark"] .apm-ref-amber .apm-ref-range { color: #d8a840; }
[data-theme="dark"] .apm-ref-purple { border-color: rgba(195,66,141,0.3); }
[data-theme="dark"] .apm-ref-purple .apm-ref-range { color: #c86ab0; }
[data-theme="dark"] .apm-ref-level { color: #5a5e5a; }

[data-theme="dark"] .apm-mouse-btn { background: #3a3e3a; border-color: #4a4e4a; }
[data-theme="dark"] .apm-mouse-btn.active { background: #2a2e2a; box-shadow: 0 0 16px 4px rgba(148,181,79,0.4); }
[data-theme="dark"] .apm-mouse-btn.target { animation-name: apm-mouse-target-pulse; }
[data-theme="dark"] .apm-mouse-body {
  background: linear-gradient(to bottom, #2a2e2a, #222622);
  border-color: #3a3e3a;
}
[data-theme="dark"] .apm-mouse-body.active {
  background: linear-gradient(to bottom, #1e241e, #1a1e1a);
  box-shadow: 0 0 24px 8px rgba(148,181,79,0.35);
}

/* ============================================
 * Responsive
 * ============================================ */
@media (max-width: 768px) {
  .apm-hero-val { font-size: 3.5rem; }
  .apm-cd-num { font-size: 6rem; }
  .apm-controls { gap: 4px; }
  .apm-visual-area { flex-direction: column; }
  .apm-heatmap { flex: 1 1 100%; }
  .apm-mouse-area { align-self: center; }
  .apm-key { width: 28px; height: 28px; font-size: 0.6rem; min-width: 0; }
  .apm-key-space { width: 160px; min-width: 100px; }
  .apm-key-shift { min-width: 48px; width: auto; }
  .apm-key-caps { min-width: 40px; width: auto; }
  .apm-key-tab { min-width: 36px; width: auto; }
  .apm-key-bksp { min-width: 40px; width: auto; }
  .apm-key-enter { min-width: 40px; width: auto; }
  .apm-sb-item { padding: 2px 8px; }
  .apm-sb-item strong { font-size: 14px; }
}
@media (max-width: 640px) {
  .apm-heatmap { padding: 0.5rem; }
  .apm-mouse { width: 110px; height: 160px; }
  .apm-mouse-body { height: 136px; border-radius: 0 0 56px 56px; }
  .apm-mouse-buttons { height: 48px; }
}
@media (max-width: 480px) {
  .apm-hero-val { font-size: 2.8rem; }
  .apm-cd-num { font-size: 4.5rem; }
  .apm-sb-item { padding: 2px 6px; }
  .apm-sb-item strong { font-size: 12px; }
  .apm-key { width: 22px; height: 22px; font-size: 0.5rem; }
  .apm-key-space { width: 120px; min-width: 70px; }
  .apm-key-shift { min-width: 34px; }
  .apm-key-caps { min-width: 28px; }
  .apm-key-tab { min-width: 24px; }
  .apm-key-enter { min-width: 32px; }
  .apm-key-bksp { min-width: 32px; }
  .apm-key-mod { min-width: 24px; }
  .apm-history-stats { gap: 6px; }
  .apm-hstat { padding: 6px 4px; min-width: 60px; }
  .apm-hstat-val { font-size: 18px; }
}