/* CSS Document */
@charset "utf-8";

@font-face {
  font-family: "Agency FB"; /* set name */
  src: url("fonts/AGENCYB.TTF"); /* url of the font */
}

:root {
 	--kqth-yellow: #ffd339; 
	--kqth-orange: #ee9320;
	--desktopWidth: 800px;
	--desktopVideoHeight: 450px;
	--mobileWidth: 320px;
	--mobileVideoHeight: 180px;
	--linkGrey: #929292;
	--linkHoverGrey: #3a3a3a;
}

html {	}

body {
	font-family: "Arial", sans-serif;
}

hr {
	border: 4px dashed #f3f3f3;
}

iframe {
	border-radius: 20px;
}

.mainBodyContainer .finePrintText {
	font-size: 11pt;
	color: #5c5c5c;
}

a, a:visited {
	color: var(--linkGrey);
}

a:hover {
	color: var(--linkHoverGrey);
	transition: 0.3s;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

.userMessage {
	font-weight: bold;
	color: red;
}

.huntersImage {
	width: var(--desktopWidth);
}

#footer {
	margin-top: 60px;
	color: #929292;
	font-size: 13pt;
}

#footer a, #footer a:visited {
	color: #929292;
}

#footer a:hover {
	color: #393939;
}

#showPasswordText {
	color: #393939;
}

.mainBodyContainer {
	margin:0 auto 80px auto;
	width: var(--desktopWidth);
	text-align: center;
}

.mainBodyContainer p {
	line-height: 130%;
	font-size: 13pt;
}

.logoImage {
	width: 600px;
}

h1, h2, h3 {
	font-family: "Agency FB", sans-serif;
}

h1 {
	font-size: 28pt;
}

h2 {
	font-size: 22pt;
}

h3 {
	font-size: 20pt;
}

h2#statusTracker {
	margin-bottom: 0;
}

.accountBar {
	font-weight: bold;
	font-size: 11pt;
}

.formFieldTitle {
	font-family: "Agency FB", sans-serif;
	font-size: 20pt;
}

.textField {
	width: 300px;
	height: 40px;
	font-size: 16pt;
	border: 1px solid #bbbbbb;
	padding: 0 10px;
}

.postalCode {
	width: 225px;
}

.instructionsTextArea {
	font-family: Arial, Helvetica, sans-serif;
	width: 300px;
	font-size: 14pt;
	border: 1px solid #bbbbbb;
	padding: 10px;	
}

.formEntryElement {
	margin-top: 10px;
}

.formLabel {
	margin-top: 40px;
}

.submitButtonArea {
	margin-top: 40px;
}

#submitButton {
	opacity: 0.6; /* Initially disabled */
    pointer-events: none; /* Initially disabled */
}

#submitButton.enabled {
	opacity: 1; /* Enabled */
    pointer-events: auto; /* Enabled */
}

#errorMessage {
	font-weight: bold;
	font-weight: 11pt;
	padding: 5px;
	display: none; /* start off hidden */
}

#emailErrorMessage {
	font-weight: bold;
	font-weight: 11pt;
	padding: 5px;
	display: none; /* start off hidden */
}

.error {
	color: #ff000e;
}

.success {
	color: #6e7157;
}

.primaryButton {
	background-color: var(--kqth-yellow);
	font-family: "Agency FB", sans-serif;
	font-size: 20pt;
	text-transform: uppercase;
	width: 320px;
	height: 40px;
	border: 1px solid var(--kqth-orange);
	color: black;
}

.primaryButton:hover {
	background-color: var(--kqth-orange);
	transition: 0.3s;
}

.secondaryButton {
	background-color: #6F6F6F;
	color: white;
	font-family: "Agency FB", sans-serif;
	font-size: 16pt;
	text-transform: uppercase;
	width: 300px;
	height: 40px;
	border: 1px solid #515151;
}

.secondaryButton:hover {
	background-color: #1F1F1F;
	transition: 0.3s;
}

.unfinishedItem, .unfinishedItem a, .unfinishedItem a:visited {
	color: red;
	text-decoration: none;
}

.unfinishedItem a:hover {
	color: #5e0000;
	transition: 0.3s;
}

.finishedItem, .finishedItem a, .finishedItem a:visited {
	color: green;
	text-decoration: none;
}

.finishedItem a:hover {
	color: #005e14;
	transition: 0.3s;
}

.textEntryDescription {
	font-size: 10pt;
	color: #5c5c5c;
}

.portalSectionIcon {
	height: 40px;
}

.portalSection {
	padding: 40px;
	margin: 20px;
	border-radius: 20px;
	border: 1px solid #bbbbbb;
}

.portalSection:hover {
	background-color: #f0f0f0;
	transition: 0.3s;
}

a.portalLink, a.portalLink:visited {
	text-decoration: none;
}

#trackingNumberBar {
	margin-top: 5px;
	display: none;
	text-align: center;
}

#trackingNumberButton {
	margin: 0 auto;
}

#trackingInfoText {

}

#trackingInfoLink {

}

#linksBar {
	margin: 20px 0;
}

#linksBar button {
	font-family: "Agency FB", sans-serif;
	font-size: 16pt;
	text-transform: uppercase;
	width: 150px;
	height: 100px;
	border: 1px solid var(--kqth-orange);
	color: black;
	margin: 0 3px;
}

#instructionsButton:hover, #videosButton:hover, #graphicsButton:hover {
	background-color: var(--kqth-orange);
	color: white;
	transition: 0.3s;
}

.videoArea {
	margin-bottom: 60px;
}

#gamesSummaryTable, .summaryTable {
	width: 100%;
	border: 1px solid #bbbbbb;
}

#gamesSummaryTable th, .summaryTable th {
	background-color: #d9d9d9;
	padding: 10px;
	border-bottom: 1px solid #bbbbbb;
	font-weight: bold;
	text-align: left;
}

#gamesSummaryTable th a {
	color: rgb(43, 43, 43);
	text-decoration: none;
}

#gamesSummaryTable td, .summaryTable td {
	padding: 10px;
	border-bottom: 1px solid #bbbbbb;
	text-align: left;
}

tr:hover {
	background-color: #f3f3f3;
	transition: 0.3s;
}

td a, td a:visited {
	color: rgb(43, 43, 43);
	text-decoration: none;
}

#gamesSummaryTable th.sort-active {
	font-weight: bold;
	background-color: var(--kqth-yellow);
}

#gamesSearchBarArea {
	margin-bottom: 20px;
}

.dropDownSelect {
	text-align: center;
	height: 40px;
	font-size: 16pt;
	border: 1px solid #bbbbbb;
}

.dropDownSelect option {
	outline: none;
	border: 1px solid #bbbbbb;
}

.pathImage {
	width: 250px;
	padding: 30px;
}

/* COUNTDOWN */

.countdown {
	background-image: url("images/dvd-room-bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
  	background-color: black;
  	display: -webkit-box;
  	display: -ms-flexbox;
  	justify-content: center;
  	align-items: center;
  	display: flex;
	padding: 0;
	margin: 20px 0;
  	margin-bottom: 40px;
  	border: 1px solid #ffe9d1;
  	border-radius: 20px;
	min-height: 300px;
}
.countdown .day, .countdown .hour, .countdown .min, .countdown .sec {
  padding: 20px;
  text-align: center;
}
.countdown .day .num, .countdown .hour .num, .countdown .min .num, .countdown .sec .num {
	display: block;
	font-size: 80px;
	font-family: "Agency FB", sans-serif;
    color: #fff1d4;
}
.countdown .day .word, .countdown .hour .word, .countdown .min .word, .countdown .sec .word {
  display: block;
  font-size: 20px;
  color: #75e5fd;
}

#hypeBar {
	/* font-family: "Agency FB", sans-serif; */
	font-size: 16px;
	color: #eb9220;
	font-weight: bold;
}

.treasureInfoBox {
	width: var(--desktopWidth);
	background-image: url("images/glowing-chest.jpg");
	background-position: bottom;
	background-repeat: no-repeat;
	background-color: #000000;
	border-radius: 20px;
	min-height: 360px;
	padding: 0;
	margin: 0 auto;
}

.treasureInfoBox h2, .treasureInfoBox h2 a {
	color: #ffa455;
	padding: 0;
	margin: 0;
	padding-top: 40px;
	text-decoration: none;
}

.treasureInfoBox p {
	color: white;
	padding: 0px 20px;
	padding-bottom: 260px;
}

