/*
Theme Name: CPS Testers Arena
Theme URI: https://cpstesters.com
Author: cpstesters.com
Author URI: https://cpstesters.com
Description: Custom cyberpunk-themed WordPress theme for cpstesters.com. A 60+ tool suite (click speed, mouse, keyboard, typing, reaction, Minecraft, calculators, games) built around a live click-speed tester with real-time CPS/timer/score readouts, a sidebar tool directory, a visit-history panel, a completion modal, a Firebase-backed global leaderboard, and per-page FAQPage + SoftwareApplication JSON-LD schema.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cps-arena
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Palette */
  --bg-void: #05070c;
  --bg-base: #0a0e17;
  --bg-surface: #10151f;
  --bg-surface-raised: #161d2b;
  --border-dim: #1f2937;
  --border-glow: rgba(0, 212, 255, 0.35);

  --accent-cyan: #00d4ff;
  --accent-cyan-rgb: 0, 212, 255;
  --accent-cyan-dim: rgba(0, 212, 255, 0.14);
  --accent-magenta: #ff2e88;
  --accent-magenta-rgb: 255, 46, 136;
  --accent-magenta-dim: rgba(255, 46, 136, 0.14);
  --accent-amber: #ffb020;
  --accent-emerald: #55d67a;
  --accent-emerald-dim: rgba(85, 214, 122, 0.16);

  --text-primary: #e8f2ff;
  --text-muted: #8b9bb4;
  --text-faint: #55627a;

  /* Type */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-void);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(0, 212, 255, 0.06), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(255, 46, 136, 0.05), transparent 45%),
    linear-gradient(180deg, var(--bg-base), var(--bg-void) 60%);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.6em;
  color: var(--text-primary);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.mono { font-family: var(--font-mono); }

/* Visible focus states for accessibility */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--border-dim);
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo .spark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 12px 2px var(--accent-cyan);
}

.site-logo span.accent { color: var(--accent-cyan); }

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
}

.primary-nav a:hover { color: var(--accent-cyan); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border-dim);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-toggle { display: none; }

@media (max-width: 780px) {
  .primary-nav { display: none; }
  .nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-family: var(--font-mono);
  }
}

/* ==========================================================================
   APP SHELL: SIDEBAR + CONTENT
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.tool-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-base);
  border-right: 1px solid var(--border-dim);
  padding: 18px 10px 30px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.tool-sidebar .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 0 10px 16px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 12px;
}

.tool-nav { list-style: none; margin: 0; padding: 0; }

.tool-nav-group { margin-bottom: 6px; }

.tool-nav-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tool-nav-label:hover { background: var(--bg-surface); color: var(--text-primary); }
.tool-nav-label.is-active { background: var(--accent-cyan-dim); color: var(--accent-cyan); }

.tool-nav-label svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.tool-nav-label .chev { margin-left: auto; opacity: 0.5; transition: transform 0.15s ease; width: 10px; height: 10px; }
.tool-nav-group.open .chev { transform: rotate(180deg); }

.tool-subnav {
  list-style: none;
  margin: 2px 0 6px 30px;
  padding: 0;
  display: none;
}

.tool-nav-group.open .tool-subnav { display: block; }

.tool-subnav a {
  display: block;
  padding: 6px 8px;
  font-size: 0.78rem;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
}

.tool-subnav a:hover { color: var(--accent-cyan); background: var(--bg-surface); text-decoration: none; }

.sidebar-toggle-mobile { display: none; }

.main-content { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .tool-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    z-index: 300;
    background: var(--bg-base);
    transition: left 0.2s ease;
    box-shadow: 20px 0 40px rgba(0,0,0,0.5);
  }
  .tool-sidebar.open { left: 0; }
  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 250;
  }
  .sidebar-scrim.open { display: block; }
}

/* ==========================================================================
   HISTORY / MOST-VISITED PANEL
   ========================================================================== */
.history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,7,12,0.82);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 400;
  padding: 60px 20px 20px;
}

.history-overlay.open { display: flex; }

.history-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 22px;
  max-width: 780px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.history-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.history-panel-head h2 { font-size: 1.05rem; margin: 0; }

.history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .history-grid { grid-template-columns: 1fr; }
}

.history-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 10px;
}

.history-list { list-style: none; margin: 0; padding: 0; }

.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: 0.85rem;
}

.history-list li a { color: var(--text-primary); }
.history-list .h-meta { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.72rem; white-space: nowrap; }

.history-empty { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.82rem; }

.history-clear {
  margin-top: 14px;
}

/* ==========================================================================
   POPULAR TOOLS GRID
   ========================================================================== */
.tools-grid-section { padding: 10px 24px 50px; }

.tools-grid-section h2 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 24px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.tool-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 18px 10px;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tool-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  text-decoration: none;
}

.tool-card .tool-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  color: var(--accent-cyan);
}

