/* =========================================================
   Gamepad Controller Tester – WordPress Plugin Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

/* ── CSS VARIABLES ── */
#gpt-wrap {
  --bg:        #0a0c10;
  --surface:   #12161f;
  --border:    #1e2535;
  --accent:    #00e5ff;
  --accent2:   #ff3c6e;
  --green:     #39ff14;
  --yellow:    #ffe600;
  --blue:      #3b7eff;
  --red:       #ff3c3c;
  --text:      #c8d6e5;
  --muted:     #4a5568;
  --radius:    10px;
  --glow:      0 0 12px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);

  font-family: 'Share Tech Mono', monospace;
  background:  var(--bg);
  color:       var(--text);
  border-radius: 16px;
  padding:     28px 24px 24px;
  max-width:   900px;
  margin:      0 auto;
  border:      1px solid var(--border);
  box-shadow:  0 0 60px color-mix(in srgb, var(--accent) 8%, transparent),
               inset 0 1px 0 rgba(255,255,255,.04);
  user-select: none;
}

/* ── STATUS BAR ── */
#gpt-status {
  display:         flex;
  align-items:     center;
  gap:             10px;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--radius);
  padding:         10px 16px;
  margin-bottom:   22px;
  font-family:     'Orbitron', sans-serif;
  font-size:       .72rem;
  letter-spacing:  .08em;
  text-transform:  uppercase;
}

#gpt-status-dot {
  width:            10px;
  height:           10px;
  border-radius:    50%;
  background:       var(--muted);
  flex-shrink:      0;
  transition:       background .3s, box-shadow .3s;
}
#gpt-status-dot.connected {
  background:  var(--green);
  box-shadow:  0 0 8px var(--green);
  animation:   gpt-pulse 2s infinite;
}
@keyframes gpt-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.5; }
}
#gpt-controller-name {
  margin-left:  auto;
  color:        var(--accent);
  font-size:    .68rem;
  max-width:    260px;
  overflow:     hidden;
  text-overflow:ellipsis;
  white-space:  nowrap;
}

/* ── MAIN LAYOUT ── */
#gpt-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
}

.gpt-col { display:flex; flex-direction:column; gap:18px; }
.gpt-center-col { align-items:center; gap:20px; }

/* ── SECTION LABEL ── */
.gpt-stick-label {
  font-family:    'Orbitron', sans-serif;
  font-size:      .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  6px;
  text-align:     center;
}

/* ── ANALOG STICK ZONE ── */
.gpt-stick-zone {
  position:     relative;
  width:        100px;
  height:       100px;
  border-radius:50%;
  background:   radial-gradient(circle at 50% 50%, #1a2030 60%, #0d1018);
  border:       2px solid var(--border);
  margin:       0 auto;
  box-shadow:   inset 0 2px 8px rgba(0,0,0,.6);
  overflow:     hidden;
}
.gpt-stick-zone::before {
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background: conic-gradient(transparent 0deg, rgba(0,229,255,.04) 90deg, transparent 180deg, rgba(0,229,255,.04) 270deg, transparent 360deg);
}
/* crosshair lines */
.gpt-stick-zone::after {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) center/1px 100%,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) center/100% 1px;
}
.gpt-stick-dot {
  position:     absolute;
  width:        22px;
  height:       22px;
  border-radius:50%;
  background:   var(--accent);
  box-shadow:   var(--glow);
  top:50%; left:50%;
  transform:    translate(-50%, -50%);
  transition:   transform .05s linear;
  z-index:      2;
}

/* ── AXIS VALUES ── */
.gpt-axis-vals {
  display:         flex;
  justify-content: center;
  gap:             14px;
  font-size:       .72rem;
  color:           var(--muted);
  margin-top:      4px;
}

/* ── TRIGGER BARS ── */
.gpt-trigger-bar-wrap {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  4px;
}
.gpt-trigger-label {
  font-family:    'Orbitron', sans-serif;
  font-size:      .58rem;
  letter-spacing: .1em;
  color:          var(--muted);
  width:          18px;
}
.gpt-trigger-track {
  flex:         1;
  height:       8px;
  background:   var(--surface);
  border-radius:4px;
  border:       1px solid var(--border);
  overflow:     hidden;
}
.gpt-trigger-fill {
  height:       100%;
  width:        0%;
  background:   linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius:4px;
  transition:   width .05s linear;
  box-shadow:   0 0 6px var(--accent);
}

/* ── PILL BUTTONS ── */
.gpt-btn-row {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin-top:      6px;
}
.gpt-btn-pill {
  padding:      5px 10px;
  border-radius:20px;
  border:       1px solid var(--border);
  background:   var(--surface);
  font-size:    .68rem;
  font-family:  'Orbitron', sans-serif;
  letter-spacing:.06em;
  text-align:   center;
  cursor:       default;
  transition:   background .1s, border-color .1s, box-shadow .1s, color .1s;
}
.gpt-btn-pill.active {
  background:   color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: var(--accent);
  color:        var(--accent);
  box-shadow:   0 0 8px var(--accent);
}
.gpt-btn-pill.small { font-size:.58rem; padding:4px 8px; }

