/* static/css/landing/pitch_challenge.css */


/* ── Game page layout ───────────────────────────────────── */
.pg-page .lp-footer { display: none; }
.pg-page { overflow: hidden; }

/* Game root fills viewport below nav */
#pc-root {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #060612;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#pc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Perfect Pitch Challenge only: auto-hide top nav while playing */
body.pc-game-page #lp-nav {
  transition:
    transform .32s ease,
    opacity .28s ease,
    visibility .28s ease;
  will-change: transform, opacity;
}

body.pc-game-page.pc-nav-hidden #lp-nav {
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Optional: slightly faster return */
body.pc-game-page.pc-nav-visible #lp-nav {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Optional: prevent accidental hover opening while hidden */
body.pc-game-page.pc-nav-hidden .lp-nav__drawer,
body.pc-game-page.pc-nav-hidden .lp-nav__dropdown {
  pointer-events: none;
}

body.pc-game-page {
  margin: 0;
  padding-top: 0 !important;
}

body.pc-game-page main,
body.pc-game-page .lp-main,
body.pc-game-page .page-content,
body.pc-game-page .content-wrap,
body.pc-game-page #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.pc-game-page #lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ── HUD ────────────────────────────────────────────────── */
#pc-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: rgba(3,3,18,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

#pc-mic-sel {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 11px;
  outline: none;
}
#pc-mic-sel option { background: #14143a; color: #fff; }

.pc-hstat {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}

/* ── Level progress bar ─────────────────────────────────── */
#pc-lvl-bar {
  position: absolute;
  top: 44px; left: 0; right: 0;
  z-index: 10;
  height: 3px;
  background: rgba(255,255,255,.06);
}
#pc-lvl-fill {
  height: 100%;
  background: linear-gradient(90deg, #5533ee, #cc44ff);
  width: 0%;
  transition: width .35s ease;
}

/* ── Next-note label ────────────────────────────────────── */
#pc-next {
  position: absolute;
  top: 54px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 13px;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  letter-spacing: .02em;
  color: #fff;
}

/* ── Cents bar (bottom) ─────────────────────────────────── */
#pc-cents-wrap {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#pc-cents-track {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 4px;
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
}
#pc-cents-green {
  position: absolute;
  left: 37.5%; width: 25%; height: 100%;
  background: rgba(80,220,120,.22);
  border-left:  1px solid rgba(80,220,120,.5);
  border-right: 1px solid rgba(80,220,120,.5);
  border-radius: 2px;
}
#pc-needle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 100%;
  background: #fff;
  border-radius: 2px;
  transition: left .07s linear;
}
#pc-cents-lbl {
  font-size: 11px;
  color: #445566;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── Pitch meter (right side) ───────────────────────────── */
#pc-meter-wrap {
  position: absolute;
  right: 9px; top: 52px; bottom: 48px;
  z-index: 10;
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#pc-m-track {
  flex: 1;
  width: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 4px;
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
}
#pc-m-dot {
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  left: -3px; bottom: 5%;
  box-shadow: 0 0 7px #99aaff;
  transition: bottom .07s linear;
}
#pc-m-note {
  font-size: 9px;
  font-weight: 700;
  color: #8899cc;
}

/* ── Level-up flash ─────────────────────────────────────── */
#pc-lv-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.pc-lv-txt {
  font-size: 40px;
  font-weight: 900;
  text-align: center;
  line-height: 1.25;
  background: linear-gradient(135deg, #6644ff, #ff44bb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: pre-line;
}

/* ── Overlays ────────────────────────────────────────────── */
.pc-ov {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(3,3,18,.93);
  gap: 14px;
  padding: 20px;
}
.pc-ov.pc-show { display: flex; }

.pc-ttl {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #6644ff, #ff44bb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
.pc-sub {
  font-size: 13px;
  color: #6677aa;
  text-align: center;
  max-width: 300px;
  line-height: 1.65;
}
.pc-btn {
  background: linear-gradient(135deg, #5533ee, #aa33ff);
  border: none;
  color: #fff;
  padding: 10px 32px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(80,50,255,.4);
  transition: filter .15s;
}
.pc-btn:hover { filter: brightness(1.12); }
.pc-btn-sec {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: none;
}
.pc-btn-sm {
  padding: 7px 20px;
  font-size: 13px;
}

/* ── End screen ─────────────────────────────────────────── */
#pc-final-score-big {
  font-size: 72px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
}
#pc-final-stars {
  font-size: 28px;
  color: #ffcc44;
  letter-spacing: 4px;
}
#pc-final-lvl {
  font-size: 13px;
  color: #6677aa;
}
#pc-final-msg {
  font-size: 15px;
  font-weight: 600;
  color: #aabbdd;
}

/* ── Share card ─────────────────────────────────────────── */
#pc-share-preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  display: none;
  object-fit: contain;
}

.pc-share-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#pc-err {
  color: #ff7766;
  font-size: 12px;
  display: none;
  text-align: center;
  max-width: 260px;
  line-height: 1.5;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #pc-root { height: 100vh; }
  .pc-lv-txt { font-size: 28px; }
  #pc-final-score-big { font-size: 56px; }
}
/* ─────────────────────────────────────────────────────────
   Pitch Challenge LANDING PAGE
   Used by: pitch_challenge_landing.html
───────────────────────────────────────────────────────── */

.pc-game-preview {
  background: linear-gradient(135deg, #0d0929 0%, #1a0a3d 100%);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  border: 1px solid rgba(100,68,255,.25);
  max-width: 560px;
  margin: 0 auto 40px;
}

.pc-game-preview__icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.pc-game-preview__title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.pc-game-preview__sub {
  font-size: 14px;
  color: rgba(180,170,255,.7);
  margin-bottom: 24px;
}

.pc-notes-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pc-note-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid currentColor;
  letter-spacing: .02em;
}

/* ── Game page: offset canvas below landing nav ─────────── */
body.pc-game-page #pc-root {
  position: fixed;
  top: 64px; /* landing nav height */
  left: 0; right: 0; bottom: 0;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

/* ── Mic selector — restyled ────────────────────────────── */
#pc-mic-sel {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #ccd0e8;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-family: 'Inter', system-ui, sans-serif;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238899cc'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

#pc-mic-sel:hover,
#pc-mic-sel:focus {
  border-color: rgba(100, 68, 255, .6);
  background-color: rgba(100, 68, 255, .1);
}

#pc-mic-sel option {
  background: #0d0929;
  color: #ccd0e8;
  font-size: 12px;
}

/* Mic label prefix */
#pc-hud::before {
  content: '🎤';
  font-size: 14px;
  flex-shrink: 0;
}