.tool-card .tool-name {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.tool-card:hover .tool-name { color: var(--text-primary); }

/* ==========================================================================
   HERO / TEST ARENA
   ========================================================================== */
.arena-section {
  padding: 48px 24px 24px;
}

.arena-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}

.arena-heading .eyebrow {
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.arena-heading h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 10px;
}

.arena-heading p {
  color: var(--text-muted);
  font-size: 1rem;
}

/* Stat readout bar */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 620px;
  margin: 0 auto 20px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 16px 10px;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-card.is-live {
  border-color: var(--border-glow);
  box-shadow: 0 0 20px -6px var(--accent-cyan);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-card.is-live .stat-value { color: var(--accent-cyan); }

/* Time select pills */
.time-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto 28px;
}

.time-pill {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.time-pill:hover { border-color: var(--accent-cyan); color: var(--text-primary); }

.time-pill.active {
  background: var(--accent-cyan-dim);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* Click pad */
.pad-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.click-pad {
  --pad-size: min(360px, 78vw);
  width: var(--pad-size);
  height: var(--pad-size);
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--accent-cyan-rgb), 0.16), transparent 65%),
    var(--bg-surface-raised);
  border: 2px solid var(--border-glow);
  box-shadow:
    0 0 0 1px rgba(var(--accent-cyan-rgb), 0.08),
    0 0 40px -10px var(--accent-cyan),
    inset 0 0 60px -20px rgba(var(--accent-cyan-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}

.click-pad:active {
  transform: scale(0.97);
  box-shadow:
    0 0 0 1px rgba(var(--accent-cyan-rgb), 0.16),
    0 0 60px -6px var(--accent-cyan),
    inset 0 0 80px -10px rgba(var(--accent-cyan-rgb), 0.45);
}

.click-pad .pad-ring {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--accent-cyan-rgb), 0.25);
  animation: spin 18s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.click-pad .pad-label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: var(--text-primary);
  text-align: center;
  padding: 0 30px;
  z-index: 2;
}

.click-pad .pad-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  margin-top: 8px;
  letter-spacing: 0.08em;
}

.click-pad.is-running .pad-label { opacity: 0.35; }

/* click ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(var(--accent-cyan-rgb), 0.35);
  transform: scale(0);
  animation: ripple-out 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-out {
  to { transform: scale(1); opacity: 0; }
}

.arena-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.btn {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

.btn.btn-primary {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: #001018;
  font-weight: 700;
}

.btn.btn-primary:hover { box-shadow: 0 0 20px -4px var(--accent-cyan); }

/* ==========================================================================
   RESULT MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.82);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.modal-overlay.open { display: flex; }

.result-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 60px -10px rgba(var(--accent-cyan-rgb), 0.4);
}

.result-modal .eyebrow {
  font-family: var(--font-mono);
  color: var(--accent-magenta);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.result-modal .cps-big {
  font-family: var(--font-mono);
  font-size: 3.4rem;
  color: var(--accent-cyan);
  margin: 10px 0 0;
  line-height: 1;
}

.result-modal .cps-big span { font-size: 1.1rem; color: var(--text-muted); }

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0;
}

.result-grid div {
  background: var(--bg-surface-raised);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
}

.result-grid .r-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-faint);
  text-transform: uppercase;
}

.result-grid .r-value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-top: 4px;
}

.rank-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-amber);
  margin-bottom: 18px;
}

.modal-actions { display: flex; gap: 10px; justify-content: center; }

.name-prompt {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
}

.name-prompt input {
  flex: 1;
  background: var(--bg-base);
  border: 1px solid var(--border-dim);
  color: var(--text-primary);
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.name-prompt input:focus { outline: none; border-color: var(--accent-cyan); }

/* ==========================================================================
   LEADERBOARD
   ========================================================================== */
.leaderboard-section {
  padding: 40px 24px 60px;
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 620px;
  margin: 0 auto;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-head h2 { font-size: 1.1rem; margin: 0; }

.panel-head .live-dot {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-head .live-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px 1px var(--accent-cyan);
}

.leaderboard-list { list-style: none; margin: 0; padding: 0; }

.leaderboard-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-dim);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.leaderboard-list li:last-child { border-bottom: none; }