.locationClueBox {
	width: var(--desktopWidth);
	background-image: url("images/paper-bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto;
	box-shadow: inset 0 0 40px #fff;
	border-radius: 20px;
	border: 1px solid #ebd5b7
}

.locationClueBox img {
	padding-top: 40px;
	mix-blend-mode: color-burn;
}

.locationClueBox h2 {
	margin: 0;
	padding: 0 20px;
	padding-top: 20px;
	color: #311c0d;
}

.locationClueBox p {
	padding: 20px;
	margin: 0;
	padding-bottom: 40px;
	font-size: 18pt;
	font-style: italic;
	color: #311c0d;
}

/* Clue box as a map link (a few days after the riddle's Sunday) */
a.locationClueLink, a.locationClueLink:visited {
	display: block;
	text-decoration: none;
}

a.locationClueLink:hover .locationClueBox {
	box-shadow: inset 0 0 40px #fff, 0 0 12px var(--kqth-orange);
	transition: 0.3s;
}

.locationClueBox p.locationClueMapHint {
	margin-top: -20px;
	font-size: 13pt;
	font-style: normal;
	text-decoration: underline;
}

.investigateBox.ib1, .investigateBox.ib2, .investigateBox.ib3  {
	width: var(--desktopWidth);
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 auto;
	border-radius: 20px;
	border: 1px solid #d8e5e9;
	/* box-shadow: inset 0 0 40px #000000; */
}

.investigateBox.ib1 {
		background-image: url("images/clues-bg-1.jpg");
}

.investigateBox.ib2 {
		background-image: url("images/clues-bg-2.jpg");
}

.investigateBox.ib3 {
		background-image: url("images/clues-bg-3.jpg");
}


.investigateBox img {
	padding-top: 40px;
}

.investigateBox h2 {
	margin: 0;
	padding: 0 20px;
	padding-top: 20px;
	color: #ffffff;
}

.investigateBox p {
	padding: 20px;
	margin: 0;
	padding-bottom: 40px;
	font-size: 16pt;
	font-weight: normal;
	color: #ffffff;
}

.investigateBox a, .investigateBox a:visited {
	color: #ffffff;
	text-decoration: none;
}

.youTubeEmbed {
	width: var(--desktopWidth);
	height: var(--desktopVideoHeight);
}

.instructionsManualCover {
	width: 300px;
}

.adminPortalGraphicsThumb {
	width: 250px;
}

.hostedByLine {
	font-size:11px;
	color: var(--linkGrey);
	margin-bottom: 0;
	padding-bottom: 0;
}

#churchTitle {
	margin-top: 3px;
	margin-bottom: 5px;
	padding: 0;
}

#churchTitle a, #churchTitle a:visited {
	color: black;
	text-decoration: none;
}

.churchInfoBar {
	margin: 0;
	padding: 0;
}

.topBarIcon {
	height: 16px;
	padding: 0 5px;
}

.finaleInfo {
	padding: 40px;
	margin: 20px 0;
	border-radius: 20px;
	border: 5px solid var(--kqth-orange);
}

.finaleInfo:hover {
	background-color: #f0f0f0;
	transition: 0.3s;
}

.vault24logo img {
	margin-top: 40px;
	width: 150px;
}

.prizeImage {
	width: var(--desktopWidth);
}

@media only screen and (max-width: 768px) {
/* CSS styles specific to mobile devices go here */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Prevents automatic text enlargement on rotation */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

p {
	line-height: 130%;
	font-size: 13pt;
}

.mainBodyContainer {
	margin:0 auto;
	width: var(--mobileWidth);
	text-align: center;
}

.logoImage {
	width: var(--mobileWidth);
}

.youTubeEmbed {
	width: var(--mobileWidth);
	height: var(--mobileVideoHeight);
}

.treasureInfoBox {
	width: var(--mobileWidth);
	min-height: 360px;
}

.locationClueBox {
	width: var(--mobileWidth);
}

.investigateBox.ib1, .investigateBox.ib2, .investigateBox.ib3 {
	width: var(--mobileWidth);
}

.countdown .day, .countdown .hour, .countdown .min, .countdown .sec {
  padding: 10px;
}
.countdown .day .num, .countdown .hour .num, .countdown .min .num, .countdown .sec .num {
	font-size: 60px;
}
.countdown .day .word, .countdown .hour .word, .countdown .min .word, .countdown .sec .word {
  font-size: 12px;
}

.portalSectionIcon {
	height: 80px;
	padding-top: 20px;
}

.trackerBar {
	width: var(--mobileWidth);
	margin: 0;
	padding: 0;
}

.instructionsManualCover {
	width: 320px;
}

#linksBar button {
	width: 100px;
	font-size: 13pt;
}

.adminPortalVideo {
	width: var(--mobileWidth);
	height: var(--mobileVideoHeight);
}

.adminPortalGraphicsThumb {
	width: var(--mobileWidth);
}

#gamesSummaryTable #orderIDColumn, 
#gamesSummaryTable #emailColumn,
#gamesSummaryTable .orderIDCell, 
#gamesSummaryTable .emailCell {
	display: none;
}

.dropDownSelect, .dropDownSelect option {
	width: 320px;
}

.finaleInfo {
	padding: 20px;
}

/* The RSVP button sits inside .finaleInfo's padding, so it can't use the full 320px button width. */
.finaleRSVP .primaryButton {
	width: 100%;
}

.huntersImage {
	width: var(--mobileWidth);
}

#countrySelect {
	width: auto;
}

.prizeImage {
	width: var(--mobileWidth);
}

}

/* Finale RSVP, digital game card and privacy pages */
.finaleRSVP {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px dashed var(--kqth-orange);
}

.finaleRSVP .dropDownSelect {
	width: auto;
	margin-left: 8px;
}

#rsvpMessage {
	font-weight: bold;
}

a.cardSaveButton, a.cardSaveButton:visited {
	display: inline-block;
	line-height: 40px;
	color: black;
	text-decoration: none;
}

.digitalCardImage {
	width: 400px;
	max-width: 100%;
	border-radius: 12px;
	margin: 10px 0 20px;
}

.summaryTable {
	margin: 10px 0 20px;
	border-collapse: collapse;
}

.summaryTable td a, .summaryTable td a:visited {
	text-decoration: underline;
}

.calculatedValue {
	font-size: 16pt;
}

.portalSection.portalInfoSection:hover {
	background-color: transparent;
}

.privacyPolicy {
	max-width: var(--desktopWidth);
	margin: 0 auto;
	text-align: left;
}

.privacyPolicy h1, .privacyPolicy h3 {
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Admin Portal dashboard (adminPortal/adminPortal.php, functionsDashboard.php)
   Follows kingdomquesttreasurehunters.com: Bebas Neue headings, Inter text,
   orange numbers, yellow accents, white rounded cards.
   --------------------------------------------------------------------------- */
.mainBodyContainer.dashboardPage {
	width: auto;
	max-width: 1120px;
	padding: 0 16px;
	box-sizing: border-box;
}

.dashboardPage .logoImage {
	width: 260px;
	max-width: 70%;
}

.dashboardPage #accountBar {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
	margin-bottom: 14px;
}

.dashboard {
	text-align: left;
	font-family: "Inter", Arial, sans-serif;
	color: rgba(0, 0, 0, 0.81);
}

.dashboard *, .dashboard *::before, .dashboard *::after {
	box-sizing: border-box;
}

.dashboard h1, .dashboard h2 {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: none;
}

.dashboard p, .mainBodyContainer .dashboard p {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 10px;
}

.dashboard a, .dashboard a:visited {
	color: #b56a0c;
}

.dashboard .finePrintText, .mainBodyContainer .dashboard .finePrintText {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.55);
	margin-top: 12px;
}

/* Header */
.dashHeader {
	text-align: center;
	margin: 8px 0 24px;
}

.dashboard .dashEyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--kqth-orange);
}

.dashHeader h1 {
	font-size: 48px;
	line-height: 1.05;
	margin: 4px 0 10px;
}

.dashBadge {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background-color: var(--kqth-yellow);
	font-size: 13px;
	font-weight: 700;
}

.dashBadge.live {
	background-color: var(--kqth-orange);
	color: white;
}

.dashTracker {
	max-width: 720px;
	margin: 0 auto 24px;
	text-align: center;
}

.dashTracker .trackerBar {
	width: 100%;
	height: auto;
	margin: 0 0 8px;
}

/* Big numbers */
.dashboard h2.dashSectionTitle {
	font-size: 30px;
	text-align: center;
	margin: 0 0 12px;
}

.dashStats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.dashStat {
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	padding: 18px 12px;
	text-align: center;
}

.dashStatValue {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 46px;
	line-height: 1;
	color: var(--kqth-orange);
}

.dashStatLabel {
	margin-top: 6px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.65);
}

/* Two columns on desktop, one on phones and small tablets */
.dashGrid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

