body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow:hidden;
  font-family: 'ProximaNova';
  background-color: #000;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

img {
	max-width:100%;
}

img.key-image {
	display:block;
	max-width:70%;
	text-align:center;
	margin:0 auto;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top:0px;
  display: none;
}

.carousel-slide.active {
  display: block;
}

.block-70 {
	display:block;
	position:relative;
	width:90%;
	margin:0 auto;
}

.block-90 {
	display:block;
	position:relative;
	width:90%;
	margin:0 auto;
}

/* ==== TEXT STYLES ===== */
h1, h2 {
	display:block;
	color:white;
	text-align:left;
	width:75%;
	margin:0 auto;
}

h1 {
	font-size:52px;
	font-weight:800;
}

h1.topjuke {
	line-height:100%;
	text-align:center;
}

h1.outro {
	font-size:34px;
	letter-spacing:-.5px;
	line-height:90%;
}

h1.recap {
	display:block;
	font-size:32px;
	line-height:100%;
	margin:0;
	float:left;
}

h2 {
	font-size:24px;
	font-weight:600;
}

h2.topjuke {
	text-align:center;
	font-weight:200;
	padding-bottom:20px;
}

h2.checkin-txt {
	display:block;
	font-weight:200;
	margin: 0 auto;
	width:auto;
}

.checkin-num {
	font-size:42px;
	font-weight:800;
}

#s2-title h1 {
	font-size:42px;
	line-height:100%;
	padding:0;
}

#s2-title h2 {
	padding:0;
}

.top3-song {
	font-size:17px;
	font-weight:600;
	text-align:center;
}

.top3-artist {
	color:#999;
	font-size:15px;
	font-weight:400;
}

.top3-top-artist {
	color:#fff;
	font-size:18px;
	font-weight:400;
}

.top-artist-txt {
	font-weight:800;
	font-size:24px;
}

p.totalsongs {
	display:block;
	font-size:64px;
	text-align:center;
	width:100%;
	font-weight:800;
	padding:0;
	margin:0;
	line-height:100%;
}

p.outro {
	display:block;
	color:white;
	text-align:left;
	width:75%;
	margin:20px auto 0 auto;
}

p.loyalty {
	display:block;
	color:white;
	text-align:left;
}

p.disclaimer {
	display:block;
	color:#999;
	text-align:left;
	font-size:11px;
	font-weight:400;
	width:75%;
	margin:20px auto 0 auto;
}

p.recap-p {
	display:block;
	font-size:16px;
	width:90%;
	color:#e5e5e5;
	margin:0 auto;
}

.big-bold {
	font-weight:800;
}

.center-txt {
	text-align:center;
}

/* ==== SCREENSHOT DIVS ===== */
.screenshot-div {
	/*padding-top:60px;*/
	padding:50px 0 20px 0;
}

/* ========== SLIDE 1 =========== */


/* ========== SLIDE 2 =========== */
.header-bar {
	display:block;
	position:relative;
	width:90%;
	margin:0 auto;
}

#king-note {
	max-width:65px;
	display:block;
	float:left;
}

.t-block {
	display:block;
	width:60%;
	float:left;
	min-height:65px;
}

.top3-div  {
	display:block;
	position:relative;
	width:90%;
	height:80px;
	margin:0 auto;
	padding:0;
	color:white;
	height:auto;
	min-height:70px;
	overflow:hidden;
}

.top3-num {
	display:inline-block;
	position:relative;
	top:0;
	left:0px;
	width:10%;
	margin:0;
	font-size:18px;
	line-height:70px;
	text-align:center;
	float:left;
	color:#FF8B67;
	line-height:70px;
}

.top3-headline {
	display:table;
	position:relative;
	width:85%;
	height:80px;
	padding-left:10px;
	float:left;
	height:auto;
	min-height:70px;
}

.h-line {
	display:block;
	padding:0;
	margin:0 auto;
	width:90%;
	border-top: 1px solid #603222;
}

.black-pil-box {
	position:relative;
	background:black;
	border-radius:16px;
	border:1px solid #333;
	margin-top:10px;
	height:auto;
	min-height:80px;
	overflow:hidden;
}

.gold-mic {
	width:70px;
	padding:5px;
}

.top-artist {
	width:65%;
	height:80px;
}

