/* ==========================================================================
   FARTNERSHIP COMPLETE UI & RESPONSIVE ENGINE (ZERO SCROLLBARS GUARANTEED)
   ========================================================================== */

/* 1. Global scrollbar elimination */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html, body {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#app {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 !important;
}

/* 2. Master screen rules - No scrollbars, auto-fitting flex */
.screen {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  padding: 10px 14px 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* 3. Screen Header */
.screen-head {
  margin-bottom: 4px !important;
  max-width: 900px !important;
  flex-shrink: 0 !important;
}

.screen-head h2 {
  font-size: clamp(22px, 3.2vw, 32px) !important;
  margin: 0 !important;
}

/* 4. "Where to?" Screen (Course & Mode Selection) */
.screen > .row.center {
  margin: 2px 0 4px !important;
  flex-shrink: 0 !important;
}

.course-carousel {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 0 !important;
}

.cc-main {
  flex: 1 !important;
  min-height: 0 !important;
}

.cc-stage {
  height: clamp(140px, 25vh, 260px) !important;
}

.cc-caption {
  padding: 6px 14px !important;
}

.cc-caption h3 {
  font-size: clamp(20px, 2.8vw, 28px) !important;
}

.cc-blurb {
  margin: 2px 0 4px !important;
  font-size: 12px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.cc-chips {
  gap: 4px !important;
}

.cc-chip {
  padding: 2px 6px !important;
  font-size: 11px !important;
}

.cc-arrow {
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
}

.cc-foot {
  margin-top: 4px !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.cc-thumb {
  width: 40px !important;
  height: 25px !important;
  border-width: 2px !important;
  border-radius: 5px !important;
}

.screen .toggle {
  margin: 2px 0 !important;
  font-size: 13px !important;
}

.lobby-foot {
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  flex-shrink: 0 !important;
}

.lobby-foot .btn.big {
  padding: 8px 28px !important;
  font-size: 18px !important;
  box-shadow: 0 4px 0 #1d164059 !important;
}

/* 5. FINISH & RESULTS SCREEN (Fb) */
.stat-row {
  gap: 8px !important;
  margin: 6px 0 !important;
  flex-shrink: 0 !important;
}

.stat {
  padding: 4px 14px !important;
  min-width: 90px !important;
  border-radius: 12px !important;
}

.stat b {
  font-size: 20px !important;
}

.stat span {
  font-size: 11px !important;
}

.awards {
  margin: 6px 0 !important;
  gap: 8px !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  max-width: 800px !important;
  width: 100% !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
}

.award {
  padding: 6px 8px !important;
  border-radius: 12px !important;
  gap: 2px !important;
}

.award .portrait.sm {
  width: 32px !important;
  height: 32px !important;
}

.award .title {
  font-size: 12px !important;
}

.award .line {
  font-size: 11px !important;
}

/* Results buttons bar */
.screen > .row.center:last-child {
  margin-top: 6px !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

.screen > .row.center:last-child .btn {
  padding: 8px 18px !important;
  font-size: 15px !important;
}

/* 6. TROPHIES & SETTINGS MODALS - Touch/Wheel scrollable without visible scrollbars */
.trophies {
  overflow-y: auto !important;
  scrollbar-width: none !important;
  max-height: 60vh !important;
  padding: 4px !important;
}

.ph-share-card {
  max-height: 94vh !important;
  padding: 12px !important;
}

/* 7. TITLE SCREEN */
.title-screen {
  justify-content: center !important;
  gap: 12px !important;
}

.logo {
  margin: 0 !important;
}

.footer-note {
  margin-top: 4px !important;
  font-size: 13px !important;
  padding: 4px 12px !important;
}

/* 8. Extra small height fallback (< 650px) */
@media (max-height: 650px) {
  .screen {
    padding: 6px 10px !important;
  }
  .cc-stage {
    height: 140px !important;
  }
  .screen-head h2 {
    font-size: 20px !important;
  }
  .lobby-foot .btn.big {
    padding: 6px 20px !important;
    font-size: 16px !important;
  }
  .awards {
    display: none !important; /* Hide secondary awards on micro heights so buttons never cut off */
  }
}