@media only screen and (max-width: 900px) {
	.dashGrid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* Cards */
.dashCard {
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	padding: 22px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashCard h2 {
	font-size: 30px;
	margin: 0 0 10px;
}

.dashCardHeading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.dashCount {
	font-size: 13px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.6);
}

.dashProgress {
	height: 8px;
	border-radius: 999px;
	background-color: #f0f0f0;
	overflow: hidden;
	margin-bottom: 14px;
}

.dashProgress div {
	height: 100%;
	background-color: var(--kqth-orange);
	border-radius: 999px;
}

/* Setup checklist */
.dashTasks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dashTasks li + li {
	border-top: 1px solid #f0f0f0;
}

.dashboard a.dashTask, .dashboard a.dashTask:visited {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
	color: rgba(0, 0, 0, 0.81);
	text-decoration: none;
	min-height: 48px;
}

.dashboard a.dashTask:hover {
	background-color: #fffaf0;
}

.dashCheck {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--kqth-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: white;
}

.dashTask.done .dashCheck {
	background-color: var(--kqth-orange);
}

.dashTaskLabel {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
}

.dashTask.done .dashTaskLabel {
	font-weight: 400;
	color: rgba(0, 0, 0, 0.6);
}

.dashTaskAction {
	font-size: 13px;
	font-weight: 700;
	color: #b56a0c;
	white-space: nowrap;
}

.dashTask.todo .dashTaskAction {
	background-color: var(--kqth-yellow);
	color: black;
	padding: 4px 10px;
	border-radius: 999px;
}

/* Timeline */
.dashTimeline {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.dashTimeline li {
	position: relative;
	padding: 0 0 16px 26px;
	display: flex;
	flex-direction: column;
}

.dashTimeline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #cfcfcf;
	background-color: white;
}

.dashTimeline li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 18px;
	bottom: 0;
	width: 2px;
	background-color: #e6e6e6;
}

.dashTimeline li:last-child::after {
	display: none;
}

.dashTimeline li.past::before {
	background-color: var(--kqth-orange);
	border-color: var(--kqth-orange);
}

.dashTimeline li.next::before {
	border-color: var(--kqth-orange);
	box-shadow: 0 0 0 4px rgba(238, 147, 32, 0.2);
}

.dashTimelineLabel {
	font-weight: 700;
	font-size: 15px;
}

.dashTimeline li.past .dashTimelineLabel {
	color: rgba(0, 0, 0, 0.55);
}

.dashTimelineDate {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
}

.dashNext {
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background-color: var(--kqth-yellow);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: black;
}

/* Treasure Captain Toolkit: videos (featured), instructions, graphics, right under the header */
.dashToolkit {
	margin-bottom: 24px;
}

.dashToolkitTiles {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); /* Game Videos, then Promotion Plan, Instructions, Graphics */
	gap: 14px;
}

.dashboard a.dashTool, .dashboard a.dashTool:visited, .dashboard .dashTool {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 18px 20px;
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, 0.81);
	text-decoration: none;
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.dashboard a.dashTool:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.dashTool > i {
	font-size: 26px;
	color: var(--kqth-orange);
}

.dashToolTitle {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 28px;
	line-height: 1;
	letter-spacing: 0.5px;
	overflow-wrap: normal; /* whole words only: .dashboard breaks long text anywhere, which split "Promotion Plan" mid-word */
}

.dashToolText {
	font-size: 14px;
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.65);
}

.dashboard a.dashToolFeatured, .dashboard a.dashToolFeatured:visited, .dashboard .dashToolFeatured {
	background-color: #fff6d9;
	border: 2px solid var(--kqth-yellow);
}

.dashToolFeatured > i {
	font-size: 34px;
}

.dashToolFeatured .dashToolTitle {
	font-size: 36px;
}

.dashToolButton {
	margin-top: auto;
	padding: 8px 18px;
	border-radius: 999px;
	background-color: var(--kqth-yellow);
	border: 1px solid var(--kqth-orange);
	font-weight: 700;
	font-size: 15px;
	color: black;
}

.dashboard a.dashToolFeatured:hover .dashToolButton {
	background-color: var(--kqth-orange);
	color: white;
}

.dashboard .dashToolFeatured.locked {
	background-color: #f7f7f7;
	border-color: #dddddd;
}

.dashToolFeatured.locked > i, .dashToolFeatured.locked .dashToolTitle {
	color: rgba(0, 0, 0, 0.45);
}

.dashToolFeatured.locked .dashToolButton {
	background-color: #ececec;
	border-color: #d6d6d6;
	color: rgba(0, 0, 0, 0.6);
	font-weight: 600;
}

.dashboard .dashToolkitFooter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 24px;
	margin: 12px 0 0;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.65);
}

.dashToolkitFooter i {
	color: var(--kqth-orange);
	margin-right: 4px;
}

/* Two columns below 960px: narrower than that, the three small tiles are too thin for titles like "Instructions" */
@media only screen and (max-width: 960px) {
	.dashToolkitTiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.dashboard .dashToolFeatured {
		grid-column: 1 / -1;
	}
	.dashboard a.dashTool, .dashboard .dashTool {
		padding: 14px 16px;
	}
}

/* The livestream table inside a dashboard card */
.dashCard .summaryTable {
	font-size: 14px;
}

@media only screen and (max-width: 600px) {
	.dashHeader h1 {
		font-size: 38px;
	}
	.dashStats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.dashStatValue {
		font-size: 36px;
	}
	.dashStat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.dashCard {
		padding: 16px;
	}
	.dashCard h2 {
		font-size: 26px;
	}
	.dashCard .summaryTable th, .dashCard .summaryTable td {
		padding: 8px 6px;
	}
}

/* ---------------------------------------------------------------------------
   Admin Portal pages (every portal page except the dashboard): one white card
   per page, matching the dashboard. adminPortal/index.php adds .portalBody,
   .portalShell and .portalPage. Field names/IDs and scripts are unchanged.
   --------------------------------------------------------------------------- */
body.portalBody {
	background-color: #faf8f4;
}

.mainBodyContainer.portalShell {
	width: auto;
	max-width: 800px;
	padding: 0 16px;
	box-sizing: border-box;
}

.mainBodyContainer.portalShell.dashboardPage {
	max-width: 1120px;
}

.portalShell .logoImage {
	width: 260px;
	max-width: 70%;
}

.portalShell #accountBar {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
	margin-bottom: 14px;
}

.portalShell .userMessage {
	background-color: #fff4d6;
	border: 1px solid var(--kqth-yellow);
	border-radius: 12px;
	padding: 10px 14px;
	margin: 12px 0;
	color: rgba(0, 0, 0, 0.81);
	font-family: "Inter", Arial, sans-serif;
	font-size: 14px;
}

.portalPage {
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	padding: 24px 28px 32px;
	margin-bottom: 24px;
	font-family: "Inter", Arial, sans-serif;
	color: rgba(0, 0, 0, 0.81);
}

.portalPage *, .portalPage *::before, .portalPage *::after {
	box-sizing: border-box;
}

/* Long links in help text (e.g. example YouTube addresses) wrap instead of widening the page on phones */
.portalPage, .dashboard {
	overflow-wrap: anywhere;
}

.portalPage a.portalBack, .portalPage a.portalBack:visited {
	display: block;
	text-align: left;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #b56a0c;
	text-decoration: none;
}

.portalPage a.portalBack:hover {
	text-decoration: underline;
}

.portalPage h1, .portalPage h2, .portalPage h3 {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;
}

.portalPage h1 {
	font-size: 40px;
	line-height: 1.1;
	margin: 6px 0 12px;
}

.portalPage h2 {
	font-size: 28px;
	margin: 28px 0 10px;
}

.portalPage h3 {
	font-size: 24px;
	margin: 32px 0 4px;
	padding-top: 20px;
	border-top: 1px solid #f0f0f0;
	text-align: left;
}

.portalPage p, .mainBodyContainer .portalPage p {
	font-size: 15px;
	line-height: 1.55;
}

.portalPage a, .portalPage a:visited {
	color: #b56a0c;
}

.portalPage .portalSectionIcon {
	height: 44px;
	margin: 4px 0 6px;
}

/* Form fields: label, help text, then a full-width input */
.portalPage form {
	text-align: left;
	margin-top: 8px;
}

.portalPage .formLabel {
	margin-top: 24px;
}

.portalPage .formFieldTitle {
	font-family: "Inter", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
}

.portalPage .textEntryDescription {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.6);
	margin: 4px 0 0;
}

.portalPage .formEntryElement {
	margin-top: 8px;
}

.portalPage .textField,
.portalPage .instructionsTextArea,
.portalPage .dropDownSelect,
.portalPage input[type="text"],
.portalPage input[type="password"],
.portalPage input[type="email"],
.portalPage input[type="number"],
.portalPage input[type="datetime-local"] {
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #cfcfcf;
	border-radius: 10px;
	background-color: white;
	font-family: "Inter", Arial, sans-serif;
	font-size: 16px; /* 16px stops phones zooming in when a field is tapped */
	color: rgba(0, 0, 0, 0.85);
}

.portalPage .instructionsTextArea {
	min-height: 140px;
	resize: vertical;
}

.portalPage .textField:focus,
.portalPage .instructionsTextArea:focus,
.portalPage .dropDownSelect:focus,
.portalPage input:focus {
	outline: none;
	border-color: var(--kqth-orange);
	box-shadow: 0 0 0 3px rgba(238, 147, 32, 0.2);
}

.portalPage input[type="checkbox"] {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 6px;
	accent-color: var(--kqth-orange);
}