.top-genre {
	padding-left:30px;
}

/* ========== SLIDE 3 =========== */
.big-round-box {
	display:block;
	width:75%;
	background:black;
	border-radius:36px;
	margin:50px auto 0 auto;
	padding:50px 0;
	border:1px solid #666;
	filter: drop-shadow(0px 10px 44px #A16DF5);
}

.play-btn-icon {
	display:block;
	width:83px;
	margin:0 auto 30px auto;
}

/* ========== SLIDE 4 =========== */
.play-marker {
	display:inline-block;
	width:117px;
	margin: 0 auto;
}

.checkin-juke {
	display:block;
	width:265px;
	margin:20px auto;
}

.juke-display {
	position:absolute !important;
	width:100% !important;
	text-align:center;
	top:100px;
	line-height:100%;
}

.juke-display-num {
	font-weight:800;
	font-size:64px;
}

.checkin-subhead {
	padding-top:10px;
}

/* ========== SLIDE 5 =========== */

/* Silver (default – basically what you already have with bg-gradient5) */
#slide5.loyalty-silver {
 	background: #515151;
	background: radial-gradient(circle at top center, rgba(81, 81, 81, 1) 0%, rgba(25, 25, 25, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

#slide5.loyalty-silver .rewards-stats-box {
  border-color: #DDDDDD;  /* subtle silver */
}

#slide5.loyalty-silver .loyalty-number {
  color: #DDDDDD;
}

/* Gold */
#slide5.loyalty-gold {
	background: #84681B;
	background: radial-gradient(circle at top center, rgba(135, 106, 28, 1) 0%, rgba(21, 17, 5, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

#slide5.loyalty-gold .rewards-stats-box {
  border-color: #E8D09B;
}

#slide5.loyalty-gold .loyalty-number {
  color: #E8D09B;
}

/* Platinum */
#slide5.loyalty-platinum {
	background: #0153B8;
	background: radial-gradient(circle at top center, rgba(0, 83, 185, 1) 0%, rgba(0, 13, 28, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

#slide5.loyalty-platinum .rewards-stats-box {
  border-color: #D5EDFA;
}

#slide5.loyalty-platinum .loyalty-number {
  color: #D5EDFA;
}

/* Diamond */
#slide5.loyalty-diamond {
	background: #7533B5;
	background: radial-gradient(circle at top center, rgba(118, 51, 183, 1) 0%, rgba(13, 6, 21, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

#slide5.loyalty-diamond .rewards-stats-box {
  border-color: #EDD0F9;
}

#slide5.loyalty-diamond .loyalty-number {
  color: #EDD0F9;
}

/* End level styles */

.rewards-stats {
	color: #fff;
	font-size:18px;
	font-weight:400;
}

.rewards-stats-txt {
	color: #fff;
	font-size:28px;
	font-weight:800;
}

.rewards-perk-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Title + body text inside the perk box */
.rewards-perk-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffc700;
  margin: 0 0 4px 0;
}

.rewards-perk-body {
  font-size: 16px;
  line-height: 1.4;
  color: #ffffff;
  margin: 0;	
}

.loyalty-fallback {
  display: none;       /* hidden by default; shown only when no loyalty */
  margin-top: 24px;
}

.loyalty-fallback-copy {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #fff;
}

#rewards-logo {
	max-width:205px;
	display:block;
	margin: 0 auto;
}

#rewards-badge {
	max-width:85px;
	display:block;
	float:left;
}

#loyalty-fallback-image {
	max-width:280px;
	display:block;
	margin: 0 auto;
}

.t2-block {
	display:block;
	width:60%;
	float:left;
	min-height:65px;
	vertical-align: middle;
}


/* ========== SLIDE 6 =========== */

.orb-icon {
	display:block;
	width:67px;
	float:left;
	margin-bottom:20px;
}

.recap-3 {
	height:auto;
	min-height:40px;
	font-size:16px;
	margin:0;
	padding:0;
}

.recap3-div {
	padding-left:5%;
	margin:7px 0;
}

.recap-num {
	line-height:40px;
	text-align:left;
	color:#f6c944;
}

.recap-song, .recap-artist {
	font-size:16px;
}

.recap-line {
	border-top: 1px solid #5b4066;
}