.leaderboard-list .rank { color: var(--text-faint); }
.leaderboard-list li:nth-child(1) .rank { color: var(--accent-amber); }
.leaderboard-list li:nth-child(2) .rank { color: #c9d3e0; }
.leaderboard-list li:nth-child(3) .rank { color: #c98a4a; }

.leaderboard-list .lb-name { color: var(--text-primary); }
.leaderboard-list .lb-score { color: var(--accent-cyan); }

.leaderboard-empty {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px 0;
}

/* ==========================================================================
   CONTENT / FAQ
   ========================================================================== */
.content-section {
  padding: 20px 24px 60px;
  max-width: 820px;
  margin: 0 auto;
}

.content-section h2 {
  font-size: 1.3rem;
  border-left: 3px solid var(--accent-cyan);
  padding-left: 12px;
  margin-top: 2.2em;
}

.content-section p { color: var(--text-muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border-dim);
  padding: 30px 24px;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.site-footer a { color: var(--text-muted); }
.footer-nav { margin-bottom: 10px; line-height: 2; }

@media (max-width: 480px) {
  .stat-value { font-size: 1.4rem; }
  .result-modal { padding: 24px 18px; }
}

/* ==========================================================================
   NEW: tool icon badge, FAQ accordion, ad slots, language switcher, and the
   new engines added for the 50-tool expansion (typing / reaction / aim /
   calculator / keyboard-test).
   ========================================================================== */

.tool-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--accent-cyan-dim);
  border: 1px solid var(--border-glow);
  color: var(--accent-cyan);
  margin-bottom: 10px;
}
.tool-icon-badge .tool-icon { display: block; }
.tool-nav-label .tool-icon, .tool-grid-item .tool-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- FAQ accordion ---- */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 4px 18px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--accent-cyan);
  font-size: 1.2rem;
  margin-left: 12px;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--text-muted); padding-bottom: 14px; margin: 0; }

/* ---- Ad slots ---- */
.ad-slot {
  margin: 22px auto;
  max-width: 728px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-slot-sidebar { max-width: none; margin: 16px 12px; }

/* ---- Language switcher ---- */
.lang-switcher { position: relative; }
.lang-switcher-btn { display: flex; align-items: center; gap: 4px; }
.lang-switcher-code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.lang-switcher-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 6px;
  min-width: 170px;
  z-index: 50;
  list-style: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.lang-switcher-menu.open { display: block; }
.lang-switcher-menu li {
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.lang-switcher-menu li:hover { background: var(--accent-cyan-dim); color: var(--text-primary); }

/* ---- Typing test ---- */
.typing-root { max-width: 720px; margin: 0 auto; }
.typing-passage {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-faint);
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 14px;
  max-height: 160px;
  overflow-y: auto;
}
.typing-passage .ty-ok { color: var(--accent-cyan); }
.typing-passage .ty-bad { color: var(--accent-magenta); text-decoration: underline; }
.typing-passage .ty-cursor { background: var(--accent-cyan-dim); border-radius: 2px; }
.typing-input {
  width: 100%;
  resize: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 14px;
}
.typing-input:focus { outline: 2px solid var(--accent-cyan); }

/* ---- Reaction test ---- */
.reaction-pad.is-waiting { background: var(--accent-magenta-dim); border-color: var(--accent-magenta); }
.reaction-pad.is-armed { background: rgba(50, 220, 120, 0.18); border-color: #32dc78; }
.reaction-pad.is-early { background: var(--accent-magenta-dim); border-color: var(--accent-magenta); }
.reaction-times-list { margin-top: 10px; padding-left: 18px; color: var(--text-muted); }

/* ---- Aim trainer ---- */
.aim-field {
  position: relative;
  max-width: 720px;
  height: 360px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  overflow: hidden;
  cursor: crosshair;
}
.aim-target {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent-cyan), var(--accent-magenta));
  box-shadow: 0 0 18px var(--accent-cyan);
  cursor: pointer;
}
.aim-start-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ---- Calculator ---- */
.calc-box {
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  padding: 22px;
}
.calc-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-bottom: 12px; }
.calc-row label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--text-muted); flex: 1 1 160px; }
.calc-row input {
  background: var(--bg-void);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.calc-result { color: var(--accent-cyan); font-family: var(--font-mono); min-height: 1.2em; }
.calc-box hr { border: none; border-top: 1px solid var(--border-dim); margin: 18px 0; }

/* ---- Keyboard tester ---- */
.kbtest-root { max-width: 900px; margin: 0 auto; user-select: none; }
.kb-row { display: flex; gap: 5px; margin-bottom: 5px; justify-content: center; }
.kb-key {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  transition: background 0.08s, color 0.08s;
}
.kb-key.kb-Space { min-width: 220px; }
.kb-key.kb-Backspace, .kb-key.kb-Enter, .kb-key.kb-Tab, .kb-key.kb-CapsLock { min-width: 60px; }
.kb-key.kb-ShiftLeft, .kb-key.kb-ShiftRight { min-width: 70px; }
.kb-key.is-pressed { background: var(--accent-cyan); color: var(--bg-void); border-color: var(--accent-cyan); }
.kbtest-hint { text-align: center; color: var(--text-faint); margin-top: 14px; font-size: 0.85rem; }

/* ---- Shared result-inline block (typing / reaction / aim) ---- */
.result-inline {
  max-width: 520px;
  margin: 16px auto 0;
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--text-primary);
}