/* Buttons */
.portalPage .submitButtonArea {
	margin-top: 32px;
	text-align: center;
}

.portalPage .primaryButton, .portalPage .secondaryButton {
	width: auto;
	min-width: 260px;
	height: auto;
	min-height: 48px;
	padding: 10px 28px;
	border-radius: 999px;
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 22px;
	letter-spacing: 0.5px;
	cursor: pointer;
}

.portalPage .primaryButton {
	background-color: var(--kqth-yellow);
	border: 1px solid var(--kqth-orange);
	color: black;
}

.portalPage .primaryButton:hover {
	background-color: var(--kqth-orange);
	color: white;
}

.portalPage .secondaryButton {
	background-color: white;
	border: 1px solid #bbbbbb;
	color: rgba(0, 0, 0, 0.75);
}

.portalPage .secondaryButton:hover {
	background-color: #f3f3f3;
}

.portalPage #errorMessage, .portalPage .errorMessage {
	margin-top: 16px;
	border-radius: 10px;
	font-size: 14px;
}

.portalPage #errorMessage.error {
	background-color: #fdecec;
	color: #b00020;
	padding: 10px 12px;
}

/* Media: never wider than the card */
.portalPage img {
	max-width: 100%;
	height: auto;
}

.portalPage .youTubeEmbed, .portalPage iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	border: 0;
}

.portalPage .adminPortalVideo {
	width: 100%;
	height: auto;
}

.portalPage .instructionsManualCover {
	width: 280px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.portalPage .adminPortalGraphicsThumb {
	width: 260px;
	border-radius: 8px;
	border: 1px solid #e6e6e6;
}

@media only screen and (max-width: 600px) {
	.portalPage {
		padding: 18px 16px 24px;
		border-radius: 14px;
	}
	.portalPage h1 {
		font-size: 32px;
	}
	.portalPage .primaryButton, .portalPage .secondaryButton {
		width: 100%;
		min-width: 0;
	}
}

/* Game website activity card (Admin Portal dashboard): link clicks and video plays side by side */
.dashActivity {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.dashboard .dashActivity h3 {
	font-family: "Inter", Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(0, 0, 0, 0.6);
	margin: 0 0 6px;
	display: flex;
	justify-content: space-between;
}

.dashActivity h3 span {
	color: var(--kqth-orange);
}

.dashActivity ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dashActivity li {
	display: flex;
	justify-content: space-between;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 15px;
}

.dashActivity li strong {
	font-variant-numeric: tabular-nums;
}

@media only screen and (max-width: 600px) {
	.dashActivity {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* Visits and page views at the top of the Game Website Activity card */
.dashActivityTotals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.dashActivityTotals div {
	background-color: #fff6d9;
	border-radius: 12px;
	padding: 12px;
	text-align: center;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.65);
}

.dashActivityTotals span {
	display: block;
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 40px;
	line-height: 1;
	color: var(--kqth-orange);
}

/* ---------------------------------------------------------------------------
   Public game site refresh (vault24/index.php adds body.gameBody).
   Keeps the single-column "treasure path" but uses the brand type (Bebas Neue
   / Inter, as on kingdomquesttreasurehunters.com and the Admin Portal), fills
   phone screens, and tidies the header, separators and boxes.
   --------------------------------------------------------------------------- */
body.gameBody {
	font-family: "Inter", Arial, sans-serif;
	color: rgba(0, 0, 0, 0.82);
	background-color: #faf8f4;
}

/* Fluid column: up to 800px, with a 16px gutter on phones (was a fixed 320px) */
.gameBody .mainBodyContainer {
	width: auto;
	max-width: 800px;
	padding: 0 16px;
	box-sizing: border-box;
	overflow-wrap: anywhere;
}

.gameBody .mainBodyContainer *, .gameBody .mainBodyContainer *::before, .gameBody .mainBodyContainer *::after {
	box-sizing: border-box;
}

.gameBody h1, .gameBody h2, .gameBody h3 {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 1.1;
}

.gameBody h1 {
	font-size: 44px;
	margin: 28px 0 10px;
}

.gameBody h2 {
	font-size: 34px;
	margin: 24px 0 8px;
}

.gameBody h3 {
	font-size: 28px;
	margin: 24px 0 10px;
}

.gameBody .mainBodyContainer p {
	font-size: 17px;
	line-height: 1.5;
}

.gameBody .mainBodyContainer .finePrintText {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.55);
}

.gameBody a, .gameBody a:visited {
	color: #b56a0c;
}

/* Media and boxes stretch to the column */
.gameBody .logoImage {
	width: 440px;
	max-width: 88%;
	margin-top: 8px;
}

.gameBody .youTubeEmbed {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.gameBody .treasureInfoBox,
.gameBody .locationClueBox,
.gameBody .investigateBox.ib1, .gameBody .investigateBox.ib2, .gameBody .investigateBox.ib3,
.gameBody .prizeImage,
.gameBody .huntersImage {
	width: 100%;
	max-width: 100%;
}

.gameBody .prizeImage {
	height: auto;
	border-radius: 16px;
}

.gameBody .pathImage {
	width: 600px;
	max-width: 100%;
	height: auto;
	padding: 12px 0;
}

/* Trail draw-on: with .trailsAnimate on <html> (set in index.php's head), each trail starts hidden behind its
   mask and draws on from its start ring over 2s once scripts/trails.js marks it .trailDrawn; then the arrow appears. */
.trailsAnimate .pathImage .trailReveal {
	stroke-dasharray: 1 2;
	stroke-dashoffset: 1;
}
.trailsAnimate .pathImage .trailArrow {
	opacity: 0;
}
.trailsAnimate .pathImage.trailDrawn .trailReveal {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2s ease-in-out;
}
.trailsAnimate .pathImage.trailDrawn .trailArrow {
	opacity: 1;
	transition: opacity 0.3s ease-out 1.85s;
}
/* Landmarks like trail 4's paw prints and X then fade in one at a time. */
.trailsAnimate .pathImage .trailStep {
	opacity: 0;
}
.trailsAnimate .pathImage.trailDrawn .trailStep {
	opacity: 1;
	transition: opacity 0.4s ease-out;
	transition-delay: calc(2.1s + var(--step, 0) * 0.3s);
}

/* Section separators: the path images carry the journey, so the rule is a quiet dotted line */
.gameBody hr {
	border: 0;
	border-top: 3px dotted rgba(181, 106, 12, 0.35);
	margin: 36px 15%;
}

/* Header */
.gameBody #hypeBar {
	display: inline-block;
	margin: 6px 0 10px;
	padding: 8px 30px;
	border-radius: 999px;
	background-color: var(--kqth-yellow);
	color: black;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

/* Phones: the pill fills the width, so the original, smaller padding */
@media only screen and (max-width: 480px) {
	.gameBody #hypeBar {
		padding: 6px 16px;
	}
}

.gameBody #hypeBar .hypeBarPhrase {
	white-space: nowrap;
}

.gameBody #hypeBar .hypeBarBig {
	display: block;
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.1;
}

.gameBody .mainBodyContainer .hostedByLine {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--kqth-orange);
}

.gameBody #churchTitle {
	font-size: 44px;
	margin: 2px 0 12px;
}

.gameBody #churchTitle a, .gameBody #churchTitle a:visited {
	color: rgba(0, 0, 0, 0.85);
}

.gameBody .churchInfoBar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 8px;
}

.gameBody .churchInfoBar a, .gameBody .churchInfoBar a:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid #e3d9c8;
	border-radius: 999px;
	background-color: white;
	color: rgba(0, 0, 0, 0.8);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.gameBody .churchInfoBar a:hover {
	border-color: var(--kqth-orange);
	color: black;
}

.gameBody .churchInfoBar i {
	color: var(--kqth-orange);
}