.recap-pil {
	display:block;
	width:90%;
	height:46px;
	margin:10px auto 0 auto;
	background:black;
	border-radius:16px;
	border: 1px solid #333;
}

.recap-stat {
	color:white;
	font-size:16px;
	font-weight:600;
	line-height:46px;
	padding:0 0 0 20px;
	margin:0;
}

/* ========== SLIDE 7 =========== */
.play-btn {
	display:block;
	width:75%;
	height:60px;
	line-height:60px;
	background:white;
	border-radius:16px;
	color:black;
	text-decoration:none;
	font-size:18px;
	font-weight:600;
	text-align:center;
	margin:20px auto 70px auto;
}

.outro-image {
	width:150px;
}

/* ==== FOOTER ==== */
.footer #logo {
	position:absolute;
	bottom:15px;
	left:20px;
	height:36px;
}

.footer-icon {
	position:absolute;
	display:block;
	width:60px;
	bottom:10px;
	right:0;
	background:none;
	text-decoration:none;
	color:white;
}

.footer-icon img {
	display:block;
	width:42px;
	margin:0 auto;
}

.footer-txt {
	font-size:11px;
	font-weight:400;
	color: #ffffff;
	margin:0;
	text-align:center;
	padding: 0;
}

#save-btn {
	right:66px;
}

/* ==== CONTROL BAR ==== */
.controls {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0;
}

.bar {
  cursor: pointer;
  height: 2px;
  width: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2.5px;
  display: inline-block;
  margin: 0;
}

.active-bar {
  background-color: #fff;
}

/* Backgrounds */
.bg-black {
  background-color: black;
}