@media (max-width: 700px) {
  .kb-key { min-width: 24px; height: 28px; font-size: 0.62rem; }
  .kb-key.kb-Space { min-width: 120px; }
  .aim-field { height: 280px; }
}

.tool-subnav li a { display: flex; align-items: center; gap: 8px; }

/* ---- Mouse Test (button + scroll diagnostic) ---- */
.mousetest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}
.mousetest-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.mousetest-btn .mt-label { display: block; color: var(--text-muted); font-size: 0.82rem; margin-bottom: 8px; }
.mousetest-btn .mt-count { display: block; font-family: var(--font-mono); font-size: 1.6rem; color: var(--text-primary); }
.mousetest-btn.is-active { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); }

/* ---- Mouse Rate Checker ---- */
.pollrate-zone {
  max-width: 640px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-dim);
  border-radius: 14px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  cursor: crosshair;
  user-select: none;
}

/* ---- Mouse Accuracy Test ---- */
.accuracy-field {
  position: relative;
  max-width: 720px;
  height: 360px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  overflow: hidden;
  cursor: crosshair;
}
.accuracy-target {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent-cyan), var(--accent-magenta));
  box-shadow: 0 0 18px var(--accent-cyan);
  cursor: pointer;
}

/* ---- Latency Test (mouse + keyboard variants) ---- */
.latency-box {
  max-width: 560px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.1s;
}
.latency-box.is-waiting { background: var(--accent-magenta-dim); border-color: var(--accent-magenta); color: var(--text-primary); }
.latency-box.is-ready { background: rgba(50, 220, 120, 0.18); border-color: #32dc78; color: var(--text-primary); }
.latency-box.is-early { background: var(--accent-magenta-dim); border-color: var(--accent-magenta); }

/* ---- Keyboard Counter / Key Rollover shared zone style ---- */
.keycounter-zone, .rollover-zone {
  max-width: 560px;
  height: 140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-dim);
  border-radius: 14px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  padding: 0 20px;
}
.keycounter-zone:focus, .rollover-zone:focus { outline: 2px solid var(--accent-cyan); }

/* ---- Chimp Test ---- */
.chimp-grid {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.chimp-cell { position: relative; }
.chimp-tile {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: var(--accent-cyan-dim);
  border: 1px solid var(--accent-cyan);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  cursor: pointer;
}
.chimp-tile.is-revealed { background: var(--bg-surface-raised); }
.chimp-tile:not(.is-revealed) { background: var(--accent-magenta-dim); border-color: var(--accent-magenta); }

/* ---- Touch Screen Test ---- */
.touchtest-zone {
  position: relative;
  max-width: 720px;
  height: 340px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px dashed var(--border-dim);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  touch-action: none;
  overflow: hidden;
  user-select: none;
}
.touchtest-dot {
  position: absolute;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent-cyan), var(--accent-magenta));
  box-shadow: 0 0 16px var(--accent-cyan);
  pointer-events: none;
}

/* ---- Minecraft generator suite (shared components) ----
   Restyled with a subtle "blocky" pixel-corner motif (clipped square
   notches on panel corners, like a crafting-table slot) layered on top
   of the site's existing cyberpunk palette, plus an emerald accent used
   specifically for Minecraft tools so they read as a distinct family. */
.mc-tool-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(180deg, var(--bg-surface-raised), var(--bg-surface));
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgba(85, 214, 122, 0.08), 0 12px 30px rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 10px), 0 calc(100% - 10px));
  position: relative;
}

.mc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto 18px;
}
.mc-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.mc-controls input, .mc-controls select {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mc-controls input:focus, .mc-controls select:focus { outline: none; border-color: var(--accent-emerald); box-shadow: 0 0 0 2px var(--accent-emerald-dim); }
.mc-controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: 760px; }
.mc-checkbox-label { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 12px; }

/* Give Minecraft-tool primary buttons a distinct emerald identity rather
   than the site-wide cyan, so this tool family feels visually its own. */
.mc-tool-panel .btn-primary,
.mc-controls .btn-primary,
#mc-username-root .btn-primary {
  background: linear-gradient(180deg, var(--accent-emerald), #2fae57);
  border-color: var(--accent-emerald);
  color: #062b12;
  font-weight: 700;
}
.mc-tool-panel .btn-primary:hover,
.mc-controls .btn-primary:hover,
#mc-username-root .btn-primary:hover { filter: brightness(1.08); }

.mc-grid {
  display: grid;
  gap: 1px;
  max-width: 480px;
  margin: 0 auto 14px;
  background: var(--border-dim);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  overflow: hidden;
}
.mc-cell { background: var(--bg-surface); aspect-ratio: 1 / 1; transition: background 0.1s ease; }
.mc-cell.is-filled { background: var(--mc-tint, var(--accent-emerald)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }

.mc-textarea {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 10px 12px;
  resize: vertical;
}

.mc-slider-label {
  display: block;
  max-width: 480px;
  margin: 0 auto 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.mc-slider-label span { color: var(--accent-emerald); font-weight: 600; }
.mc-slider-label input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 8px;
  accent-color: var(--accent-emerald);
}

.mc-color-preview { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 16px; font-family: var(--font-mono); color: var(--text-muted); flex-wrap: wrap; text-align: center; }
.mc-swatch { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--border-dim); box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); }

