/**
 * =======================================================================
 * STYLESHEET: ROGERD (REPAIRED & STREAMLINED)
 * =======================================================================
 */

/* =======================================================================
	DYNAMIC LIGHT / DARK MODE VARIABLES
	======================================================================= */
 :root {
	 /* LIGHT MODE (DEFAULT) */
	 --rd-bg: #ffffff;
	 --rd-text: #121213;
	 --rd-border: #d3d6da; /* Empty tile border */
	 --rd-key-bg: #d3d6da;
	 --rd-key-text: #121213;
	 --rd-absent: #787c7e;
	 --rd-present: #c9b458;
	 --rd-correct: #6aaa64;
	 --rd-tbd: #878a8c;
	 --rd-modal-bg: rgba(255, 255, 255, 0.95);
	 --rd-modal-content: #ffffff;
 }
 @media (prefers-color-scheme: light) {
	:root {
		/* LIGHT MODE (DEFAULT) */
		--rd-bg: #ffffff !important;
		--rd-text: #121213 !important;
		--rd-border: #d3d6da; /* Empty tile border */
		--rd-key-bg: #d3d6da;
		--rd-key-text: #121213;
		--rd-absent: #787c7e;
		--rd-present: #c9b458;
		--rd-correct: #6aaa64;
		--rd-tbd: #878a8c;
		--rd-modal-bg: rgba(255, 255, 255, 0.95) !important;
		--rd-modal-content: #ffffff;
	}
}
  
 @media (prefers-color-scheme: dark) {
	 :root {
		 /* DARK MODE OVERRIDES */
		 --rd-bg: #121213;
		 --rd-text: #ffffff;
		 --rd-border: #3a3a3c;
		 --rd-key-bg: #818384;
		 --rd-key-text: #ffffff;
		 --rd-absent: #3a3a3c;
		 --rd-present: #b59f3b;
		 --rd-correct: #538d4e;
		 --rd-tbd: #565758;
		 --rd-modal-bg: rgba(18, 18, 19, 0.95);
		 --rd-modal-content: #222222;
	 }
 }
 
 /* Force the body to respect our variables, overriding the CMS theme-light class */
 /* Force the body to respect our variables, overriding the CMS theme-light class */
  body.rogerd.theme-light {
	  background-color: var(--rd-bg) !important;
	  color: var(--rd-text) !important;
	  transition: background-color 0.3s, color 0.3s;
  }
/* =======================================================================
   HEADER: CLOCK & CLUE STACK
   ======================================================================= */
.rogerd-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
	margin-bottom: 20px;
	padding-bottom: 10px;
	width: 100%;
}

.rogerd-title { margin: 0; font-size: 24px; letter-spacing: 1px; font-weight: 800; flex: 1; text-align: left; color: var(--rd-text); }
.rogerd-timer { font-family: monospace; font-size: 18px; color: var(--rd-text) !important; opacity: 0; transition: opacity 0.3s ease; }