.bg-gradient1 {
	background: #952204;
	background: radial-gradient(circle at top center,rgba(192, 77, 0, 1) 0%, rgba(114, 17, 7, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

.bg-gradient2 {
	background: #6702A0;
	background: radial-gradient(circle at top center, rgba(67, 17, 124, 1) 0%, rgba(54, 14, 63, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

.bg-gradient3 {
	background: #055B7F;
	background: radial-gradient(circle at top center, rgba(11, 137, 190, 1) 0%, rgba(1, 44, 38, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

.bg-gradient4 {
	background: #9D7A00;
	background: radial-gradient(circle at top center, rgba(116, 7, 152, 1) 0%, rgba(54, 25, 184, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

.bg-gradient5 {
	background: #515151;
	background: radial-gradient(circle at top center, rgba(81, 81, 81, 1) 0%, rgba(25, 25, 25, 1) 75%, rgba(0, 0, 0, 1) 100%);
}

.text-gradient1 {
	color:#FF8B67;
}

.text-gradient2 {
	color:#ecb6fa;
}

.text-gradient3 {
	color:#c78fef;
}

.text-gradient4 {
	color:#ffffff;
}

/* Footer for single "Share your stats" CTA */
.footer-share-only {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;  /* raised slightly */
  display: flex;
  justify-content: center;
}

.footer-share-row {
  display: flex;
  align-items: center;
  gap: 14px; /* more spacing */
}

.footer-share-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
}

/* Round share button on the right */
.footer-share-button {
  width: 60px;          /* ⬅ MUCH bigger button */
  height: 60px;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;

  background: rgba(255, 255, 255, 0.1); /* subtle translucent circle */

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.footer-share-button img {
  width: 60px;   /* ⬅ biggest allowed without pixelation */
  height: 60px;
}

/* Brand mark inside the slide so it appears in shared image */
.screenshot-div {
  position: relative; /* if not already set */
}

.slide-brand-block {
  text-align: left;
  padding: 24px 20px 0 20px; /* spacing above footer */
}

.slide-brand-block img {
  width: 90%;   /* adjust as needed */
  height: auto;
}

.rewards-div  {
	position:relative;
	width:90%;
	margin:0 auto;
	overflow:hidden;
	margin-top: 10px;
}

.rewards-stats-box {
	background: black;
	border-radius: 16px;
	border: 1px solid #333;
	padding: 18px 16px;      /* horizontal padding here */
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	align-items: flex-start; /* allow vertical stacking on right side */
}

/*.rewards-value-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;  /* keep numbers + extra text right aligned */
}*/

.rewards-extra {
  margin: 4px 0 0 0;
  font-size:16px;
  font-weight:400;
  line-height: 1.2;
  color: #ffc700;
  align-self: flex-start;
}

/* Rewards points box: label + number on top row, free credits under number */
/*.rewards-points-box {
  display: grid;
  grid-template-columns: auto 1fr;  /* col1: label, col2: number/free credits
  grid-template-rows: auto auto;    /* row1: label+number, row2: free credits
  column-gap: 8px;
  align-items: center;
}*/

/* Label on the left */
.rewards-points-box .rewards-stats {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* Number on the right */
.rewards-points-box .loyalty-number {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: end;
}

/* FREE credits line under the number, left-aligned within that right column */
.rewards-points-box .rewards-extra {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: start;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: #ffc700;
}

/* Center play-marker + checkin text in slide 4 */
#slide4 .block-70 {
  text-align: center;
}

#slide4 .play-marker {
  display: inline-block;
}

#slide4 .checkin-txt {
  text-align: center;   /* override global h2 left-align */
  width: auto;          /* fine to keep auto now */
}

/* --- Tighten rewards box vertical spacing on slide 5 --- */

/* 1) Reduce padding inside all rewards boxes */
#slide5 .rewards-stats-box {
  padding: 10px 14px;       /* was 18px 16px – trims top/bottom */
}

/* 2) Reduce space between boxes */
#slide5 .rewards-div {
  margin-top: 6px;          /* was 10px */
}

/* 3) Tighten the "Rewards points" secondary line(s) */
#slide5 .rewards-extra {
  margin: 3px 0 0 0;        /* smaller gap above line */
  font-size: 14px;          /* was 16px */
  line-height: 1.25;        /* slightly tighter */
}

/* 4) Perk box: tighten title/body spacing */
#slide5 .rewards-perk-box {
  gap: 4px;                 /* was 6px */
}

#slide5 .rewards-perk-title {
  margin: 0 0 2px 0;        /* smaller space under title */
  font-size: 15px;          /* slightly smaller */
}

#slide5 .rewards-perk-body {
  font-size: 14px;
  line-height: 1.3;
}

/* Fix FREE credits alignment inside Rewards Points block */
#slide5 #rewards-points-block .rewards-stats-box {
  align-items: flex-start;         /* align items at the top */
}

#slide5 #rewards-points-block .rewards-value-block {
  display: flex;
  flex-direction: column;          /* stack the number + bonus text */
  align-items: flex-start !important;  /* force left alignment */
  text-align: left;
}

/* Layout for Rewards points box on slide 5 */
/*#slide5 .rewards-points-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}*/

/* Top row: label + number */
/*#slide5 .rewards-points-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}*/

/* Extra line: full width, left-aligned */
/*#slide5 .rewards-extra {
  margin: 3px 0 0 0;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
}*/

/* Slide 5: keep the Rewards Points number flush right */
#slide5 .rewards-points-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start; /* let margin-left:auto do the pushing */
}

#slide5 .rewards-points-row .loyalty-number {
  margin-left: auto; /* pushes the number to the far right */
}

/* --- Slide 5: layout for Rewards points box --- */
/* We only change the layout for the Rewards points block */
#slide5 #rewards-points-block .rewards-stats-box {
  display: grid;
  grid-template-columns: auto 1fr;  /* col1 = label, col2 = number + extra */
  grid-template-rows: auto auto;    /* row1 = label + number, row2 = extra */
  column-gap: 8px;
  align-items: center;
}

/* Label on the left, first row */
#slide5 #rewards-points-block .rewards-stats-box .rewards-stats {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* Number on the right, first row (stick to the right edge) */
#slide5 #rewards-points-block .rewards-stats-box .loyalty-number {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: end;
}

/* FREE credits line on the second row, full width, left aligned */
#slide5 #rewards-points-block .rewards-stats-box .rewards-extra {
  grid-column: 1 / 3;      /* span both columns */
  grid-row: 2 / 3;
  justify-self: start;
  text-align: left;

  margin-top: 4px;
  font-size: 14px;
  line-height: 1.25;
  color: #ffc700;
}

/* Slide 5: baseline alignment for the Challenges Completed row */
#slide5 .rewards-div:first-of-type .rewards-stats-box {
  align-items: baseline;   /* align the text + number on the same baseline */
}