.mc-swatch-presets { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 auto 18px; max-width: 480px; }
.mc-preset-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid var(--border-dim);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.mc-preset-swatch:hover { transform: scale(1.12); border-color: var(--accent-emerald); }

.mc-chip-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 720px; margin: 0 auto 16px; }
.mc-chip {
  background: var(--accent-emerald-dim);
  border: 1px solid rgba(85, 214, 122, 0.4);
  color: var(--accent-emerald);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.mc-chip:hover { background: rgba(85, 214, 122, 0.28); transform: translateY(-1px); }

.mc-font-outputs { max-width: 720px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 10px; }
.mc-font-row { display: flex; align-items: center; gap: 10px; }
.mc-font-label { width: 90px; flex-shrink: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8rem; }
.mc-font-value { flex: 1; background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: 8px; color: var(--text-primary); padding: 8px 10px; font-size: 1rem; }

.mc-username-list { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.mc-username-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: 8px; padding: 10px 14px; }
.mc-username-value { font-family: var(--font-mono); color: var(--text-primary); font-size: 1rem; flex: 1; }
.mc-reroll-btn { font-size: 1rem; line-height: 1; padding: 6px 10px; }

/* Live title/subtitle preview screen, styled loosely like an in-game HUD
   backdrop, with the fade-in/stay/fade-out animation driven by CSS
   variables the JS sets right before playback. */
.mc-preview-screen {
  max-width: 640px;
  margin: 0 auto 16px;
  min-height: 140px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 30%, rgba(85, 214, 122, 0.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
    var(--bg-void);
  border: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mc-preview-titles { text-align: center; padding: 24px; }
.mc-preview-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--text-primary);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  opacity: 1;
}
.mc-preview-subtitle {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 8px;
  opacity: 1;
}
.mc-preview-title.is-playing,
.mc-preview-subtitle.is-playing {
  animation-name: mc-title-fade;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes mc-title-fade {
  0% { opacity: 0; transform: scale(0.94); }
  /* fade-in ends here; percentage is recalculated by the JS-set duration,
     so this keeps a sensible shape across a wide range of timings */
  15% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* ---- Scientific Calculator ---- */
.sci-calc { max-width: 360px; margin: 0 auto; }
.sci-display {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.sci-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sci-key {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 14px 0;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.sci-key:hover { border-color: var(--accent-cyan); }
.sci-key-equals { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); grid-column: span 1; }

/* ---- Idle Clicker (Cookie / Stimulation / Whopper) ---- */
.idle-upgrades { max-width: 520px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 8px; }
.idle-upgrade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.idle-upgrade-row button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Core Ball ---- */
.coreball-field {
  position: relative;
  max-width: 320px;
  height: 420px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.coreball-ball {
  position: absolute;
  left: 50%;
  top: 0;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent-cyan), var(--accent-magenta));
  box-shadow: 0 0 18px var(--accent-cyan);
}

/* ---- Dinosaur Game ---- */
.dino-field {
  position: relative;
  max-width: 640px;
  height: 200px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  overflow: hidden;
}
.dino-player {
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 28px;
  height: 32px;
  background: var(--accent-cyan);
  border-radius: 4px;
}
.dino-obstacle {
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 30px;
  background: var(--accent-magenta);
  border-radius: 3px;
}

/* ---- Word Game (Wordle / PalabRETO) ---- */
.word-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; max-width: 320px; margin: 0 auto 18px; }
.word-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.word-tile {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--border-dim);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-primary);
  text-transform: uppercase;
}
.word-tile.is-correct { background: rgba(50, 220, 120, 0.25); border-color: #32dc78; }
.word-tile.is-present { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); }
.word-tile.is-absent { background: var(--bg-surface-raised); border-color: var(--border-dim); opacity: 0.6; }
.word-keyboard { display: flex; flex-direction: column; gap: 6px; max-width: 480px; margin: 0 auto; }
.word-kb-row { display: flex; gap: 4px; justify-content: center; }
.word-key {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 12px 8px;
  min-width: 30px;
  cursor: pointer;
}
.word-key.is-correct { background: rgba(50, 220, 120, 0.25); border-color: #32dc78; }
.word-key.is-present { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); }
.word-key.is-absent { opacity: 0.4; }

/* ==========================================================================
   STATIC PAGES: About / Contact / Privacy / Terms / Blog / 404
   ========================================================================== */