.rd-header-center {
	flex: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


.rd-streamlined-clue {
	font-size: 18px;
	font-style: italic;
	font-weight: bold;
	color: var(--rd-text);
	margin-top: 4px;
	text-align: center;
}

.rd-header-hint-wrap {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.rd-header-hint {
	background-color: var(--rd-yellow);
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 800;
	border: none;
	border-radius: 4px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* =======================================================================
   GAME BOARD: RESTORED GRID
   ======================================================================= */
.rogerd-board-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-bottom: 30px;
}

.rd-row {
	display: flex;
	gap: 6px;
}

.rd-tile {
	width: 62px; height: 62px; font-size: 2rem; font-weight: bold;
	display: flex; justify-content: center; align-items: center; text-transform: uppercase; user-select: none;
	/* ARCHITECT FIX: Use dynamic variables */
	border: 2px solid var(--rd-border);
	background-color: var(--rd-bg);
	color: var(--rd-text);
}
.rd-tile[data-state="tbd"] { border-color: var(--rd-tbd); }
.rd-tile[data-state="correct"] { background-color: var(--rd-correct); border-color: var(--rd-correct); color: #fff; }
.rd-tile[data-state="present"] { background-color: var(--rd-present); border-color: var(--rd-present); color: #fff; }
.rd-tile[data-state="absent"] { background-color: var(--rd-absent); border-color: var(--rd-absent); color: #fff; }

/* =======================================================================
   KEYBOARD: MOBILE OPTIMIZED
   ======================================================================= */
.rogerd-keyboard-container {
	max-width: 500px;
	margin: 20px auto 0;
	padding: 0 8px;
	user-select: none;
	touch-action: manipulation;
}

.rd-key-row {
	display: flex;
	justify-content: center;
	margin-bottom: 8px;
}



.rd-key.large {
	flex: 1.5;
	font-size: 12px;
}

.rd-spacer { flex: 0.5; }

.rd-key {
	font-weight: bold; border: 0; margin: 0 3px; height: 58px; border-radius: 4px; cursor: pointer;
	display: flex; justify-content: center; align-items: center; text-transform: uppercase; flex: 1;
	/* ARCHITECT FIX: Use dynamic variables */
	background-color: var(--rd-key-bg);
	color: var(--rd-key-text);
}
.rd-key[data-state="absent"] { background-color: var(--rd-absent); color: #fff; }
.rd-key[data-state="present"] { background-color: var(--rd-present); color: #fff; }
.rd-key[data-state="correct"] { background-color: var(--rd-correct); color: #fff; }

/* =======================================================================
   MODAL & ARCADE FIXES
   ======================================================================= */
.rd-modal {
	   position: fixed; top: 73px; left: 0; width: 100%; height: 100%;
	   display: flex; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(4px);
	   background: var(--rd-modal-bg); /* Dynamic */
   }
   .rd-modal-content {
	   padding: 30px; border-radius: 8px; text-align: center; width: 90%; max-width: 400px;
	   background: var(--rd-modal-content); /* Dynamic */
	   color: var(--rd-text); /* Dynamic */
   }
   #rd-modal-title, .rd-score-display { color: var(--rd-text) !important; }
   .rd-stats p { color: var(--rd-text) !important; font-family: monospace; }
   .rd-input-3 {
	   width: 120px; height: 60px; font-size: 36px; text-align: center; border: 2px solid var(--rd-border);
	   background: var(--rd-bg); color: var(--rd-text); /* Dynamic */
   }


/* =======================================================================
   TOAST NOTIFICATIONS (ERROR MESSAGES)
   ======================================================================= */
.rd-toast {
	position: fixed;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #111111;
	color: #ffffff;
	padding: 14px 28px;
	border-radius: 6px;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 1px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 9999;
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.rd-toast.show {
	opacity: 1;
}

.rd-stats p { color: var(--rd-text); font-family: monospace; }

.rd-input-3 {
	width: 120px; height: 60px; font-size: 36px; text-align: center;
	background: #111; color: #fff; border: 2px solid #555;
	text-transform: uppercase;
}

.rd-btn-submit { background: var(--rd-green); color: white; width: 100%; padding: 15px; border:none; font-weight:bold; }

/* Arcade Mode: Hide Wrappers */
body.rogerd #header .top.logo,
body.rogerd #moblogo,
body.rogerd #footer {
	display: none !important;
}

/* Arcade Mode: Hide Wrappers */
body.rogerd.rogerd-leaderboard.theme-light { background: rgb(255, 255, 255) !important; }

body.rogerd-leaderboard .rogerd-header,
body.rogerd-leaderboard #moblogo, 
body.rogerd-leaderboard #footer {
	display: none !important;
}


/* Mobile Overrides */
@media (max-width: 600px) {
	.rd-modal { top: 48px; }
	.rd-tile { width: 48px; height: 48px; font-size: 1.5rem; }
	.rogerd-keyboard-container { width: 100%; padding: 0 4px; }
	.rd-key { height: 50px; margin: 0 2px; font-size: 13px; }
	.rd-key.large { font-size: 10px; }
	.rd-streamlined-clue { font-size: 11px; }
}

@keyframes rd-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(4px); }
	30%, 50%, 70% { transform: translateX(-8px); }
	40%, 60% { transform: translateX(8px); }
}
.rd-row.shake { animation: rd-shake 0.4s both; }

/* =======================================================================
   ARCHITECT UPGRADE: MODERN RETRO DARK MODE
   ======================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
	--rd-bg: #121213;
	--rd-text: #ffffff;
	--rd-empty: #3a3a3c;
	--rd-filled: #565758;
	--rd-green: #538d4e;
	--rd-yellow: #b59f3b;
	--rd-key-default-bg: #111111;
	--rd-key-default-text: #ffffff;
	--rd-gray: #787c7e;
	--rd-font-serif: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

/* =======================================================================
   FRAMEWORK OVERRIDE: FORCE DYNAMIC BACKGROUND ON ALL STRUCTURAL LAYERS
   ======================================================================= */
html.rogerd,
body.rogerd, 
body.rogerd #main, 
body.rogerd #content, 
body.rogerd #ajax {
	background-color: var(--rd-bg) !important;
	background-image: none !important;
	color: var(--rd-text) !important;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hide the CMS headers/footers in the game */

body.rogerd footer, 
body.rogerd .site-header, 
body.rogerd .site-footer {
	display: none !important;
}

/* Main Container */
.rd-completed-screen {
	text-align: center;
	padding: 50px 20px 20px;
	font-family: var(--rd-font-serif);
	max-width: 500px;
	margin: 0 auto;
}

/* Tile Logo Construction */
.rd-logo-row {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
}
.rd-logo-tile {
	width: 55px;
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	color: #fff;
	font-family: var(--rd-font-serif);
}
.rd-logo-half {
	width: 55px;
	height: 25px;
	background-color: var(--rd-key-default-bg);
	background-color: var(--rd-border);
}
.rd-logo-wrap { margin-bottom: 40px; }

/* Banners & Score Block */
.rd-mission-banner {
	background-color: var(--rd-text);
	color: var(--rd-bg);
	padding: 12px 24px;
	display: inline-block;
	font-weight: bold;
	letter-spacing: 3px;
	margin-bottom: 0px;
}

.rd-score-block {
	text-shadow:  0px 0px 5px var(--rd-bg);
	background-color: var(--rd-key-bg);/* Dark gray */
	padding: 25px;
	border-radius: 4px;
	margin: 0px 0 30px 0;
	border: 1px solid var(--rd-empty);
}
.rd-score-block p {
	font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
	color: var(--rd-text) !important;
	font-style: normal;
	font-weight: bold; 
	margin-bottom: 5px;
	
}

.rd-score-title {
	background-color: var(--rd-bg); /* Dark gray */
	color: var(--rd-text);
	font-family: monospace;
	font-size: 1.2em;
}

.rd-score-value {
	text-shadow:  0px 0px 5px #000;
	color: #39ff14; /* Kept the neon green */
	font-family: 'Press Start 2P', monospace;
	font-size: 2.2rem;
	margin-top: 15px;
	/*text-shadow: 0 0 10px rgba(57, 255, 20, 0.2);*/
}

/* Leaderboard */
.modern-leaderboard {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	font-family: var(--rd-font-serif);
}
.modern-leaderboard th {
	text-align: center;
	padding: 10px 5px;
	border-bottom: 2px solid var(--rd-empty);
	color: var(--rd-text);
	font-size: 0.95rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: bold;
}
.modern-leaderboard td {
	padding: 14px 5px;
	border-bottom: 1px solid var(--rd-empty);
	color: var(--rd-text);
	font-weight: bold;
}
.modern-leaderboard .agent-score { color: var(--rd-text); font-weight: bold; }
.modern-leaderboard .agent-name { letter-spacing: 2px; font-weight: bold; }
.modern-leaderboard .agent-rank { letter-spacing: 2px; font-weight: bold; font-size: 1.2em; }

.modern-leaderboard .agent-rank.gold {color: var(--rd-yellow); }
.modern-leaderboard .agent-rank.silver { color: #e0e0e0; text-shadow:  0px 0px 3px var(--rd-text); }
.modern-leaderboard .agent-rank.bronze { color: #cd7f32}


/* =======================================================================
   COMPLETION SCREEN & UTILITY CLASSES
   ======================================================================= */
.rd-bg-yellow { background-color: var(--rd-yellow); }
.rd-bg-green { background-color: var(--rd-green); }
.rd-bg-gray { background-color: var(--rd-gray); }

.rd-btn-share-final {
	margin-top: 20px;
	width: 100%;
	max-width: 220px;
	padding: 12px;
	font-size: 0.9rem;
	background-color: var(--rd-tbd);
	margin-left: auto;
	margin-right: auto;
}

.rd-btn-continue {
	margin-top: 15px;
	background-color: var(--rd-tbd);
}

.rd-share-msg-final {
	font-size: 12px;
	margin-top: 10px;
}

.rd-new-game-msg {
	color: var(--rd-text);
	letter-spacing: 2px;
	margin-bottom: 50px;
	text-transform: uppercase;
	display: inline-block;
}

.rd-high-scores-title {
	color: var(--rd-text);
	letter-spacing: 3px;
	border-bottom: 1px solid var(--rd-empty);
	padding-bottom: 15px;
	margin-bottom: 0;
}

.rd-public-leaderboard-wrap {
	min-height: 200px;
	padding-top: 10px;
}

.rd-loading-text {
	color: var(--rd-gray);
}

/* =======================================================================
   INFO MODALS & HEADER CONTROLS (HOW TO PLAY / TIPS)
   ======================================================================= */
.rd-header-controls {
	flex: 1; display: flex; justify-content: flex-end; gap: 8px;
}

.rd-header-btn {
	background-color: var(--rd-key-bg); color: var(--rd-text);
	font-size: 1.1rem; font-weight: 800; border: none; border-radius: 4px;
	width: 36px; height: 36px; cursor: pointer; display: flex;
	justify-content: center; align-items: center; transition: opacity 0.2s;
}
.rd-header-btn:hover { opacity: 0.8; }
.rd-header-btn.hint { background-color: var(--rd-yellow); color: #ffffff; }

.rd-info-modal {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	display: none; justify-content: center; align-items: center; z-index: 10000; 
	background: var(--rd-modal-bg); backdrop-filter: blur(4px);
}

.rd-info-content {
	background: var(--rd-bg); color: var(--rd-text);
	padding: 30px; border-radius: 8px; width: 90%; max-width: 450px;
	border: 1px solid var(--rd-border); box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	position: relative; text-align: left; font-family: var(--rd-font-serif);
	line-height: 1.5;
}

body.rogerd .rd-info-content h2 { margin-top: 0; font-weight: bold; font-size: 1.8rem; color: var(--rd-text); margin-bottom: 5px;}
body.rogerd .rd-info-content h3 { font-size: 1.2rem; margin-top: 20px; margin-bottom: 10px; color: var(--rd-text); border-bottom: 1px solid var(--rd-border); padding-bottom: 5px; }
body.rogerd .rd-info-content p, body.rogerd .rd-info-content li { font-family: sans-serif; font-size: 0.95rem; margin-bottom: 10px; color: var(--rd-text); }
body.rogerd .rd-info-content ul { padding-left: 20px; }

.rd-close-btn {
	position: absolute; top: 15px; right: 15px; background: none; border: none;
	color: var(--rd-text); font-size: 1.5rem; cursor: pointer; font-family: sans-serif; font-weight: bold;
}

.rd-mini-row { display: flex; gap: 4px; margin-bottom: 5px; margin-top: 15px; }
.rd-mini-tile {
	width: 34px; height: 34px; display: inline-flex; justify-content: center; align-items: center;
	font-size: 1.2rem; font-weight: bold; border: 2px solid var(--rd-border);
	text-transform: uppercase; background-color: var(--rd-bg); color: var(--rd-text);
}
.rd-mini-tile.green { background-color: var(--rd-correct); border-color: var(--rd-correct); color: #fff; }
.rd-mini-tile.yellow { background-color: var(--rd-present); border-color: var(--rd-present); color: #fff; }
.rd-mini-tile.gray { background-color: var(--rd-absent); border-color: var(--rd-absent); color: #fff; }