/* Wrap your tester in <div id="gamepad-tester"> ... </div> */
#gamepad-tester { --bg:#0b1020; --bg2:#0e1430; --panel:#121a33; --text:#e6e8ef; --muted:#aab4e6; color:var(--text); }
#gamepad-tester * { box-sizing:border-box; }

/* Don’t use body/header on Shopify; scope them */
#gamepad-tester .page-bg { background:linear-gradient(180deg,var(--bg),var(--bg2) 35%,var(--bg)); }
#gamepad-tester .header { position:sticky; top:0; z-index:5; background:#0c132a; border-bottom:1px solid #192149; padding:16px 20px; }
#gamepad-tester h1 { margin:0; font-size:18px; }
#gamepad-tester main { max-width:1100px; margin:0 auto; padding:20px; }

#gamepad-tester .card { background:var(--panel); border:1px solid #1b2450; border-radius:16px; padding:16px; }
#gamepad-tester .toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#gamepad-tester button,
#gamepad-tester select { background:#0e1733; border:1px solid #26316b; color:var(--text); border-radius:10px; padding:9px 12px; font-weight:600; }
#gamepad-tester button:hover { border-color:#3b4aa5; }
#gamepad-tester .pill { display:inline-flex; gap:8px; align-items:center; background:#0d1531; border:1px solid #23306a; padding:6px 10px; border-radius:999px; color:var(--muted); font-size:12px; }
#gamepad-tester .dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
#gamepad-tester .grid { display:grid; gap:16px; }
#gamepad-tester .cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
#gamepad-tester .stick { position:relative; height:360px; }
#gamepad-tester canvas { width:100%; height:100%; border:1px solid #273272; border-radius:12px; background:#0e1532; }
#gamepad-tester .stickLabel { position:absolute; top:8px; left:12px; color:#93a2e6; font-size:12px; }

/* Buttons */
#gamepad-tester #buttons { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px; }
#gamepad-tester .btnCell { border:1px solid #273272; background:#0e1634; border-radius:12px; padding:10px; text-align:center;
  transition:background .08s, color .08s, box-shadow .08s, border-color .08s; }
#gamepad-tester .btnCell .btnLabel { font-size:12px; color:var(--muted); }
#gamepad-tester .btnCell .btnValue { font-variant-numeric:tabular-nums; }
/* White flash when pressed */
#gamepad-tester .btnCell.pressed { background:#ffffff; color:#0b1020; border-color:#ffffff;
  box-shadow:0 0 0 2px #ffffff40, 0 0 18px #ffffff80 inset; }
#gamepad-tester .btnCell.pressed .btnLabel { color:#0b1020; }

/* Circularity wheels */
#gamepad-tester .wheelRow { display:grid; grid-template-columns:repeat(2,230px) 1fr; gap:16px; align-items:center; }
#gamepad-tester .wheel { position:relative; width:230px; height:230px; border-radius:50%; border:1px solid #273272; background:#0e1532; }
#gamepad-tester .wheel canvas { width:100%; height:100%; }
#gamepad-tester .wheel .overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; font-weight:800; text-align:center; }
#gamepad-tester .sub { font-size:12px; color:var(--muted); margin-top:4px; }

#gamepad-tester footer { opacity:.75; text-align:center; margin-top:18px; font-size:12px; }
/* ===== Mobile-friendly layout ===== */

/* Let the toolbar scroll horizontally on small screens */
#gamepad-tester .toolbar{
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
#gamepad-tester .toolbar > *{ scroll-snap-align: start; }

/* Reduce default paddings and radius a touch on mobile */
@media (max-width: 768px){
  #gamepad-tester main{ padding: 14px; }
  #gamepad-tester .card{ border-radius: 14px; padding: 14px; }
  #gamepad-tester h1{ font-size: 18px; }
  #gamepad-tester .card > h3{ font-size: 16px; }
}

/* Collapse the 2-column sticks section into a single column */
@media (max-width: 900px){
  #gamepad-tester .grid.cols-2{
    grid-template-columns: 1fr;
    align-items: stretch; /* each card full width */
  }
}

/* Stick card: let it grow, canvas height adapts via JS (below) */
#gamepad-tester .stick{ height:auto !important; }

/* Axes row under each stick: wrap nicely */
#gamepad-tester .axesRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* Axis tiles – slightly smaller on phones */
@media (max-width: 480px){
  #gamepad-tester .axesRow .axis{ padding:8px 10px; }
  #gamepad-tester .axesRow .axisTitle{ min-width:110px; }
  #gamepad-tester .axesRow .axisTitle span:last-child{ font-size:16px; }
  #gamepad-tester .axesRow .barWrap{ width:52px; height:8px; }
}

/* Buttons grid: keep buttons readable by shrinking columns on smaller screens */
#gamepad-tester #buttons{
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
@media (max-width: 480px){
  #gamepad-tester #buttons{
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 8px;
  }
}

/* Circularity section: stack wheels on small screens */
@media (max-width: 900px){
  #gamepad-tester .wheelRow{
    grid-template-columns: 1fr;   /* one per row */
  }
  #gamepad-tester .wheel{
    margin: 0 auto;               /* center the wheel */
  }
}

/* Controls: make touch targets comfy */
#gamepad-tester button,
#gamepad-tester select{
  min-height: 40px;
  line-height: 1.1;
}
@media (max-width: 480px){
  #gamepad-tester button,
  #gamepad-tester select{
    min-height: 44px;             /* iOS comfortable tap target */
    font-size: 15px;
    padding: 10px 12px;
  }
}
/* When button is pressed (white flash), make text black */
#gamepad-tester .btnCell.pressed {
  background: #ffffff;
  color: #0b1020;                     /* dark text color */
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff40, 0 0 18px #ffffff80 inset;
}

/* Specifically make label and value black when pressed */
#gamepad-tester .btnCell.pressed .btnLabel,
#gamepad-tester .btnCell.pressed .btnValue {
  color: #0b1020 !important;
}