/* ---- "By the numbers" stat strip (About page) ---- */
.stat-strip-section { padding: 0 24px 10px; }
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.stat-strip-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 20px 12px;
  text-align: center;
}
.stat-strip-value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--accent-cyan);
  font-weight: 700;
}
.stat-strip-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Value / feature cards (About page) ---- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.value-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 22px;
}
.value-card .tool-icon { color: var(--accent-cyan); width: 26px; height: 26px; margin-bottom: 12px; }
.value-card h3 { font-size: 1rem; margin-bottom: 6px; }
.value-card p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* ---- Contact page ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-cyan);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .btn-primary { align-self: flex-start; padding: 12px 28px; }
.form-status {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { border-color: #32dc78; color: #32dc78; }
.form-status.is-error { border-color: var(--accent-magenta); color: var(--accent-magenta); }

.contact-info-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 22px;
}
.contact-info-panel h3 { font-size: 0.95rem; margin-bottom: 4px; }
.contact-info-panel p { color: var(--text-muted); font-size: 0.88rem; }
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-dim);
}
.contact-info-row:first-of-type { border-top: none; padding-top: 0; }
.contact-info-row .tool-icon { color: var(--accent-cyan); width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.contact-info-row a { color: var(--text-primary); }
.contact-info-row a:hover { color: var(--accent-cyan); }

/* ---- Legal pages (Privacy / Terms) ---- */
.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: -22px;
  margin-bottom: 10px;
}
.legal-toc {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 0 0 10px;
}
.legal-toc h2 { border: none; padding: 0; margin: 0 0 10px; font-size: 0.95rem; }
.legal-toc ol { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.9; }
.legal-toc a { color: var(--text-muted); }
.legal-toc a:hover { color: var(--accent-cyan); }
.content-section h3 { font-size: 1.05rem; margin-top: 1.4em; }
.content-section ul { color: var(--text-muted); }
.content-section li { margin-bottom: 6px; }

/* ---- Blog index ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 20px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-card:hover { border-color: var(--accent-cyan); transform: translateY(-2px); text-decoration: none; }
.blog-card-media {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-surface-raised), var(--bg-base));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.blog-card h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.blog-card p { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 12px; flex: 1; }
.blog-card-readmore {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.blog-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px 40px;
}
.pagination a,
.pagination span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim);
  color: var(--text-muted);
}
.pagination a:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); text-decoration: none; }
.pagination .current { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ---- Single blog post ---- */
.single-post-meta {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: -22px;
  margin-bottom: 18px;
}
.single-post-thumb {
  max-width: 820px;
  margin: 0 auto 10px;
  padding: 0 24px;
}
.single-post-thumb img { border-radius: var(--radius-md); border: 1px solid var(--border-dim); width: 100%; }
.single-post-body { color: var(--text-muted); }
.single-post-body h2 { color: var(--text-primary); }
.single-post-body a { text-decoration: underline; }
.single-post-body img { border-radius: var(--radius-md); margin: 20px 0; }
.post-nav {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 24px 24px 0;
  border-top: 1px solid var(--border-dim);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.post-nav a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 45%;
}
.post-nav a:hover { color: var(--accent-cyan); }
.post-nav .post-nav-dir { display: block; color: var(--text-faint); font-size: 0.7rem; text-transform: uppercase; margin-bottom: 4px; }

/* ---- 404 ---- */
.error-page {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 24px 30px;
}
.error-page .error-code {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5rem);
  color: var(--accent-cyan);
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 30px var(--accent-cyan-dim);
}
.error-page-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* ==========================================================================
   TOOL PAGE RICH CONTENT BLOCKS (optional per-tool 'sections' data)
   ========================================================================== */
.value-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  border: 1px solid var(--accent-cyan);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.benchmark-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
}
.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 460px;
}
.benchmark-table th,
.benchmark-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dim);
  white-space: nowrap;
}
.benchmark-table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  background: var(--bg-surface);
}
.benchmark-table tbody tr:last-child td { border-bottom: none; }
.benchmark-table tbody tr:hover { background: var(--bg-surface); }
.benchmark-table td:first-child { color: var(--text-primary); font-weight: 600; }
.benchmark-table td { color: var(--text-muted); }