/* Grand prize and clue boxes */
.gameBody .treasureInfoBox {
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.gameBody .treasureInfoBox h2, .gameBody .treasureInfoBox h2 a {
	font-size: 38px;
}

.gameBody .treasureInfoBox p {
	font-size: 18px;
	text-shadow: 0 1px 4px black, 0 0 12px black; /* keeps long prize text readable if it reaches the chest art */
}

.gameBody .locationClueBox, .gameBody .investigateBox.ib1, .gameBody .investigateBox.ib2, .gameBody .investigateBox.ib3 {
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.gameBody .locationClueBox p {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
}

.gameBody .locationClueBox p.locationClueMapHint {
	font-family: "Inter", Arial, sans-serif;
	font-size: 15px;
}

.gameBody .investigateBox h2 {
	font-size: 36px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.gameBody .investigateBox p {
	font-size: 18px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Countdown */
.gameBody .countdown {
	border-radius: 16px;
	background-size: cover;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	min-height: 260px;
}

.gameBody .countdown .day .num, .gameBody .countdown .hour .num, .gameBody .countdown .min .num, .gameBody .countdown .sec .num {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
}

.gameBody .countdown .day .word, .gameBody .countdown .hour .word, .gameBody .countdown .min .word, .gameBody .countdown .sec .word {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Finale box: a white card (it isn't clickable, so no hover change) */
.gameBody .finaleInfo {
	background-color: white;
	border: 3px solid var(--kqth-orange);
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.gameBody .finaleInfo:hover {
	background-color: white;
}

.gameBody .finaleInfo h2 {
	font-size: 34px;
}

/* Buttons and fields */
.gameBody .primaryButton {
	width: auto;
	min-width: 260px;
	max-width: 100%;
	height: auto;
	min-height: 48px;
	padding: 10px 28px;
	border-radius: 999px;
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 24px;
	letter-spacing: 0.5px;
	cursor: pointer;
}

.gameBody .primaryButton:hover {
	color: white;
}

.gameBody .textField, .gameBody .dropDownSelect {
	max-width: 100%;
	min-height: 46px;
	border-radius: 10px;
	border: 1px solid #cfcfcf;
	font-size: 16px;
	font-family: "Inter", Arial, sans-serif;
}

/* Footer art */
.gameBody .huntersImage {
	border-radius: 16px;
	margin-top: 40px;
}

.gameBody #footer {
	font-size: 14px;
}

@media only screen and (max-width: 600px) {
	.gameBody h1 {
		font-size: 36px;
	}
	.gameBody h2, .gameBody #churchTitle {
		font-size: 30px;
	}
	.gameBody #churchTitle {
		font-size: 38px;
	}
	.gameBody h3 {
		font-size: 24px;
	}
	.gameBody .mainBodyContainer p {
		font-size: 16px;
	}
	.gameBody .treasureInfoBox h2, .gameBody .treasureInfoBox h2 a, .gameBody .investigateBox h2 {
		font-size: 30px;
	}
	.gameBody .locationClueBox p {
		font-size: 19px;
	}
	.gameBody .finaleInfo {
		padding: 22px 16px;
	}
	.gameBody .countdown .day, .gameBody .countdown .hour, .gameBody .countdown .min, .gameBody .countdown .sec {
		padding: 8px;
	}
	.gameBody .countdown .day .num, .gameBody .countdown .hour .num, .gameBody .countdown .min .num, .gameBody .countdown .sec .num {
		font-size: 54px;
	}
	.gameBody .primaryButton {
		width: 100%;
		min-width: 0;
	}
}

@media only screen and (max-width: 420px) {
	.gameBody .churchInfoBar {
		gap: 6px;
	}
	.gameBody .churchInfoBar a, .gameBody .churchInfoBar a:visited {
		padding: 8px 11px;
		font-size: 14px;
		gap: 5px;
	}
}

/* Links that sit on photos keep their own colours (the general .gameBody link colour is for plain text) */
.gameBody .investigateBox a, .gameBody .investigateBox a:visited, .gameBody .investigateBox a:hover {
	color: white;
}

.gameBody .treasureInfoBox h2 a, .gameBody .treasureInfoBox h2 a:visited {
	color: #ffa455;
}

.gameBody .formFieldTitle {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 26px;
	letter-spacing: 0.5px;
}

/* Ended-game page (displayEndedGame): thanks, the host church, and an invitation to start a game */
.gameBody .endedGame {
	padding-top: 8px;
}

.gameBody .endedInvite {
	margin: 8px 0 20px;
	padding: 28px 24px 32px;
	border-radius: 16px;
	background-color: #1b1209;
	background-image: radial-gradient(circle at 50% 120%, rgba(238, 147, 32, 0.45), transparent 60%);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.gameBody .endedInvite h2 {
	color: var(--kqth-yellow);
}

.gameBody .endedInvite p {
	color: rgba(255, 255, 255, 0.88);
}

.gameBody .endedInvite .portalSectionIcon {
	height: 48px;
	filter: invert(1);
}

.gameBody a.endedInviteButton, .gameBody a.endedInviteButton:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	background-color: var(--kqth-yellow);
	border: 1px solid var(--kqth-orange);
	color: black;
	text-decoration: none;
}

.gameBody a.endedInviteButton:hover {
	background-color: var(--kqth-orange);
	color: white;
}

/* Finale RSVP: space between the group-size drop-down and the "I'm coming!" button */
.gameBody .finaleRSVP .formEntryElement {
	margin-bottom: 16px;
}

.gameBody #rsvpButton {
	margin-top: 4px;
}

/* Phones: the three church links share one row in equal columns, whatever the font widths */
@media only screen and (max-width: 420px) {
	.gameBody .churchInfoBar {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
	.gameBody .churchInfoBar a, .gameBody .churchInfoBar a:visited {
		justify-content: center;
		padding: 8px 4px;
		font-size: 13px;
		gap: 4px;
		white-space: nowrap;
	}
}

/* Clue and riddle box icons use top padding for spacing, so they keep content-box sizing
   (with border-box, the 40px padding filled their 40px height and the icons vanished on desktop). */
.gameBody .locationClueBox img, .gameBody .investigateBox img {
	box-sizing: content-box;
}


/* ---------------------------------------------------------------------------
   KQTH Admin (/vault24/admin: games list, game page, save result). Same look as
   the church Admin Portal: Bebas Neue headings, Inter text, white rounded cards,
   orange and yellow accents. admin/index.php adds .portalBody, .adminShell and
   .adminArea. Field names/IDs and scripts are unchanged.
   --------------------------------------------------------------------------- */
.mainBodyContainer.adminShell {
	width: auto;
	max-width: 1280px;
	padding: 0 16px;
	box-sizing: border-box;
}

.adminTopBar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 12px 0 8px;
}

.adminShell .adminTopBar .logoImage {
	width: 220px;
	max-width: 55vw;
}

.adminTopBarLabel {
	font-family: "Inter", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: white;
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 999px;
	padding: 5px 12px;
	white-space: nowrap;
}

.adminArea {
	text-align: left;
	font-family: "Inter", Arial, sans-serif;
	color: rgba(0, 0, 0, 0.81);
	overflow-wrap: anywhere;
}

.adminArea *, .adminArea *::before, .adminArea *::after {
	box-sizing: border-box;
}

.adminArea h1, .adminArea h2 {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;
}

.adminArea h3 {
	font-family: "Inter", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.55);
	margin: 0 0 4px;
}

.adminArea p, .mainBodyContainer .adminArea p {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 10px;
}

.adminArea a, .adminArea a:visited {
	color: #b56a0c;
}

.adminArea .error {
	color: #b00020;
}

.adminShell #footer {
	margin-top: 40px;
	font-size: 13px;
}

/* Header */
.adminHeader {
	text-align: center;
	margin: 8px 0 22px;
}

.adminArea .adminEyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--kqth-orange);
}

.adminHeader h1 {
	font-size: 48px;
	line-height: 1.05;
	margin: 4px 0 10px;
}

.adminHeaderLinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 16px;
	font-size: 14px;
	font-weight: 600;
}

.adminArea a.adminBack, .adminArea a.adminBack:visited {
	display: inline-block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.adminArea a.adminBack:hover {
	text-decoration: underline;
}

/* Status pills: getting set up (yellow), live (orange), completed (grey) */
.adminStatus {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	background-color: #fff2c2;
	color: #6b4a00;
}

.adminStatus.live {
	background-color: var(--kqth-orange);
	color: white;
}

.adminStatus.completed {
	background-color: #ececec;
	color: rgba(0, 0, 0, 0.6);
}

/* Big numbers */
.adminStats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.adminStat {
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	padding: 16px 12px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.adminStatValue {
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 44px;
	line-height: 1;
	color: var(--kqth-orange);
}

.adminStatLabel {
	margin-top: 6px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.65);
}

@media only screen and (min-width: 900px) {
	.adminStat.adminStatWide {
		grid-column: span 2;
	}
}

.adminArea .adminNote {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
}

/* Cards */
.adminCard {
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	padding: 22px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.adminCard h2 {
	font-size: 30px;
	margin: 0 0 6px;
}

.adminCardHeading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.adminCardHeading h2 {
	margin: 0;
}

.adminDateNote {
	font-size: 14px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.55);
}

/* Games list: search and filter above the table */
.adminToolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 16px;
}

.adminArea #gamesSearchBarArea {
	flex: 1 1 280px;
	max-width: 420px;
	margin: 0;
}

.adminCheck {
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.adminArea input[type="checkbox"] {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
	margin: 0 6px 0 0;
	accent-color: var(--kqth-orange);
}

.adminTableWrap {
	overflow-x: auto;
}

.adminArea #gamesSummaryTable {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
	overflow-wrap: normal;
}

.adminArea #gamesSummaryTable th {
	background-color: transparent;
	border-bottom: 2px solid #eee;
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.55);
	vertical-align: bottom;
}

.adminArea #gamesSummaryTable th a, .adminArea #gamesSummaryTable th a:visited {
	color: rgba(0, 0, 0, 0.55);
}

.adminArea #gamesSummaryTable th.sort-active {
	background-color: transparent;
}

