/* 88GD Dark Theme - applied only via body.gddt-active, only on the 4 game-integration pages */

body.gddt-active {
	background: var(--gddt-void) !important;
	color: var(--gddt-ink);
}

/* Cover the most common theme wrapper patterns so the void background reaches edge-to-edge
   regardless of the active theme. Specific child selectors stay untouched so we don't fight
   the active theme's structural layout, only its color choices on this page. */
body.gddt-active,
body.gddt-active #page,
body.gddt-active #content,
body.gddt-active .site,
body.gddt-active .site-content,
body.gddt-active main,
body.gddt-active article,
body.gddt-active .entry-content,
body.gddt-active .content-area {
	background-color: var(--gddt-void) !important;
	color: var(--gddt-ink);
}

/* Many themes cap their content wrapper at a fixed max-width (e.g. 1140px) and/or reserve
   space for a sidebar by default on pages. Both make the page look like a narrow column
   floating on the dark background instead of using the full screen. Remove both, scoped
   only to these 4 pages - our own elements (.gddt-brand-bar, .gd88-wallet-wrap,
   .gd88-auth-wrap) already carry their own sensible max-width for readability, so this
   just gives them a genuinely full-width canvas to be centered in. */
body.gddt-active #page,
body.gddt-active #content,
body.gddt-active .site,
body.gddt-active .site-content,
body.gddt-active main,
body.gddt-active article,
body.gddt-active .entry-content,
body.gddt-active .content-area,
body.gddt-active .container,
body.gddt-active .wrap,
body.gddt-active #primary,
body.gddt-active #main,
body.gddt-active .site-main,
body.gddt-active .wp-site-blocks {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
}
body.gddt-active #secondary,
body.gddt-active .widget-area,
body.gddt-active .sidebar {
	display: none !important;
}

body.gddt-active a { color: var(--gddt-gold); }
body.gddt-active a:hover { color: var(--gddt-jade); }

body.gddt-active ::selection { background: var(--gddt-gold); color: var(--gddt-void); }

body.gddt-active :focus-visible {
	outline: 2px solid var(--gddt-gold);
	outline-offset: 2px;
}

/* Type system: condensed display for headings/categories, Manrope for body & form controls. */
body.gddt-active,
body.gddt-active input,
body.gddt-active select,
body.gddt-active button,
body.gddt-active .gd88-btn {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}
body.gddt-active h1,
body.gddt-active h2,
body.gddt-active h3,
body.gddt-active .gd88-game-category {
	font-family: 'Big Shoulders Display', 'Manrope', sans-serif;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --- Brand bar (logo + site name), prepended on all 4 pages --- */
.gddt-brand-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 960px;
	margin: 0 auto 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid color-mix(in srgb, var(--gddt-gold) 30%, transparent);
}
.gddt-logo { max-height: 44px; width: auto; }
.gddt-brand-text {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--gddt-gold), var(--gddt-jade));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Recolor the integration plugin's own panels/forms to sit on the void bg --- */
body.gddt-active .gd88-auth-wrap {
	background: var(--gddt-panel) !important;
	border: 1px solid color-mix(in srgb, var(--gddt-gold) 18%, transparent);
}
body.gddt-active .gd88-auth-wrap h2 { color: var(--gddt-gold); }

body.gddt-active .gd88-field input,
body.gddt-active .gd88-field select {
	background: var(--gddt-void) !important;
	border-color: color-mix(in srgb, var(--gddt-gold) 25%, transparent);
	color: var(--gddt-ink);
}