.step-list {
  list-style: none;
  counter-reset: cps-step;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step-item {
  counter-increment: cps-step;
  display: flex;
  gap: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.step-item::before {
  content: counter(cps-step);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
}
.step-body h3 { font-size: 0.98rem; margin: 0 0 4px; }
.step-body p { color: var(--text-muted); font-size: 0.88rem; margin: 0; }

/* ==========================================================================
   RESULT MODAL: animal score tier + share buttons
   ========================================================================== */
.score-tier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 4px;
}
.score-tier-emoji { font-size: 1.6rem; line-height: 1; }
.score-tier-name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.share-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-dim);
}
.share-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-dim);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.share-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); transform: translateY(-1px); }
.share-btn.is-copied { border-color: #32dc78; color: #32dc78; }

/* ==========================================================================
   DOUBLE-CLICK / DEBOUNCE ANALYSIS PANEL
   ========================================================================== */
.debounce-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 460px;
  margin: 4px auto 0;
}
.debounce-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  text-align: center;
}
.debounce-stat-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--accent-cyan);
  font-weight: 700;
}
.debounce-stat.is-warning .debounce-stat-value { color: var(--accent-magenta); }
.debounce-stat-label {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
  line-height: 1.3;
}
.debounce-result-summary {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* ==========================================================================
   PER-TOOL VISUAL THEMES
   Each tool below gets its own accent palette + a few bespoke touches,
   scoped to `main.tool-theme-{slug}` (set in page-tool.php) so the rest of
   the site (sidebar, header, other tool pages) is untouched.
   ========================================================================== */

/* ---- Cookie Clicker: warm bakery theme ---- */
main.tool-theme-cookie-clicker {
  --accent-cyan: #ffb347;
  --accent-cyan-rgb: 255, 179, 71;
  --accent-cyan-dim: rgba(255, 179, 71, 0.16);
  --accent-magenta: #c9762f;
  --accent-magenta-rgb: 201, 118, 47;
  --border-glow: rgba(255, 179, 71, 0.35);
  --bg-surface: #1c140d;
  --bg-surface-raised: #241a10;
  --border-dim: #3a2a1b;
}
main.tool-theme-cookie-clicker { background: radial-gradient(circle at 50% 0%, rgba(255, 179, 71, 0.07), transparent 55%); }
main.tool-theme-cookie-clicker #idle-click-target {
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.25), transparent 40%),
    radial-gradient(circle at 50% 50%, #c9762f 0%, #8a5424 70%);
  border-color: #ffb347;
}
main.tool-theme-cookie-clicker #idle-click-target::after {
  content: "🍪";
  position: absolute;
  font-size: clamp(3rem, 12vw, 5.5rem);
  z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
main.tool-theme-cookie-clicker .click-pad .pad-label { opacity: 0; }

/* ---- Whopper Clicker: fast-food theme ---- */
main.tool-theme-whopper-clicker {
  --accent-cyan: #ffcc00;
  --accent-cyan-rgb: 255, 204, 0;
  --accent-cyan-dim: rgba(255, 204, 0, 0.16);
  --accent-magenta: #e0392b;
  --accent-magenta-rgb: 224, 57, 43;
  --border-glow: rgba(224, 57, 43, 0.4);
  --bg-surface: #1c1109;
  --bg-surface-raised: #241408;
  --border-dim: #3a2412;
}
main.tool-theme-whopper-clicker { background: radial-gradient(circle at 50% 0%, rgba(224, 57, 43, 0.08), transparent 55%); }
main.tool-theme-whopper-clicker #idle-click-target {
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.2), transparent 40%),
    linear-gradient(180deg, #d94a2b 0%, #7a2412 100%);
  border-color: #ffcc00;
}
main.tool-theme-whopper-clicker #idle-click-target::after {
  content: "🍔";
  position: absolute;
  font-size: clamp(3rem, 12vw, 5.5rem);
  z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
main.tool-theme-whopper-clicker .click-pad .pad-label { opacity: 0; }

/* ---- Core Ball: neon orb / sci-fi arcade theme ---- */
main.tool-theme-core-ball {
  --accent-cyan: #7c5cff;
  --accent-cyan-rgb: 124, 92, 255;
  --accent-cyan-dim: rgba(124, 92, 255, 0.16);
  --accent-magenta: #ff2ee0;
  --accent-magenta-rgb: 255, 46, 224;
  --border-glow: rgba(124, 92, 255, 0.4);
}
main.tool-theme-core-ball { background: radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.08), transparent 55%); }
main.tool-theme-core-ball .coreball-field {
  background:
    radial-gradient(circle at 50% 100%, rgba(124, 92, 255, 0.1), transparent 60%),
    repeating-linear-gradient(0deg, rgba(124,92,255,0.05) 0 1px, transparent 1px 40px),
    var(--bg-surface);
  border-color: var(--border-glow);
}
main.tool-theme-core-ball .coreball-ball { box-shadow: 0 0 26px var(--accent-cyan), 0 0 50px rgba(255,46,224,0.4); }