.adminArea #gamesSummaryTable th.sort-active a {
	color: #b56a0c;
}

.adminArea #gamesSummaryTable td {
	padding: 12px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: top;
}

.adminArea #gamesSummaryTable tbody tr:hover {
	background-color: #fffaf0;
}

/* The whole row opens the game (script in games.php), not just its text */
.adminArea #gamesSummaryTable tbody tr[data-href] {
	cursor: pointer;
}

.adminArea #gamesSummaryTable td a, .adminArea #gamesSummaryTable td a:visited {
	display: block;
	color: rgba(0, 0, 0, 0.81);
	text-decoration: none;
}

.adminArea #gamesSummaryTable td.churchNameCell a {
	font-weight: 700;
	color: rgba(0, 0, 0, 0.9);
}

.adminArea #gamesSummaryTable td:last-child {
	min-width: 230px;
}

.adminArea #gamesSummaryTable td.emailCell {
	overflow-wrap: anywhere;
	min-width: 140px;
}

.adminArea #gamesSummaryTable td[data-label="Launch"],
.adminArea #gamesSummaryTable td.orderIDCell {
	white-space: nowrap;
}

.adminArea #gamesSummaryTable .livestreamViewsCell {
	font-size: 13px;
	line-height: 1.45;
	min-width: 150px;
	color: rgba(0, 0, 0, 0.7);
}

.adminArea .adminEmpty {
	text-align: center;
	color: rgba(0, 0, 0, 0.55);
	margin: 20px 0 4px;
}

/* Phones and narrow windows: each game becomes a small card, labelled from data-label */
@media only screen and (max-width: 900px) {
	.adminArea #gamesSummaryTable thead {
		display: none;
	}
	.adminArea #gamesSummaryTable,
	.adminArea #gamesSummaryTable tbody,
	.adminArea #gamesSummaryTable tr,
	.adminArea #gamesSummaryTable td {
		display: block;
		width: 100%;
	}
	.adminArea #gamesSummaryTable tr {
		border: 1px solid #eee;
		border-radius: 12px;
		padding: 8px 12px;
		margin-bottom: 12px;
	}
	.adminArea #gamesSummaryTable td,
	.adminArea #gamesSummaryTable td.orderIDCell,
	.adminArea #gamesSummaryTable td.emailCell {
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 10px;
		padding: 6px 0;
		border-bottom: 1px solid #f5f5f5;
	}
	.adminArea #gamesSummaryTable td:last-child {
		border-bottom: 0;
	}
	.adminArea #gamesSummaryTable td::before {
		content: attr(data-label);
		font-size: 12px;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.5);
	}
	.adminArea #gamesSummaryTable td.churchNameCell {
		display: block;
		font-size: 17px;
		padding: 4px 0 8px;
	}
	.adminArea #gamesSummaryTable td.churchNameCell::before {
		display: none;
	}
	.adminArea #gamesSummaryTable tr[style*="none"] {
		display: none;
	}
	.adminArea #gamesSummaryTable .livestreamViewsCell {
		min-width: 0;
	}
}

/* Game page form: sections side by side on desktop, stacked on phones */
.adminFormGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
	align-items: start;
}

.adminFormGrid .adminSpan {
	grid-column: 1 / -1;
}

.adminColumns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 28px;
	align-items: start;
}

.adminColumns > div > h3 {
	margin-top: 14px;
}

.adminFields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.adminFields .wide {
	grid-column: 1 / -1;
}

/* The church card is full width, so its fields can sit four across */
@media only screen and (min-width: 1000px) {
	.adminFields.adminFieldsWide {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.adminFields.adminFieldsWide .wide {
		grid-column: span 2;
	}
	.adminFields.adminFieldsWide .adminNote.wide {
		grid-column: 1 / -1;
	}
}

.adminArea .adminNote.wide {
	margin: 12px 0 0;
}

.adminArea .adminField {
	margin-top: 14px;
	min-width: 0;
}

.adminArea .formLabel {
	margin: 0;
}

.adminArea .formFieldTitle {
	font-family: "Inter", Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.81);
}

.adminArea .textEntryDescription {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.6);
	margin: 3px 0 0;
}

.adminArea .formEntryElement {
	margin-top: 6px;
}

.adminArea .textField,
.adminArea .instructionsTextArea,
.adminArea .dropDownSelect {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	height: auto;
	padding: 9px 12px;
	margin: 6px 0 0;
	border: 1px solid #cfcfcf;
	border-radius: 10px;
	background-color: white;
	font-family: "Inter", Arial, sans-serif;
	font-size: 16px; /* 16px stops phones zooming in when a field is tapped */
	text-align: left;
	color: rgba(0, 0, 0, 0.85);
}

.adminArea .formEntryElement .textField,
.adminArea .formEntryElement .instructionsTextArea {
	margin-top: 0;
}

.adminArea .dropDownSelect option {
	width: auto;
}

.adminArea .instructionsTextArea {
	min-height: 120px;
	resize: vertical;
}

.adminArea .textField:focus,
.adminArea .instructionsTextArea:focus,
.adminArea .dropDownSelect:focus {
	outline: none;
	border-color: var(--kqth-orange);
	box-shadow: 0 0 0 3px rgba(238, 147, 32, 0.2);
}

.adminArea .calculatedValue {
	display: inline-block;
	font-size: 18px;
	background-color: #fff6d9;
	border-radius: 10px;
	padding: 8px 12px;
}

/* Save bar: sticks to the bottom of the window while the form is on screen */
.adminSaveBar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin: 0 -16px;
	padding: 12px 16px;
	background-color: rgba(250, 248, 244, 0.94);
	border-top: 1px solid #e6e6e6;
	backdrop-filter: blur(4px);
}

.adminArea .submitButtonArea {
	margin: 0;
	text-align: center;
}

.adminArea #errorMessage:empty {
	display: none;
}