body.gddt-active .gd88-btn-primary {
	background: linear-gradient(135deg, var(--gddt-gold), #f0c878) !important;
	color: var(--gddt-void) !important;
}
body.gddt-active .gd88-btn-secondary {
	background: var(--gddt-panel) !important;
	color: var(--gddt-ink) !important;
	border: 1px solid color-mix(in srgb, var(--gddt-gold) 25%, transparent);
}
body.gddt-active .gd88-btn {
	white-space: nowrap;
	flex: 0 0 auto;
	min-width: max-content;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body.gddt-active .gd88-btn:hover {
	text-decoration: none !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.45);
	filter: brightness(1.05);
}
body.gddt-active .gd88-btn-primary:hover,
body.gddt-active .gd88-btn-play:hover {
	color: var(--gddt-void) !important;
}
body.gddt-active .gd88-btn-secondary:hover {
	color: var(--gddt-ink) !important;
	border-color: var(--gddt-gold);
}

body.gddt-active .gd88-btn-play {
	background: linear-gradient(135deg, var(--gddt-gold), #f0c878) !important;
	color: var(--gddt-void) !important;
}

/* Hide the wallet header's Log Out button specifically (not the "Try for Fun"
   buttons elsewhere on the site, which share the same .gd88-btn-secondary class). */
body.gddt-active .gd88-wallet-actions .gd88-btn-secondary {
	display: none;
}

body.gddt-active .gd88-wallet-actions {
	flex-wrap: wrap;
	align-items: center;
	align-self: center;
}
body.gddt-active .gd88-wallet-actions .gd88-btn {
	white-space: nowrap;
	flex: 0 0 auto;
	min-width: max-content;
}

body.gddt-active .gd88-wallet-header {
	background: var(--gddt-panel) !important;
	border: 1px solid color-mix(in srgb, var(--gddt-gold) 18%, transparent);
	align-items: center !important;
}
body.gddt-active .gd88-acct-id { color: color-mix(in srgb, var(--gddt-ink) 60%, transparent); }
body.gddt-active .gd88-balance {
	color: var(--gddt-gold);
	font-family: 'IBM Plex Mono', monospace;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

body.gddt-active .gd88-panel {
	background: var(--gddt-panel) !important;
	border: 1px solid color-mix(in srgb, var(--gddt-gold) 18%, transparent) !important;
	color: var(--gddt-ink);
}
body.gddt-active .gd88-panel h3 { color: var(--gddt-gold); font-family: 'Big Shoulders Display', sans-serif; }

body.gddt-active .gd88-table th,
body.gddt-active .gd88-table td { border-bottom-color: color-mix(in srgb, var(--gddt-gold) 15%, transparent); }
body.gddt-active .gd88-table td.gddt-amount,
body.gddt-active .gd88-table td:nth-child(2) { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

body.gddt-active .gd88-status-active,
body.gddt-active .gd88-status-completed,
body.gddt-active .gd88-status-success { background: color-mix(in srgb, var(--gddt-jade) 25%, var(--gddt-void)); color: #8fe3c4; }
body.gddt-active .gd88-status-pending,
body.gddt-active .gd88-status-process { background: color-mix(in srgb, var(--gddt-gold) 25%, var(--gddt-void)); color: #f5d68f; }
body.gddt-active .gd88-status-locked,
body.gddt-active .gd88-status-fail,
body.gddt-active .gd88-status-rejected,
body.gddt-active .gd88-status-suspended { background: color-mix(in srgb, var(--gddt-red) 30%, var(--gddt-void)); color: #f1a89c; }

/* --- Game grid --- */
body.gddt-active .gd88-game-card {
	background: var(--gddt-panel) !important;
	border: 1px solid color-mix(in srgb, var(--gddt-gold) 16%, transparent);
	overflow: hidden;
	padding: 0 0 16px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
body.gddt-active .gd88-game-card:hover {
	transform: translateY(-3px);
	border-color: var(--gddt-gold);
}
body.gddt-active .gd88-game-card-name { padding: 0 16px; margin-top: 12px; }
body.gddt-active .gd88-game-card-actions { padding: 0 16px; }

/* Thumbnail injected by lobby-enhance.js - real uploaded image OR generated fallback */
.gddt-thumb-wrap {
	width: 100%;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.gddt-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gddt-thumb-wrap.gddt-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
}
.gddt-thumb-wrap.gddt-fallback::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255,255,255,0.06) 0 6px,
		transparent 6px 14px
	);
	pointer-events: none;
}
.gddt-monogram {
	position: relative;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	font-size: 34px;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Ambient ~very~ subtle ink glow on category headings; respects reduced motion */
body.gddt-active .gd88-game-category {
	color: var(--gddt-gold);
	background: linear-gradient(90deg, var(--gddt-gold), var(--gddt-jade), var(--gddt-gold));
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: gddt-shimmer 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	body.gddt-active .gd88-game-category { animation: none; color: var(--gddt-gold); }
}
@keyframes gddt-shimmer {
	to { background-position: 200% center; }
}

@media (max-width: 600px) {
	.gddt-brand-bar { margin-bottom: 18px; }
	body.gddt-active .gd88-balance { font-size: 22px; }
}

/* --- FPay top-up: preset amount grids (Bonus + Normal) --- */
.gddt-topup-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-bottom: 18px;
}
@media (min-width: 720px) {
	.gddt-topup-wrap { grid-template-columns: 1fr 1fr; }
}

.gddt-topup-panel {
	position: relative;
	border-radius: 10px;
	padding: 16px;
	overflow: hidden;
}
.gddt-topup-panel-bonus {
	background: linear-gradient(160deg, color-mix(in srgb, var(--gddt-gold) 14%, var(--gddt-panel)), var(--gddt-panel));
	border: 1px solid color-mix(in srgb, var(--gddt-gold) 45%, transparent);
}
.gddt-topup-panel-normal {
	background: var(--gddt-panel);
	border: 1px solid color-mix(in srgb, var(--gddt-jade) 30%, transparent);
}
.gddt-topup-panel-disabled { opacity: 0.55; }

.gddt-bonus-ribbon {
	background: linear-gradient(90deg, var(--gddt-red), var(--gddt-gold));
	color: var(--gddt-void);
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	text-align: center;
	padding: 6px 10px;
	margin: -16px -16px 12px;
}
.gddt-bonus-countdown {
	font-family: 'IBM Plex Mono', monospace;
	font-variant-numeric: tabular-nums;
	text-align: center;
	font-size: 20px;
	color: var(--gddt-gold);
	margin-bottom: 10px;
}

.gddt-topup-panel-title {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gddt-ink);
	margin: 0 0 10px;
	font-size: 15px;
}

.gddt-amount-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.gddt-amount-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px 4px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--gddt-gold) 22%, transparent);
	background: color-mix(in srgb, var(--gddt-void) 55%, var(--gddt-panel));
	color: var(--gddt-ink);
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.gddt-topup-panel-disabled .gddt-amount-tile { cursor: not-allowed; }
.gddt-amount-tile:hover:not(:disabled) {
	transform: translateY(-2px);
	border-color: var(--gddt-gold);
}
.gddt-amount-tile.gddt-selected {
	border-color: var(--gddt-gold);
	background: color-mix(in srgb, var(--gddt-gold) 22%, var(--gddt-panel));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--gddt-gold) 50%, transparent);
}
.gddt-amount-tile-amount {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 600;
	font-size: 15px;
}
.gddt-amount-tile-bonus-label {
	font-size: 10px;
	color: var(--gddt-jade);
	font-weight: 700;
}
.gddt-amount-tile-bonus-label.gddt-no-bonus {
	color: color-mix(in srgb, var(--gddt-ink) 45%, transparent);
	font-weight: 500;
}

.gddt-selected-amount-note {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--gddt-gold);
	font-weight: 600;
	margin: 4px 0 14px;
}