/* ---- Dinosaur Game: prehistoric desert theme ---- */
main.tool-theme-dinosaur-game {
  --accent-cyan: #d9a441;
  --accent-cyan-rgb: 217, 164, 65;
  --accent-cyan-dim: rgba(217, 164, 65, 0.16);
  --accent-magenta: #6b8f3e;
  --accent-magenta-rgb: 107, 143, 62;
  --border-glow: rgba(217, 164, 65, 0.35);
  --bg-surface: #16150e;
  --bg-surface-raised: #1c1a11;
  --border-dim: #332c1c;
}
main.tool-theme-dinosaur-game { background: linear-gradient(180deg, rgba(217, 164, 65, 0.06), transparent 40%); }
main.tool-theme-dinosaur-game .dino-field {
  background:
    linear-gradient(180deg, transparent 82%, rgba(217,164,65,0.35) 82%, rgba(217,164,65,0.35) 100%),
    var(--bg-surface);
}
main.tool-theme-dinosaur-game .dino-player {
  background: none;
  width: 30px; height: 34px;
}
main.tool-theme-dinosaur-game .dino-player::before {
  content: "🦖";
  font-size: 1.7rem;
  line-height: 1;
  position: absolute;
  bottom: 0;
}
main.tool-theme-dinosaur-game .dino-obstacle { background: #6b8f3e; border-radius: 2px 2px 0 0; }

/* ---- Double Click Test: precision circuitry theme ---- */
main.tool-theme-double-click-test {
  --accent-cyan: #2fd0ff;
  --accent-cyan-rgb: 47, 208, 255;
  --border-glow: rgba(47, 208, 255, 0.4);
}
main.tool-theme-double-click-test { background: repeating-linear-gradient(90deg, rgba(47,208,255,0.03) 0 1px, transparent 1px 34px), radial-gradient(circle at 50% 0%, rgba(47, 208, 255, 0.07), transparent 55%); }
main.tool-theme-double-click-test .click-pad .pad-ring { border-style: solid; border-width: 1px 1px 1px 1px; opacity: 0.6; }

/* ---- Jitter Click Test: high-voltage electric theme ---- */
main.tool-theme-jitter-click-test {
  --accent-cyan: #f4ff2e;
  --accent-cyan-rgb: 244, 255, 46;
  --accent-cyan-dim: rgba(244, 255, 46, 0.16);
  --border-glow: rgba(244, 255, 46, 0.45);
}
main.tool-theme-jitter-click-test { background: radial-gradient(circle at 50% 0%, rgba(244, 255, 46, 0.08), transparent 55%); }
main.tool-theme-jitter-click-test .click-pad { animation: jitter-shake 2.2s ease-in-out infinite; }
@keyframes jitter-shake {
  0%, 92%, 100% { transform: translate(0, 0); }
  93% { transform: translate(-1.5px, 1px); }
  94% { transform: translate(1.5px, -1px); }
  95% { transform: translate(-1px, -1.5px); }
  96% { transform: translate(1px, 1.5px); }
  97% { transform: translate(-1.5px, 0); }
}

/* ---- Drag Click Test: friction / streak theme ---- */
main.tool-theme-drag-click-test {
  --accent-cyan: #ff7a2e;
  --accent-cyan-rgb: 255, 122, 46;
  --accent-cyan-dim: rgba(255, 122, 46, 0.16);
  --accent-magenta: #ff2e4d;
  --accent-magenta-rgb: 255, 46, 77;
  --border-glow: rgba(255, 122, 46, 0.4);
}
main.tool-theme-drag-click-test { background: radial-gradient(circle at 50% 0%, rgba(255, 122, 46, 0.08), transparent 55%); }
main.tool-theme-drag-click-test .click-pad {
  background:
    repeating-linear-gradient(115deg, rgba(255,122,46,0.14) 0 3px, transparent 3px 10px),
    var(--bg-surface-raised);
}

/* ---- APM Test: real-time-strategy command theme ---- */
main.tool-theme-apm-test {
  --accent-cyan: #2ee6a8;
  --accent-cyan-rgb: 46, 230, 168;
  --accent-cyan-dim: rgba(46, 230, 168, 0.16);
  --accent-magenta: #ffb020;
  --accent-magenta-rgb: 255, 176, 32;
  --border-glow: rgba(46, 230, 168, 0.4);
}
main.tool-theme-apm-test { background: repeating-linear-gradient(0deg, rgba(46,230,168,0.035) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(46,230,168,0.035) 0 1px, transparent 1px 28px); }

/* ---- Roblox Click Test: blocky brand theme ---- */
main.tool-theme-roblox-click-test {
  --accent-cyan: #e2231a;
  --accent-cyan-rgb: 226, 35, 26;
  --accent-cyan-dim: rgba(226, 35, 26, 0.14);
  --accent-magenta: #ffffff;
  --accent-magenta-rgb: 255, 255, 255;
  --border-glow: rgba(226, 35, 26, 0.4);
  --font-display: 'Arial Black', 'DM Sans', sans-serif;
}
main.tool-theme-roblox-click-test { background: radial-gradient(circle at 50% 0%, rgba(226, 35, 26, 0.07), transparent 55%); }
main.tool-theme-roblox-click-test .click-pad { border-radius: 22px; }
main.tool-theme-roblox-click-test .click-pad .pad-ring { border-radius: 16px; animation: none; border-style: solid; }