/* DeadPixel — fullscreen pixel test: launcher panel, stage/HUD, exerciser,
   consent modal. Theme colors come from site.config.json (--primary blue /
   --accent red). Elements toggled via [hidden] keep display rules behind
   :not([hidden]) per repo convention (P015). */

/* ---- launcher panel ---- */

.dp-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem 1.25rem 1.3rem;
  margin: 1.4rem 0 2rem;
}
.dp-lbl {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.dp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.dp-sw {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem; /* 44px tap target */
  padding: 0.34rem 0.7rem 0.34rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}
.dp-sw:hover { border-color: var(--primary); }
.dp-sw:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dp-sw-chip {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: var(--surface-2);
}
.dp-sw[data-color="black"] .dp-sw-chip { background: #000; }
.dp-sw[data-color="white"] .dp-sw-chip { background: #fff; }
.dp-sw[data-color="red"] .dp-sw-chip { background: #f00; }
.dp-sw[data-color="green"] .dp-sw-chip { background: #0f0; }
.dp-sw[data-color="blue"] .dp-sw-chip { background: #00f; }
.dp-sw.is-off { opacity: 0.42; }
.dp-sw.is-off .dp-sw-chip { filter: grayscale(1); }

.dp-hue {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.dp-hue .dp-lbl { margin: 0; }
.dp-hue input[type="range"] { width: 11rem; accent-color: var(--primary); }
.dp-hue-val {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 650;
  min-width: 2.4em;
}
.dp-hue-chip {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.dp-opts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-bottom: 1rem;
}
.dp-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.dp-opt input[type="range"] { width: 7rem; accent-color: var(--primary); }
.dp-int-val { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 3em; }

.dp-launch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.dp-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* 44px tap target */
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.dp-btn:hover { border-color: var(--primary); color: var(--primary); }
.dp-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dp-start {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 1rem;
  padding: 0.6rem 1.5rem;
}
.dp-start:hover { color: #fff; filter: brightness(1.1); }
.dp-ex-open { border-color: var(--accent); color: var(--accent); }
.dp-note {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.dp-loading { color: var(--text-dim); }

/* ---- stage: fullscreen target (native fs) or fixed overlay (fallback) ---- */

body.dp-lock { overflow: hidden; }

.dp-stage:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.dp-stage:fullscreen { cursor: default; }
.dp-fallback { /* same fixed overlay — class marks the mode for __dp.fs() */ }

/* auto-cycle countdown bar across the top edge */
.dp-progress:not([hidden]) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  display: block;
  background: rgba(128, 128, 128, 0.25);
}
.dp-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(255, 255, 255, 0.85);
  mix-blend-mode: difference;
}

/* ---- test HUD ---- */

.dp-hud:not([hidden]) {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  max-width: min(94vw, 44rem);
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 17, 22, 0.82);
  color: #fff;
  font-size: 0.82rem;
  transition: opacity 0.35s;
}
.dp-hud-name { font-weight: 750; padding: 0 0.3rem; }
.dp-hud-pos {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
  padding-right: 0.3rem;
}
.dp-hbtn {
  font: inherit;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem; /* 40px — transient HUD compromise vs 44px */
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.dp-hbtn:hover { background: rgba(255, 255, 255, 0.16); }
.dp-hbtn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.dp-hud-int { display: inline-flex; align-items: center; gap: 0.15rem; }
.dp-hud-int-val { font-variant-numeric: tabular-nums; min-width: 2.8em; text-align: center; }
.dp-hud-hint {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
}
.dp-idle .dp-hud,
.dp-idle .dp-ex-hud { opacity: 0; pointer-events: none; }
.dp-idle { cursor: none; }

/* ---- guide overlay (fixed: works inside the stage in fullscreen and at
   page level for the launcher button) ---- */

div.dp-guide:not([hidden]) {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  overflow: auto;
}
.dp-guide-card {
  max-width: 34rem;
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  color: var(--text);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-size: 0.92rem;
}
.dp-guide-card h2 { margin-top: 0; font-size: 1.2rem; }
.dp-glist { list-style: none; padding: 0; margin: 0.6rem 0; }
.dp-glist li { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.3rem 0; }
.dp-gdot {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  align-self: center;
}
.dp-gdot[data-g="black"] { background: #000; }
.dp-gdot[data-g="white"] { background: #fff; }
.dp-gdot[data-g="red"] { background: #f00; }
.dp-gdot[data-g="green"] { background: #0f0; }
.dp-gdot[data-g="blue"] { background: #00f; }
.dp-gdot[data-g="custom"] { background: linear-gradient(135deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f); }
.dp-guide-keys { font-size: 0.78rem; color: var(--text-dim); }
.dp-guide-card .dp-btn { margin-top: 0.5rem; margin-right: 0.4rem; }

/* ---- exerciser ---- */

.dp-stage[data-mode="exerciser"] { background: #111318; }

.dp-ex-box:not([hidden]) {
  position: absolute;
  display: block;
  width: 140px;
  height: 140px;
  left: 0;
  top: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  cursor: grab;
  touch-action: none;
}
.dp-ex-box:active { cursor: grabbing; }

.dp-ex-hud:not([hidden]) {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 94vw;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 17, 22, 0.82);
  color: #fff;
  font-size: 0.8rem;
  transition: opacity 0.35s;
}
.dp-ex-hud select {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.22rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.dp-ex-hud select option { color: #111; }
.dp-ex-time { font-variant-numeric: tabular-nums; font-weight: 700; padding: 0 0.4rem; }

/* ---- consent modal ---- */

.dp-consent:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 12, 18, 0.6);
}
.dp-consent-card {
  max-width: 32rem;
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  padding: 1.2rem 1.4rem;
  font-size: 0.92rem;
}
.dp-consent-card h2 { margin-top: 0; font-size: 1.15rem; color: var(--accent); }
.dp-consent-card ul { padding-left: 1.2rem; }
.dp-consent-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0;
  font-weight: 650;
  cursor: pointer;
}
.dp-consent-check input { width: 1.2rem; height: 1.2rem; flex: none; }
.dp-consent-row { display: flex; justify-content: flex-end; gap: 0.5rem; }
.dp-consent-go { background: var(--accent); border-color: var(--accent); color: #fff; }
.dp-consent-go:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }

/* ---- small screens ---- */

@media (max-width: 640px) {
  .dp-panel { padding: 0.9rem 0.8rem 1.1rem; }
  .dp-hud:not([hidden]),
  .dp-ex-hud:not([hidden]) {
    border-radius: var(--radius);
    bottom: max(0.6rem, env(safe-area-inset-bottom));
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
  }
  .dp-hud-hint { display: none; }
  .dp-guide-card { font-size: 0.86rem; }
}