/* ── D-PAD ── */
.gpt-dpad-group { text-align:center; }
.gpt-dpad {
  display: grid;
  grid-template-columns: 36px 36px 36px;
  grid-template-rows:    36px 36px 36px;
  gap: 3px;
  width: fit-content;
  margin: 0 auto;
}
.gpt-dp-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   6px;
  font-size:       1rem;
  color:           var(--muted);
  cursor:          default;
  transition:      background .1s, color .1s, box-shadow .1s;
}
.gpt-dp-btn.active {
  background: color-mix(in srgb, var(--yellow) 20%, var(--surface));
  border-color: var(--yellow);
  color:        var(--yellow);
  box-shadow:   0 0 8px var(--yellow);
}
.gpt-dp-center { background:transparent; }
/* grid positions */
#gpt-dp-up    { grid-column:2; grid-row:1; }
#gpt-dp-left  { grid-column:1; grid-row:2; }
.gpt-dp-center{ grid-column:2; grid-row:2; }
#gpt-dp-right { grid-column:3; grid-row:2; }
#gpt-dp-down  { grid-column:2; grid-row:3; }

/* ── CENTER BUTTONS ── */
.gpt-center-btns {
  display:     flex;
  align-items: center;
  gap:         12px;
}
.gpt-home-btn {
  width:        52px;
  height:       52px;
  border-radius:50%;
  background:   radial-gradient(circle, #1e2535, #0a0c10);
  border:       2px solid var(--border);
  display:      flex;
  align-items:  center;
  justify-content:center;
  font-size:    1.4rem;
  cursor:       default;
  transition:   box-shadow .15s, border-color .15s;
}
.gpt-home-btn.active {
  border-color: var(--accent);
  box-shadow:   0 0 16px var(--accent), 0 0 32px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── FACE BUTTONS ── */
.gpt-abxy-group { text-align:center; }
.gpt-abxy {
  display:  grid;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows:    44px 44px 44px;
  gap:      4px;
  width:    fit-content;
  margin:   0 auto;
}
.gpt-face-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  border:          2px solid var(--border);
  background:      var(--surface);
  font-family:     'Orbitron', sans-serif;
  font-size:       .78rem;
  font-weight:     700;
  cursor:          default;
  transition:      background .1s, border-color .1s, box-shadow .1s, color .1s;
}
/* positions */
#gpt-btn-y { grid-column:2; grid-row:1; }
#gpt-btn-x { grid-column:1; grid-row:2; }
#gpt-btn-b { grid-column:3; grid-row:2; }
#gpt-btn-a { grid-column:2; grid-row:3; }

.gpt-face-btn.a.active { background:color-mix(in srgb,var(--green) 25%,var(--surface)); border-color:var(--green); color:var(--green); box-shadow:0 0 10px var(--green); }
.gpt-face-btn.b.active { background:color-mix(in srgb,var(--red)   25%,var(--surface)); border-color:var(--red);   color:var(--red);   box-shadow:0 0 10px var(--red); }
.gpt-face-btn.x.active { background:color-mix(in srgb,var(--blue)  25%,var(--surface)); border-color:var(--blue);  color:var(--blue);  box-shadow:0 0 10px var(--blue); }
.gpt-face-btn.y.active { background:color-mix(in srgb,var(--yellow)25%,var(--surface)); border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 10px var(--yellow); }

/* ── RUMBLE ── */
#gpt-rumble-wrap { text-align:center; }
.gpt-rumble-button {
  font-family: 'Orbitron', sans-serif;
  font-size:   .7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:       var(--accent);
  background:  transparent;
  border:      1px solid var(--accent);
  border-radius:6px;
  padding:     9px 22px;
  cursor:      pointer;
  transition:  background .2s, box-shadow .2s;
}
.gpt-rumble-button:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: 0 0 10px var(--accent);
}
.gpt-rumble-button:active { transform:scale(.97); }

/* ── STATS ── */
#gpt-stats {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           8px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 16px;
  width:         100%;
  box-sizing:    border-box;
}
.gpt-stat {
  display:       flex;
  flex-direction:column;
  gap:           2px;
}
.gpt-stat-label {
  font-size:   .55rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:       var(--muted);
  font-family: 'Orbitron', sans-serif;
}
.gpt-stat span:last-child {
  color:     var(--accent);
  font-size: .78rem;
}

/* ── RAW BUTTONS GRID ── */
#gpt-raw-wrap {
  margin-top:    22px;
  text-align:    center;
}
#gpt-raw-btns {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  justify-content: center;
  margin-top: 8px;
}
.gpt-raw-btn {
  width:           38px;
  height:          38px;
  border-radius:   8px;
  border:          1px solid var(--border);
  background:      var(--surface);
  font-size:       .6rem;
  font-family:     'Orbitron', sans-serif;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--muted);
  transition:      background .1s, border-color .1s, color .1s, box-shadow .1s;
}
.gpt-raw-btn.active {
  background:   color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: var(--accent);
  color:        var(--accent);
  box-shadow:   0 0 8px var(--accent);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  #gpt-main { grid-template-columns:1fr; }
  .gpt-col  { align-items:center; }
  .gpt-center-col { order:-1; }
}