/* Buttons (also used as links on the save result page) */
.adminArea .primaryButton, .adminArea .secondaryButton,
.adminArea a.primaryButton, .adminArea a.secondaryButton {
	display: inline-block;
	width: auto;
	min-width: 240px;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 10px 28px;
	border-radius: 999px;
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0.5px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.adminArea .primaryButton, .adminArea a.primaryButton, .adminArea a.primaryButton:visited {
	background-color: var(--kqth-yellow);
	border: 1px solid var(--kqth-orange);
	color: black;
}

.adminArea .primaryButton:hover, .adminArea a.primaryButton:hover {
	background-color: var(--kqth-orange);
	color: white;
}

.adminArea .secondaryButton, .adminArea a.secondaryButton, .adminArea a.secondaryButton:visited {
	background-color: white;
	border: 1px solid #bbbbbb;
	color: rgba(0, 0, 0, 0.75);
}

.adminArea .secondaryButton:hover, .adminArea a.secondaryButton:hover {
	background-color: #f3f3f3;
}

/* Save result page */
.adminResult {
	max-width: 760px;
	margin: 0 auto 20px;
}

.adminResult h2 .fa-circle-check {
	color: #3c8a3c;
	font-size: 24px;
	vertical-align: 2px;
}

.adminResultButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

@media only screen and (max-width: 900px) {
	.adminFormGrid, .adminColumns {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media only screen and (max-width: 600px) {
	.adminHeader h1 {
		font-size: 38px;
	}
	.adminStats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.adminStat.adminStatWide {
		grid-column: 1 / -1;
	}
	.adminStatValue {
		font-size: 36px;
	}
	.adminStats.adminStatsThree {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.adminCard {
		padding: 16px;
	}
	.adminCard h2 {
		font-size: 26px;
	}
	.adminFields {
		grid-template-columns: minmax(0, 1fr);
	}
	.adminArea .primaryButton, .adminArea .secondaryButton,
	.adminArea a.primaryButton, .adminArea a.secondaryButton {
		width: 100%;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------------
   Editions and My Games. The Junior Edition title image sits under the logo on
   Junior pages (editions.php, editionTitleImage); My Games lists an account's
   games (adminPortal/myGames.php).
   --------------------------------------------------------------------------- */
.editionTitleImage {
	display: block;
	width: 300px;
	max-width: 70%;
	margin: -4px auto 10px;
}

.portalShell .editionTitleImage {
	width: 220px;
	max-width: 60%;
}

.portalPage .portalSignInPrompt {
	background-color: #faf8f4;
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 14px;
}

.myGamesList {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
	text-align: left;
}

.portalPage a.myGame, .portalPage a.myGame:visited {
	display: block;
	border: 1px solid #e6e6e6;
	border-left: 5px solid var(--kqth-orange);
	border-radius: 12px;
	padding: 14px 16px;
	color: rgba(0, 0, 0, 0.81);
	text-decoration: none;
}

.portalPage a.myGame:hover {
	background-color: #fffaf0;
	border-color: var(--kqth-orange);
}

.myGame span {
	display: block;
}

.myGame .myGameEdition {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kqth-orange);
}

.myGame .myGameName {
	font-size: 18px;
	font-weight: 700;
	margin: 2px 0 4px;
}

.myGame .myGameDetails {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
}

/* /admin: edition pill on the games list */
.adminEditionPill {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background-color: #e3f0fa;
	color: #1e5f92;
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Share boxes on the game page (displayShareBox in functions.php): "Invite
   friends to the hunt" under the grand prize, and "Maybe a friend can help?"
   under each riddle. Buttons match the church links under the church name.
   --------------------------------------------------------------------------- */
.gameBody .shareBox {
	margin: 24px auto 0;
	padding: 20px 20px 24px;
	background-color: #fffaf0;
	border: 1px solid #f0dcb4;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	font-family: "Inter", Arial, sans-serif;
}

.gameBody .shareBox h3 {
	margin: 0 0 6px;
	font-size: 28px;
}

.gameBody .shareBox h3 i {
	color: var(--kqth-orange);
	font-size: 22px;
	margin-right: 4px;
}

.gameBody .shareBox p {
	margin: 0 0 16px;
	font-size: 16px;
	color: rgba(0, 0, 0, 0.7);
}

.gameBody .shareButtons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 16px;
}

.gameBody .shareButton, .gameBody a.shareButton, .gameBody a.shareButton:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid #e3d9c8;
	border-radius: 999px;
	background-color: white;
	color: rgba(0, 0, 0, 0.8);
	font-family: "Inter", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.gameBody .shareButton:hover {
	border-color: var(--kqth-orange);
	color: black;
}

.gameBody .shareButton i {
	color: var(--kqth-orange);
}

/* Share opens the phone's own menu (Messages, Facebook, WhatsApp...), so it leads */
.gameBody .shareButton.shareNative {
	background-color: var(--kqth-orange);
	border-color: var(--kqth-orange);
	color: white;
}

.gameBody .shareButton.shareNative i {
	color: white;
}

.gameBody .shareButton[hidden] {
	display: none;
}

/* A friend's link lands on the riddle's heading, clear of the top of the screen */
.gameBody .riddleHeading {
	scroll-margin-top: 16px;
}

@media only screen and (max-width: 420px) {
	.gameBody .shareBox {
		padding: 16px 12px 20px;
	}
	.gameBody .shareButtons {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px; /* phones keep the tighter spacing */
	}
	.gameBody .shareButton, .gameBody a.shareButton {
		justify-content: center;
		padding: 8px 6px;
	}
	.gameBody .shareButton.shareNative {
		grid-column: 1 / -1;
	}
}

/* "Never miss a clue" under the countdown (displayCalendarBox): same look as the share boxes, with
   "Add to my calendar" leading like the Share button. */
.gameBody .shareButton.shareLead, .gameBody a.shareButton.shareLead, .gameBody a.shareButton.shareLead:visited {
	background-color: var(--kqth-orange);
	border-color: var(--kqth-orange);
	color: white;
}

.gameBody .shareButton.shareLead i {
	color: white;
}

.gameBody .calendarBox {
	margin-bottom: 24px;
}

@media only screen and (max-width: 420px) {
	.gameBody .shareButton.shareLead {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
   Promotion Plan (adminPortal/promotionPlan.php): the dated social media plan
   and the Sunday slides. Sits in the Admin Portal's white page card.
   --------------------------------------------------------------------------- */
.portalPage .promoLink, .portalPage .promoTips, .portalPage .promoEmpty {
	background-color: #faf8f4;
	border: 1px solid #ece6da;
	border-radius: 12px;
	padding: 14px 18px;
	margin: 16px 0;
	text-align: left;
}

.portalPage .promoLink p {
	margin: 0 0 8px;
	font-size: 15px;
}

.portalPage .promoCopyRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.portalPage .promoCopyRow code {
	flex: 1 1 260px;
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	word-break: break-all;
}

.portalPage .promoTips ul {
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.5;
}

.portalPage .promoTips h2 {
	margin-top: 0;
}

.portalPage .promoCopy, .portalPage .promoBackground {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	padding: 8px 14px;
	font-size: 14px;
	text-decoration: none;
}

/* The plan: one row per day, the date on the left */
.portalPage .promoTimeline {
	list-style: none;
	margin: 16px 0 32px;
	padding: 0;
	text-align: left;
}

.portalPage .promoStep {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid #ece6da;
}

.portalPage .promoStep.past {
	opacity: 0.55;
}

.portalPage .promoStep.next .promoStepDate {
	color: var(--kqth-orange);
}

.portalPage .promoStepDate {
	font-weight: 700;
	font-size: 15px;
}

.portalPage .promoNext, .portalPage .promoDone {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.portalPage .promoNext {
	background-color: var(--kqth-orange);
	color: white;
}

.portalPage .promoDone {
	background-color: #ece6da;
	color: rgba(0, 0, 0, 0.6);
}

.portalPage .promoStepBody h3 {
	margin: 0 0 6px;
	text-align: left;
}

.portalPage .promoChannels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.portalPage .promoChannel {
	padding: 3px 10px;
	border-radius: 999px;
	background-color: #f1ede5;
	font-size: 12px;
	font-weight: 600;
}

.portalPage .promoChannel-facebook i { color: #1877f2; }
.portalPage .promoChannel-instagram i { color: #d62976; }
.portalPage .promoChannel-youtube i { color: #ff0000; }
.portalPage .promoChannel-stories i { color: var(--kqth-orange); }

.portalPage .promoStepContent {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.portalPage a.promoGraphic {
	display: block;
	text-decoration: none;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
}

.portalPage .promoGraphic img {
	width: 100%;
	max-height: 190px;
	object-fit: contain;
	border-radius: 8px;
	border: 1px solid #e6e6e6;
	background-color: #f5f2ec;
}

.portalPage .promoCaption {
	margin: 0 0 10px;
	padding: 12px 14px;
	background-color: #fffaf0;
	border: 1px solid #f0dcb4;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.45;
}

.portalPage .promoTip {
	margin: 10px 0 0;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.65);
}

.portalPage .promoTip i {
	color: var(--kqth-orange);
}

/* Sunday slides: cards in a grid */
.portalPage .promoSlides {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 16px;
	text-align: left;
}

.portalPage .promoSlide {
	border: 1px solid #ece6da;
	border-radius: 12px;
	padding: 14px;
}

.portalPage .promoSlide.past {
	opacity: 0.55;
}

.portalPage .promoSlideHeader {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 14px;
}

.portalPage .promoSlidePreview {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background-color: #2a2118;
}

.portalPage .promoSlideText {
	margin: 10px 0;
	font-size: 14px;
}

.portalPage .promoSlideButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.portalPage .promoSlideDownload {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	padding: 8px 14px;
	font-size: 14px;
}

@media only screen and (max-width: 600px) {
	.portalPage .promoStep {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	.portalPage .promoStepContent {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 10px;
	}
}

/* Promotion Plan buttons are compact, unlike the portal's full-size form buttons (which have a 260px minimum). */
.portalPage .promoCopy, .portalPage .promoBackground, .portalPage .promoSlideDownload {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 7px 14px;
	font-size: 17px;
}

/* Promotion Plan: the trailer box and video steps (a YouTube thumbnail with a play mark) */
.portalPage .promoTrailerRow {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.portalPage .promoTrailerActions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.portalPage .promoTrailerActions .promoCopyRow {
	width: 100%;
}

.portalPage a.promoTrailerThumb, .portalPage .promoVideoThumb {
	position: relative;
	display: block;
}

.portalPage .promoTrailerThumb img, .portalPage .promoVideoThumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #e6e6e6;
}

/* .promoPlay wraps the icon, since Font Awesome replaces the <i> with an <svg> */
.portalPage .promoPlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	line-height: 44px;
	border-radius: 50%;
	background-color: rgba(238, 147, 32, 0.92);
	color: white;
	font-size: 18px;
	text-align: center;
	pointer-events: none;
}

.portalPage .promoVideoThumb .promoPlay {
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-size: 13px;
}

.portalPage .promoGraphic.promoVideo img {
	max-height: none;
}

@media only screen and (max-width: 600px) {
	.portalPage .promoTrailerRow {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Promotion Plan: the vertical (9:16) trailer preview, in the trailer box and in plan steps */
.portalPage .promoVerticalRow {
	grid-template-columns: 150px minmax(0, 1fr);
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #ece6da;
}

.portalPage .promoVerticalRow .promoTrailerActions p {
	margin: 0;
}

.portalPage .promoVerticalPreview {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 8px;
	background-color: #1c1611;
	object-fit: cover;
}

.portalPage .promoGraphic.promoVertical {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
	text-align: center;
}

.portalPage .promoGraphic.promoVertical a {
	color: inherit;
}

.portalPage .promoGraphic.promoVertical .promoVerticalPreview {
	margin-bottom: 4px;
}

@media only screen and (max-width: 600px) {
	.portalPage .promoVerticalRow {
		grid-template-columns: 120px minmax(0, 1fr);
	}
}

/* Finale videos after a game (finaleVideos.php): on the ended page for players who played, and the private finale page */
.gameBody .finaleVideosBox {
	margin: 24px auto;
	padding: 20px 16px 8px;
	background-color: #fffaf0;
	border: 1px solid #f0dcb4;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.gameBody .finaleVideosBox h2 {
	margin-top: 0;
}

.gameBody .finaleVideosBox h3 {
	margin: 8px 0;
}

/* Admin Portal Videos page: sharing the finale videos (QR code and private link) */
.portalPage .finaleShareRow {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	margin-top: 12px;
	text-align: left;
}

.portalPage .finaleQRCanvas {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
}

.portalPage .finaleShareActions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.portalPage .finaleShareActions code {
	width: 100%;
	box-sizing: border-box;
	background-color: white;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 12px;
	word-break: break-all;
}

.portalPage .finaleCopy, .portalPage .finaleQRDownload {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	min-width: 0;
	min-height: 0;
	padding: 7px 14px;
	font-size: 17px;
}

@media only screen and (max-width: 600px) {
	.portalPage .finaleShareRow {
		grid-template-columns: minmax(0, 1fr);
	}
	.portalPage .finaleQRCanvas {
		max-width: 220px;
		margin: 0 auto;
	}
}

/* Email sign-up and "Share your story" forms (playerStories.php); they sit in the share box style */
.gameBody .signupBox form, .gameBody .storyBox form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
	text-align: left;
}

.gameBody .signupBox .textField, .gameBody .storyBox .textField, .gameBody .storyBox textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
}

.gameBody .storyBox textarea {
	min-height: 110px;
	border-radius: 10px;
	border: 1px solid #cfcfcf;
	font-family: "Inter", Arial, sans-serif;
	font-size: 16px;
}

.gameBody .storyFields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.gameBody .storyFields input[type=email] {
	grid-column: 1 / -1;
}

.gameBody .storyCheck {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.75);
}

.gameBody .storyCheck input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.gameBody .storyFile {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1px dashed var(--kqth-orange);
	border-radius: 10px;
	background-color: white;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.gameBody .storyFile i {
	color: var(--kqth-orange);
}

.gameBody .storyFile input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.gameBody .signupBox button, .gameBody .storyBox button {
	align-self: center;
}

.gameBody .storyProgress {
	height: 8px;
	border-radius: 999px;
	background-color: #f0dcb4;
	overflow: hidden;
}

.gameBody .storyProgress[hidden] {
	display: none;
}

.gameBody .storyProgress div {
	width: 0;
	height: 100%;
	background-color: var(--kqth-orange);
	transition: width 0.3s;
}

.gameBody .formMessage {
	margin: 0;
	min-height: 1em;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
}

.gameBody .formMessage.error {
	color: #b3261e;
}

.gameBody .storyTrap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
}

.gameBody a.finaleJump {
	font-weight: 600;
}

@media only screen and (max-width: 420px) {
	.gameBody .storyFields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Players' stories on the admin game page (displayAdminPlayerStories) */
.adminArea .adminStories {
	margin-top: 20px;
}

.adminArea .adminStory {
	border-top: 1px solid #eee;
	padding: 14px 0;
}

.adminArea .adminStory video {
	width: 100%;
	max-width: 480px;
	max-height: 480px;
	background: #000;
	border-radius: 8px;
}

/* Thank-you panel that replaces the sign-up or story form once it's sent (scripts/stories.js) */
.gameBody .formThanks {
	text-align: center;
	padding: 18px 8px 8px;
}

.gameBody .formThanksIcon {
	display: block;
	font-size: 48px;
	color: #2e9d57;
}

.gameBody .formThanks h4 {
	font-size: 24px;
	margin: 10px 0 6px;
}

.gameBody .formThanks p {
	margin: 0 0 16px;
}

.gameBody .signupBox form[hidden], .gameBody .storyBox form[hidden], .gameBody .formThanks[hidden] {
	display: none;
}

/* Players' Stories in the church Admin Portal (adminPortal/stories.php) */
.portalPage .portalStory {
	text-align: left;
	border-top: 1px solid #eee;
	padding: 18px 0 6px;
}

.portalPage .portalStory h3 {
	margin: 0 0 8px;
}

.portalPage .portalStory h3 span {
	font-weight: 400;
	opacity: 0.7;
}

.portalPage .portalStory video, .adminArea .adminStory video {
	display: block;
	width: 100%;
	max-width: 480px;
	max-height: 480px;
	background: #000;
	border-radius: 8px;
}

/* /admin: Hide / Show a story for the church */
.adminArea .adminStoryHide {
	float: right;
	margin: 0 0 8px 12px;
}

.adminArea .adminStory.isHidden > :not(form) {
	opacity: 0.5;
}

.adminArea .adminStoryHiddenLabel {
	font-size: 13px;
	margin-right: 6px;
}

/* A pill button inside a dashboard card, like the toolkit's (the Players' Stories card) */
.dashboard a.dashCardButton, .dashboard a.dashCardButton:visited {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background-color: var(--kqth-yellow);
	border: 1px solid var(--kqth-orange);
	font-weight: 700;
	font-size: 15px;
	color: black;
	text-decoration: none;
}

.dashboard a.dashCardButton:hover {
	background-color: var(--kqth-orange);
	color: white;
}

/* A church's logo under "Hosted by", above its name (churchLogo.php). No wider than the yellow pill above it
   (set by a script in index.php; 300px until then), and not too tall for square logos. */
.gameBody .churchLogoWrap {
	line-height: 0;
	margin: 8px 0 4px;
}

.gameBody .churchLogoWrap.noName {
	margin-bottom: 16px; /* the space the name would have left before the buttons */
}

.gameBody .churchLogo {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 300px;
	max-height: 140px;
	object-fit: contain; /* scale the whole logo to fit, never crop */
}

/* Admin Portal: Church Logo page (adminPortal/churchLogo.php) */
.portalPage .logoTips {
	text-align: left;
	background-color: #fff8e6;
	border: 1px solid #f0dcb4;
	border-radius: 12px;
	padding: 4px 18px;
	margin: 0 0 18px;
}

.portalPage .logoTips ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.portalPage .logoTips li {
	margin: 0 0 6px;
}

.portalPage .logoPreview {
	background-color: #f8f6f2; /* the game website's page color */
	border-radius: 12px;
	padding: 14px 16px 18px;
	margin: 0 0 18px;
	text-align: center;
}

.portalPage .logoPreview p.logoPreviewHosted {
	margin: 0 0 6px;
	color: #eb9220;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.portalPage .logoPreview img {
	max-width: 300px;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain; /* scale the whole logo to fit, never crop */
}

.portalPage .logoForm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}

.portalPage p.logoMessage {
	font-weight: 600;
	color: #2e7d47;
}

.portalPage p.logoMessage.error {
	color: #c0392b;
}

.portalPage .logoPreview p.logoPreviewName {
	margin: 6px 0 0;
	font-family: "Bebas Neue", "Agency FB", sans-serif;
	font-size: 34px;
	line-height: 1.1;
	color: rgba(0, 0, 0, 0.85);
}

.portalPage .logoShowName {
	gap: 4px;
}

.portalPage .logoCheck {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	cursor: pointer;
}

.portalPage .logoCheck input {
	width: 18px;
	height: 18px;
	accent-color: var(--kqth-orange);
}

/* /admin: Player Emails card on the game page (displayAdminPlayerEmails) */
.adminArea .adminPlayerEmails {
	margin-top: 20px;
}

.adminArea .adminEmailTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 6px 0 14px;
}

.adminArea .adminEmailTable th, .adminArea .adminEmailTable td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
}

.adminArea .adminEmailTest {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.adminArea .adminEmailTest .textField {
	width: auto;
	flex: 1 1 200px;
}

.adminArea .adminWarning {
	color: #a05a00;
}

/* /admin: Livestream Views card (displayAdminLivestreamViews) */
.adminArea .adminLivestreamViews {
	margin-top: 20px;
}

.adminArea .adminCountField {
	width: 100%;
	max-width: 220px;
}

/* /admin sign-in (admin/auth.php): the sign-in, password and setup cards, and who's signed in on the top bar */
.adminArea .adminAuthCard {
	max-width: 420px;
	margin: 30px auto;
}

.adminArea .adminAuthForm {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 12px 0;
}

.adminArea .adminAuthForm label {
	font-weight: 600;
	font-size: 14px;
	margin-top: 6px;
}

.adminArea .adminAuthForm .textField {
	width: 100%;
	box-sizing: border-box;
}

.adminArea .adminAuthForm .primaryButton {
	width: 100%;
	margin-top: 12px;
}

.adminArea p.adminAuthMessage {
	font-weight: 600;
	color: #2e7d47;
}

.adminArea p.adminAuthMessage.error {
	color: #c0392b;
}

.adminTopBarUser {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.7);
}

.adminTopBarUser a {
	color: inherit;
}

.adminArea .adminTeamActions form {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}