/* ===================================================================
   /gamepad-tester

   The controller is an inline SVG built by gamepad-tester.js. Each
   button group carries --v (its analog value, 0..1) and .is-down;
   highlight opacity follows --v directly, so a half-pressed trigger
   is visibly half lit. Scoped under .gp.
   =================================================================== */

.gp {
    --gp-accent: #3d8bff;
    --gp-ink: #10162b;
    --gp-muted: #5b6275;
    --gp-line: #e4e7ef;

    margin: 18px auto 24px;
    padding: 0;                       /* WebsiteTemplate gives <section> 60px */
    max-width: 1120px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--gp-line);
    box-shadow: 0 30px 60px -32px rgb(16 22 43 / 45%);
    overflow: hidden;
    text-align: left;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gp-ink);
}
.gp *, .gp *::before, .gp *::after { box-sizing: border-box; }
.gp button { font: inherit; }
.gp :where(p, dl, dd, h3, table) { margin: 0; }

.gp-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar ---------- */

.gp-topbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding: 12px 18px;
    background: linear-gradient(180deg, #151b33, #10162b);
    color: #cdd5ee;
}
.gp-pads { display: flex; gap: 6px; flex-wrap: wrap; }
.gp-pads:empty { display: none; }
.gp-pads button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px;
    border: 1px solid rgb(255 255 255 / 12%); border-radius: 999px; cursor: pointer;
    background: rgb(255 255 255 / 5%); color: #aeb8d6; font-size: .82rem; font-weight: 600;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gp-pads button[aria-selected="true"] { background: #fff; color: var(--gp-ink); border-color: #fff; }
.gp-tab-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #3d8bff; color: #fff; font-size: .75rem; font-weight: 800; }
.gp-conn { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500; margin-right: auto; }
.gp-conn-dot { width: 10px; height: 10px; border-radius: 50%; background: #64748b; box-shadow: 0 0 0 3px rgb(100 116 139 / 25%); }
.gp[data-state="connected"] .gp-conn-dot { background: #34f5a6; box-shadow: 0 0 0 3px rgb(52 245 166 / 25%), 0 0 10px #34f5a6; }
.gp-styles { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 8%); }
.gp-styles button {
    border: 0; border-radius: 999px; padding: 6px 12px; min-height: 32px;
    background: transparent; color: #aeb8d6; font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.gp-styles button:hover { color: #fff; }
.gp-styles button[aria-checked="true"] { background: #fff; color: var(--gp-ink); }

/* ---------- stage ---------- */

.gp-stage {
    position: relative;
    padding: clamp(14px, 3vw, 30px) clamp(8px, 3vw, 40px) clamp(22px, 3vw, 34px);
    background:
        radial-gradient(55% 60% at 50% 55%, rgb(61 139 255 / 22%), transparent 70%),
        linear-gradient(180deg, #10162b 0%, #1a2142 100%);
    min-height: 220px;
}
.gp-pad-wrap { width: min(100%, 780px); margin: 0 auto; transition: opacity .35s ease, filter .35s ease, transform .35s ease; }
.gp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gp[data-state="waiting"] .gp-pad-wrap,
.gp[data-state="unsupported"] .gp-pad-wrap { opacity: .22; filter: grayscale(.6) blur(1px); transform: scale(.97); }

.gp-wake {
    position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 20px; text-align: center; color: #e8ecfb;
}
.gp[data-state="waiting"] .gp-wake, .gp[data-state="unsupported"] .gp-wake { display: flex; }
.gp-wake strong { font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 800; }
.gp-wake span:last-child { max-width: 520px; color: #aeb8d6; font-size: .92rem; line-height: 1.5; }
.gp-wake-icon { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgb(61 139 255 / 18%); color: #93c5fd; animation: gp-breathe 2s ease-in-out infinite; }
.gp-wake-icon svg { width: 46px; height: 30px; }
@keyframes gp-breathe { 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgb(61 139 255 / 8%); } }

.gp-live {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    min-height: 26px; padding: 3px 14px; border-radius: 999px; max-width: calc(100% - 24px);
    background: rgb(255 255 255 / 10%); color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-live:empty { display: none; }

/* ---------- SVG parts ---------- */

.gp-svg .gp-shell { stroke: #0b0e1a; stroke-width: 3; }
.gp-shell-shadow { fill: #000; opacity: .35; filter: blur(14px); }
.gp-shell-rim { fill: none; stroke: #fff; stroke-opacity: .09; stroke-width: 2; transform: translate(0, 2px); }
.gp-well { fill: #0b0e1a; opacity: .75; }
.gp-well--face { opacity: .35; }
.gp[data-body="light"] .gp-well { fill: #1e2438; opacity: .9; }
.gp[data-body="light"] .gp-well--face { opacity: .12; }

.gp-b { --v: 0; --c: #3d8bff; }
.gp-base { fill: #262c42; stroke: #0b0e1a; stroke-width: 2; }
.gp-shadow { fill: #05070f; opacity: .6; }
.gp-hi { fill: var(--c); opacity: var(--v); }
.gp-b.is-down { filter: drop-shadow(0 0 10px var(--c)); }
.gp-press { transform-box: fill-box; transform-origin: center; transition: transform .06s ease; }
.gp-b.is-down .gp-press { transform: scale(.92); }
.gp-b.is-missing { opacity: .35; }
.gp-label { font-family: "Poppins", system-ui, sans-serif; font-weight: 800; pointer-events: none; }
.gp-b.is-down .gp-label { fill: #fff; }
.gp-glyph { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.gp-b.is-down .gp-glyph { stroke: #fff; }
.gp-arrow { fill: #64748b; pointer-events: none; }
.gp-b.is-down .gp-arrow { fill: #fff; }
.gp-dcentre { stroke: none; }

.gp-trigger .gp-base { fill: #1d2236; }
.gp-trig-svgfill { fill: var(--c); transform-box: fill-box; transform-origin: bottom; transform: scaleY(var(--v)); opacity: .95; }
.gp-trigger.is-down { filter: drop-shadow(0 0 10px var(--c)); }

.gp-travel { fill: none; stroke: #334155; stroke-width: 1.5; stroke-dasharray: 3 4; }
.gp-dz { fill: none; stroke: #fbbf24; stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 2 3; }
.gp-cap { transition: transform .02s linear; }
.gp-cap-base { fill: #2b3149; }
.gp-cap-dish { fill: none; stroke: #0b0e1a; stroke-opacity: .5; stroke-width: 3; }
.gp-cap .gp-hi { opacity: calc(var(--v) * .85); }
.gp-cap-dot { fill: #94a3b8; }
.gp-cap.is-down .gp-cap-dot { fill: #fff; }
.gp-touchpad { fill: #1f2539; }
.gp-lightbar { stroke: #60a5fa; stroke-width: 3; stroke-linecap: round; opacity: .8; filter: drop-shadow(0 0 6px #60a5fa); }
.gp-xlogo { fill: none; stroke: #0b0e1a; stroke-width: 2.5; }
.gp-xlogo-x { stroke: #0b0e1a; stroke-width: 2.5; stroke-linecap: round; }
.gp[data-body="light"] .gp-shell-rim { stroke: #fff; stroke-opacity: .6; }

/* ---------- body ---------- */

.gp > .gp-body { padding: 18px clamp(12px, 3vw, 28px) 24px; display: grid; gap: 16px; }

.gp-note { padding: 10px 14px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: .88rem; }
.gp-note[hidden] { display: none; }

.gp-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.gp-card { padding: 16px; border-radius: 20px; background: #f7f9fc; border: 1px solid var(--gp-line); display: grid; gap: 12px; align-content: start; min-width: 0; }
.gp-card h3 { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-muted); }
.gp-card h3 small { font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.gp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gp-small { font-size: .82rem; color: var(--gp-muted); line-height: 1.5; }

.gp-sticks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gp-stick { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.gp-stick canvas { width: min(100%, 220px); height: auto; aspect-ratio: 1; display: block; border-radius: 50%; }
.gp-stick dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; width: 100%; }
.gp-stick dt, .gp-info dt { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gp-muted); }
.gp-stick dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-stick dd.is-bad { color: #dc2626; }

.gp-drift { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--gp-line); }
.gp-verdict { flex: 1 1 240px; padding: 9px 12px; border-radius: 12px; background: #eef2f8; color: #334155; font-size: .88rem; font-weight: 600; }
.gp-verdict.is-ok { background: #f0fdf4; color: #14532d; }
.gp-verdict.is-warn { background: #fffbeb; color: #92400e; }
.gp-verdict.is-bad { background: #fef2f2; color: #991b1b; }

.gp-trigs { display: grid; gap: 8px; }
.gp-trig { display: grid; grid-template-columns: 34px 1fr 48px; align-items: center; gap: 10px; font-weight: 700; font-size: .85rem; }
.gp-trig-bar { height: 12px; border-radius: 999px; background: #e3e7f1; overflow: hidden; }
.gp-trig-fill { display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #fbbf24, #f97316); }
.gp-trig b { text-align: right; font-variant-numeric: tabular-nums; }

.gp-info { display: grid; gap: 8px; }
.gp-info div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; }
.gp-info dd { font-size: .88rem; font-weight: 600; word-break: break-word; }

.gp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-btn {
    min-height: 40px; padding: 0 16px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--gp-line); background: #fff; color: var(--gp-ink); font-weight: 600; font-size: .88rem;
    box-shadow: 0 4px 10px -8px rgb(16 22 43 / 45%);
    transition: background-color .15s ease, transform .1s ease;
}
.gp-btn:hover { background: #f4f7ff; }
.gp-btn:active { transform: translateY(1px) scale(.98); }
.gp-btn:disabled { opacity: .7; cursor: progress; }
.gp-btn--primary { background: linear-gradient(180deg, #5b9dff, var(--gp-accent)); border-color: transparent; color: #fff; }
.gp-btn--primary:hover { background: linear-gradient(180deg, #4b90fb, #2f7af0); }
.gp-btn--small { min-height: 32px; padding: 0 12px; font-size: .78rem; }
.gp-btn[hidden] { display: none; }

.gp-raw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.gp-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--gp-line); background: #fff; max-height: 420px; overflow-y: auto; }
.gp-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.gp-table th { position: sticky; top: 0; background: #f1f4f9; text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gp-muted); padding: 8px 10px; }
.gp-table td { padding: 6px 10px; border-top: 1px solid #eef1f6; white-space: nowrap; }
.gp-num { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.gp-table tr.is-down td { background: #eaf2ff; color: #1d4ed8; font-weight: 700; }
.gp-bar-col { width: 45%; }
.gp-axbar { position: relative; display: block; height: 8px; border-radius: 99px; background: #e8ecf3; min-width: 80px; }
.gp-axbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #94a3b8; }
.gp-axbar span { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--gp-accent); }
.gp-foot { padding: 0 2px; }

.gp-pads button:focus-visible, .gp-styles button:focus-visible, .gp-btn:focus-visible { outline: 3px solid var(--gp-accent); outline-offset: 2px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .gp-grid { grid-template-columns: 1fr; }
    .gp-raw { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .gp { border-radius: 22px; margin-inline: -4px; }
    .gp-topbar { padding: 10px 12px; }
    .gp-styles { width: 100%; }
    .gp-styles button { flex: 1; padding: 6px 4px; }
    .gp-stage { min-height: 260px; }
    .gp-sticks { gap: 8px; }
    .gp-stick dl { grid-template-columns: 1fr; }
    .gp-info div { grid-template-columns: 1fr; gap: 0; }
    .gp-wake span:last-child { font-size: .82rem; }
}
@media (pointer: coarse) {
    .gp-btn, .gp-styles button, .gp-pads button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .gp *, .gp *::before, .gp *::after { animation: none !important; transition: none !important; }
}