/* =========================================================
   NEWDESIGN7 — Ivory / Champagne Gold visual system
   Loaded after style.css so the ND6 structure stays intact.
   ========================================================= */

:root {
	color-scheme: light;
	--nd7-bg: #f4efe4;
	--nd7-bg-soft: #fbf8f1;
	--nd7-paper: #fffdf8;
	--nd7-paper-strong: #ffffff;
	--nd7-ink: #2d2419;
	--nd7-muted: #7d705f;
	--nd7-gold: #c28a2c;
	--nd7-gold-deep: #8a5a12;
	--nd7-gold-light: #f1d58b;
	--nd7-gold-pale: #fff1c8;
	--nd7-line: rgb(167 121 43 / 24%);
	--nd7-line-strong: rgb(167 121 43 / 48%);
	--nd7-shadow: 0 18px 48px rgb(80 55 17 / 10%);
	--theme-bg: var(--nd7-bg);
	--theme-sidebar: var(--nd7-paper);
	--theme-surface: var(--nd7-paper-strong);
	--theme-line: var(--nd7-line);
	--theme-green: var(--nd7-gold);
	--theme-green-hover: #d6a448;
	--theme-green-dark: var(--nd7-gold-deep);
	--app-primary: var(--nd7-gold);
	--app-primary-light: var(--nd7-gold-light);
	--app-secondary: #e4b95f;
	--app-text: var(--nd7-ink);
	--app-muted: var(--nd7-muted);
}

html[data-theme="nd7"],
html[data-theme="nd7"] body {
	background: var(--nd7-bg);
	color: var(--nd7-ink);
}

html[data-theme="nd7"] body.app-page,
html[data-theme="nd7"] body.app-page > main {
	background:
		radial-gradient(circle at 14% -8%, rgb(255 255 255 / 96%) 0, transparent 28%),
		radial-gradient(circle at 88% 4%, rgb(232 193 103 / 18%) 0, transparent 24%),
		linear-gradient(180deg, #fbf8f1 0, #f4efe4 48%, #efe7d8 100%);
	color: var(--nd7-ink);
}

html[data-theme="nd7"] .app-ambient-layer {
	opacity: .46;
	mix-blend-mode: multiply;
}

html[data-theme="nd7"] .app-ambient-orb {
	background: radial-gradient(circle, rgb(234 192 95 / 45%) 0%, rgb(198 139 38 / 13%) 48%, transparent 72%);
}

html[data-theme="nd7"] .app-header {
	background: rgb(255 253 248 / 90%);
	border-color: var(--nd7-line);
	box-shadow: 0 10px 35px rgb(79 51 11 / 7%);
}

html[data-theme="nd7"] .app-logo img,
html[data-theme="nd7"] .app-drawer-logo img {
	filter: drop-shadow(0 5px 10px rgb(166 111 20 / 16%));
}

html[data-theme="nd7"] .app-logo picture {
	display: flex;
	align-items: center;
}

@media (max-width: 680px) {
	html[data-theme="nd7"] .app-logo img {
		width: 52px;
		height: 52px;
		object-fit: contain;
	}
}

@media (max-width: 420px) {
	html[data-theme="nd7"] .app-logo img {
		width: 104px;
	}
}

html[data-theme="nd7"] .app-nav-link {
	color: #76664f;
}

html[data-theme="nd7"] .app-nav-link:hover,
html[data-theme="nd7"] .app-nav-link:focus-visible,
html[data-theme="nd7"] .app-nav-link.is-active {
	color: #704407;
	background: linear-gradient(180deg, transparent, rgb(218 170 69 / 13%));
}

html[data-theme="nd7"] .app-nav-link::after {
	height: 3px;
	background: linear-gradient(90deg, #8a5a12, #f1d58b 50%, #a66d14);
	box-shadow: 0 0 12px rgb(194 138 44 / 36%);
}

html[data-theme="nd7"] .app-nav-separator::before {
	background: var(--nd7-line);
}

html[data-theme="nd7"] .app-nav-icon img,
html[data-theme="nd7"] .right-scroll h2 > img,
html[data-theme="nd7"] #scroll-to-top img,
html[data-theme="nd7"] .mobile-bottom-menu img {
	filter: sepia(1) saturate(1.45) hue-rotate(354deg) brightness(.72);
}

html[data-theme="nd7"] .app-nav-link:hover .app-nav-icon img,
html[data-theme="nd7"] .app-nav-link:focus-visible .app-nav-icon img,
html[data-theme="nd7"] .app-nav-link.is-active .app-nav-icon img {
	filter: sepia(1) saturate(2.1) hue-rotate(352deg) brightness(.62);
}

html[data-theme="nd7"] .app-icon-btn,
html[data-theme="nd7"] .app-mobile-toggle,
html[data-theme="nd7"] .app-drawer-close {
	color: #725a39;
	background: rgb(255 255 255 / 74%);
	border-color: var(--nd7-line);
}

html[data-theme="nd7"] .app-icon-btn:hover,
html[data-theme="nd7"] .app-mobile-toggle:hover,
html[data-theme="nd7"] .app-drawer-close:hover {
	color: var(--nd7-gold-deep);
	background: var(--nd7-gold-pale);
	border-color: var(--nd7-line-strong);
}

html[data-theme="nd7"] .app-lang-dropdown,
html[data-theme="nd7"] .app-user-dropdown {
	color: var(--nd7-ink);
	background: rgb(255 253 248 / 98%);
	border-color: var(--nd7-line-strong);
	box-shadow: var(--nd7-shadow), 0 0 0 1px rgb(255 255 255 / 80%) inset;
}

html[data-theme="nd7"] .app-lang-dropdown button:hover,
html[data-theme="nd7"] .app-user-links a:hover {
	color: #6f4508;
	background: rgb(223 177 78 / 14%);
}

html[data-theme="nd7"] .app-btn-primary,
html[data-theme="nd7"] .shortcut-btn,
html[data-theme="nd7"] button.bg-brand-blue,
html[data-theme="nd7"] button.bg-brand-green {
	color: #fffdf7;
	background: linear-gradient(135deg, #8b5b13 0%, #c88d2d 45%, #e5bd63 100%);
	box-shadow: 0 9px 24px rgb(166 111 20 / 24%), inset 0 1px 0 rgb(255 255 255 / 38%);
}

html[data-theme="nd7"] .app-btn-outline {
	color: #875812;
	border-color: #c79137;
	background: rgb(255 255 255 / 65%);
}

html[data-theme="nd7"] .app-btn-outline:hover {
	color: #fff;
	background: linear-gradient(135deg, #a86f17, #d8a646);
}

html[data-theme="nd7"] [class*="hover:bg-[#84eaf8]"]:hover {
	background-color: #d6a448 !important;
}

html[data-theme="nd7"] .app-balance span { color: var(--nd7-muted); }
html[data-theme="nd7"] .app-balance strong { color: var(--nd7-ink); }
html[data-theme="nd7"] .app-balance small { color: var(--nd7-gold-deep); }

html[data-theme="nd7"] #user-menu-trigger:hover img {
	filter: sepia(1) saturate(2) drop-shadow(0 0 9px rgb(199 142 42 / 45%));
}

html[data-theme="nd7"] .app-user-summary {
	background: linear-gradient(135deg, #fff8e6, #f3dfae);
}

html[data-theme="nd7"] .app-user-kicker,
html[data-theme="nd7"] .app-user-links a i,
html[data-theme="nd7"] .app-logout { color: var(--nd7-gold-deep); }
html[data-theme="nd7"] .app-user-name,
html[data-theme="nd7"] .app-user-summary dd { color: var(--nd7-ink); }
html[data-theme="nd7"] .app-user-summary dt { color: var(--nd7-muted); }
html[data-theme="nd7"] .app-user-summary dl div { background: rgb(255 255 255 / 55%); }
html[data-theme="nd7"] .app-user-links a { color: #625644; }
html[data-theme="nd7"] .app-user-links a b { color: #fff; background: var(--nd7-gold); }
html[data-theme="nd7"] .app-logout { border-color: var(--nd7-line); }

html[data-theme="nd7"] .app-mobile-drawer {
	color: var(--nd7-ink);
	background: linear-gradient(180deg, #fffefb 0%, #f5eddd 100%);
	border-color: var(--nd7-line-strong);
	box-shadow: 20px 0 55px rgb(75 50 12 / 18%);
}

html[data-theme="nd7"] .app-drawer-header,
html[data-theme="nd7"] .app-drawer-footer {
	background: rgb(255 255 255 / 48%);
	border-color: var(--nd7-line);
}

html[data-theme="nd7"] .app-drawer-nav .app-nav-link.is-active {
	color: #fff;
	background: linear-gradient(135deg, #936118, #d6a346);
	border-color: rgb(125 76 7 / 16%);
	box-shadow: 0 9px 22px rgb(166 111 20 / 22%);
}

html[data-theme="nd7"] .app-drawer-nav .app-nav-link.is-active .app-nav-icon img {
	filter: brightness(0) invert(1);
}

html[data-theme="nd7"] .right-scroll {
	scrollbar-color: rgb(181 137 61 / 46%) transparent !important;
}

html[data-theme="nd7"] .right-scroll::-webkit-scrollbar-thumb,
html[data-theme="nd7"] :where([class*="scrollbar-color"])::-webkit-scrollbar-thumb {
	background-color: rgb(181 137 61 / 42%) !important;
}

html[data-theme="nd7"] .app-notice-strip {
	color: #5a4425;
	border-color: var(--nd7-line);
	background: linear-gradient(90deg, #fffdf8 0%, #f8eed7 52%, #fffdf8 100%);
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 4px rgb(132 84 13 / 8%), 0 10px 28px rgb(88 57 13 / 7%);
}

html[data-theme="nd7"] .app-notice-icon {
	color: #9b6818;
	background: linear-gradient(135deg, #fff8e8, #efd399);
	box-shadow: inset -1px 0 0 var(--nd7-line), 9px 0 22px rgb(126 79 10 / 9%);
}

html[data-theme="nd7"] .app-notice-icon i { filter: drop-shadow(0 0 8px rgb(202 143 40 / 30%)); }
html[data-theme="nd7"] .app-notice-message:hover { text-shadow: 0 0 8px rgb(210 153 51 / 40%); }

html[data-theme="nd7"] .app-tone-card,
html[data-theme="nd7"] .right-scroll .bg-white,
html[data-theme="nd7"] .modal-content {
	background: linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(253 248 236 / 98%)) !important;
	border-color: var(--nd7-line) !important;
	box-shadow: var(--nd7-shadow) !important;
}

html[data-theme="nd7"] .app-tone-card--raised,
html[data-theme="nd7"] .app-tone-card--accent {
	background: linear-gradient(135deg, #ffffff 0%, #fff5d9 100%) !important;
}

html[data-theme="nd7"] .app-tone-card--soft,
html[data-theme="nd7"] .app-tone-card--form {
	background: linear-gradient(145deg, #fffefa 0%, #faf3e5 100%) !important;
}

html[data-theme="nd7"] .right-scroll :is(h1, h2, h3) { color: var(--nd7-ink); }
html[data-theme="nd7"] .right-scroll :is(label, p, td, th) { border-color: var(--nd7-line); }

html[data-theme="nd7"] .right-scroll input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="nd7"] .right-scroll select,
html[data-theme="nd7"] .right-scroll textarea {
	color: var(--nd7-ink) !important;
	background: rgb(255 255 255 / 78%) !important;
	border-color: var(--nd7-line-strong) !important;
	box-shadow: inset 0 1px 3px rgb(96 62 11 / 5%);
}

html[data-theme="nd7"] .right-scroll input:focus,
html[data-theme="nd7"] .right-scroll select:focus,
html[data-theme="nd7"] .right-scroll textarea:focus {
	border-color: var(--nd7-gold) !important;
	box-shadow: 0 0 0 3px rgb(202 145 45 / 13%) !important;
}

html[data-theme="nd7"] .app-amount-quick-list > button {
	color: #70480b !important;
	background: linear-gradient(180deg, #fffdf8, #f8e9c4) !important;
	border-color: rgb(185 132 42 / 34%) !important;
}

html[data-theme="nd7"] .app-amount-quick-list > button:hover {
	color: #fff !important;
	background: linear-gradient(135deg, #9f6816, #d5a146) !important;
}

html[data-theme="nd7"] table thead tr { background: #f8edd6 !important; }
html[data-theme="nd7"] table tbody { background: rgb(255 255 255 / 82%); }
html[data-theme="nd7"] table tbody tr:hover { background: #fff9e9 !important; }

html[data-theme="nd7"] .wallet-page-tab { color: #78664b; }
html[data-theme="nd7"] .wallet-page-tab:hover { color: #744807; background: rgb(194 138 44 / 10%); }
html[data-theme="nd7"] .wallet-page-tab.is-active {
	color: #fff;
	background: linear-gradient(135deg, #8b5b13, #d7a64b);
	border-color: rgb(138 90 18 / 20%);
	box-shadow: 0 8px 22px rgb(166 111 20 / 20%);
}

html[data-theme="nd7"] .game-card {
	background: var(--nd7-paper-strong) !important;
	border-color: var(--nd7-line) !important;
	box-shadow: 0 10px 28px rgb(83 57 17 / 7%);
}

html[data-theme="nd7"] .game-card > :first-child::before {
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%), inset 0 -28px 48px rgb(86 54 8 / 14%);
}

html[data-theme="nd7"] .game-card::after {
	background: linear-gradient(135deg, #7d4d0a 0%, #c28627 34%, #fff4bf 48%, #ffffff 50%, #ffe9a1 53%, #d39d3f 66%, #84520d 100%);
	background-size: 260% 260%;
}

html[data-theme="nd7"] .game-card:hover {
	box-shadow: 0 0 0 1px rgb(183 126 31 / 68%), 0 12px 28px rgb(128 81 11 / 16%), 0 0 26px rgb(232 190 96 / 24%);
}

html[data-theme="nd7"] .game-card:hover > :first-child::before {
	box-shadow: inset 0 0 20px 2px rgb(255 225 146 / 48%), inset 0 -35px 58px rgb(72 43 6 / 26%);
}

html[data-theme="nd7"] .app-game-visual { background: #2d1e0b; }
html[data-theme="nd7"] .app-game-gradient {
	background: linear-gradient(180deg, transparent 34%, #99660011 54%, var(--app-game-tone, #740) 100%);
}

html[data-theme="nd7"] .game-card:hover .app-game-object {
	filter: contrast(1) brightness(1) drop-shadow(0 0 10px #fc0);
}

html[data-theme="nd7"] #carousel-container {
	background: transparent;
	border: 0;
	box-shadow: none;
}

html[data-theme="nd7"] .app-hero-visuals::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(90deg, rgb(31 18 4 / 62%) 0%, rgb(39 23 5 / 24%) 42%, transparent 72%), linear-gradient(0deg, rgb(26 14 2 / 34%), transparent 55%);
}

html[data-theme="nd7"] .app-hero-background {
	object-fit: cover;
	filter: saturate(.94) contrast(1.03) brightness(.9);
}

html[data-theme="nd7"] .app-hero-slide .nd7-hero-video {
  z-index: 0;
}

html[data-theme="nd7"] .app-hero-object-wrap {
  z-index: 1;
}

html[data-theme="nd7"] .app-hero-person-wrap {
  z-index: 2;
}



/* ND7 reference artwork is used as a whole visual; ND6 layered objects stay in the source for later reuse. */
html[data-theme="nd7"] .app-hero-object-wrap,
html[data-theme="nd7"] .app-hero-person-wrap { display: block; }

html[data-theme="nd7"] .app-hero-copy > span {
	color: #ffe59b !important;
	text-shadow: 0 2px 12px rgb(35 20 2 / 65%);
}

html[data-theme="nd7"] .app-hero-copy > h3 {
	color: #fffdf6;
	text-shadow: 0 3px 18px rgb(28 15 2 / 68%);
}

html[data-theme="nd7"] .nav-dot.bg-brand-blue,
html[data-theme="nd7"] .nav-dot.bg-brand-green { background: linear-gradient(90deg, #c78d2c, #f3d98d); }

html[data-theme="nd7"] .app-hero-particles { opacity: .38; mix-blend-mode: screen; }
html[data-theme="nd7"] .app-hero-particles.is-boosted { opacity: .92; }

html[data-theme="nd7"] .app-scroll-progress::after {
	background: linear-gradient(90deg, #8c5b12, #d5a143 58%, #fff1b8 100%);
	box-shadow: 0 0 11px rgb(196 139 42 / 58%);
}

html[data-theme="nd7"] #scroll-to-top {
	background: linear-gradient(135deg, #8b5b13cc, #d1a047dd) !important;
	box-shadow: 0 9px 24px rgb(111 69 9 / 24%);
}

/* Floating promotions use the same ivory / champagne-gold surface as ND7 cards. */
html[data-theme="nd7"] .app-floating-banner {
	color: #5f451f;
	filter: drop-shadow(0 12px 22px rgb(126 79 10 / 16%));
}

html[data-theme="nd7"] .app-floating-banner-copy {
	border-color: rgb(194 138 44 / 48%);
	background: linear-gradient(145deg, rgb(255 253 248 / 97%), rgb(250 244 229 / 94%));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 92%), 0 9px 25px rgb(126 79 10 / 13%), 0 0 18px rgb(209 160 71 / 12%);
}

html[data-theme="nd7"] .app-floating-banner-copy small {
	color: #8b5b13;
}

html[data-theme="nd7"] .app-floating-banner:hover img,
html[data-theme="nd7"] .app-floating-banner:focus-visible img {
	filter: saturate(1.05) brightness(1.08) drop-shadow(0 0 18px rgb(232 190 96 / 40%));
}

html[data-theme="nd7"] .app-floating-banner:hover .app-floating-banner-copy {
	border-color: rgb(194 138 44 / 82%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 96%), 0 11px 28px rgb(126 79 10 / 17%), 0 0 28px rgb(232 190 96 / 34%);
}

html[data-theme="nd7"] .app-floating-banner:focus-visible .app-floating-banner-copy {
	border-color: rgb(194 138 44 / 82%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 96%), 0 11px 28px rgb(126 79 10 / 17%), 0 0 28px rgb(232 190 96 / 34%);
}

html[data-theme="nd7"] .app-floating-banner:focus-visible {
	outline-color: #d1a047;
}

/* Replace the Tailwind blue play-button utility styling inside game thumbnails. */
html[data-theme="nd7"] .app-game-hover > div {
	background: linear-gradient(145deg, #f1d58b, #c28627 56%, #8b5b13) !important;
	box-shadow: 0 9px 22px rgb(126 79 10 / 26%), 0 0 19px rgb(232 190 96 / 38%) !important;
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
	display:none;
}

html[data-theme="nd7"] .game-card:hover .app-game-hover > div {
	box-shadow: 0 11px 26px rgb(126 79 10 / 30%), 0 0 27px rgb(232 190 96 / 58%) !important;
	filter: brightness(1.08);
}

/* Page-wide hover isolation: keep the selected card crisp and recede every other thumbnail. */
html[data-theme="nd7"] .game-card > :first-child {
	transition: filter .34s ease, opacity .34s ease;
}

@media (hover: hover) and (pointer: fine) {
	html[data-theme="nd7"] body:has(.game-card:hover) .game-card:not(:hover) > :first-child {
		filter: brightness(.5) sepia(.75);
		opacity: .75;
	}

	html[data-theme="nd7"] .game-card:hover .app-game-hover > div {
		animation: nd7-play-button-pulse .6s ease-in-out infinite;
		transform-origin: center;
		will-change: transform, filter;
	}
}

@keyframes nd7-play-button-pulse {
	0%, 100% {
		transform: scale(1);
		filter: brightness(1.05) drop-shadow(0 0 2px rgb(232 190 96 / 24%));
	}

	50% {
		transform: scale(1.18);
		filter: brightness(1.16) drop-shadow(0 0 9px rgb(232 190 96 / 66%));
	}
}

/* Keep the white arrow crisp, then use only warm-gold interaction feedback. */
html[data-theme="nd7"] #scroll-to-top img {
	filter: brightness(1.35) drop-shadow(0 1px 3px rgb(74 44 7 / 42%));
	opacity: 1;
}

html[data-theme="nd7"] #scroll-to-top.app-scroll-top-btn:hover {
	border-color: rgb(232 190 96 / 88%);
	background: linear-gradient(145deg, #d1a047, #8b5b13) !important;
	box-shadow: 0 14px 34px rgb(75 45 8 / 25%), 0 0 30px rgb(232 190 96 / 48%);
}

html[data-theme="nd7"] #scroll-to-top.app-scroll-top-btn:focus-visible {
	border-color: rgb(232 190 96 / 88%);
	background: linear-gradient(145deg, #d1a047, #8b5b13) !important;
	box-shadow: 0 14px 34px rgb(75 45 8 / 25%), 0 0 30px rgb(232 190 96 / 48%);
	outline: 2px solid #f1d58b;
	outline-offset: 4px;
}

html[data-theme="nd7"] .mobile-bottom-menu {
	color: #6e5c42;
	background: rgb(255 253 248 / 90%) !important;
	border-color: var(--nd7-line) !important;
	box-shadow: 0 -8px 28px rgb(76 49 10 / 9%);
}

html[data-theme="nd7"] .mobile-bottom-menu a:hover,
html[data-theme="nd7"] .mobile-bottom-menu a[aria-current="page"] { color: var(--nd7-gold-deep); }

html[data-theme="nd7"] footer { color: #897a65 !important; border-color: var(--nd7-line) !important; }

/* Video layers shared by hero slides and hover-enabled game cards. */
.nd7-hero-video,
.nd7-hover-video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity .38s ease;
}

.app-hero-slide.is-active .nd7-hero-video.is-playing,
.game-card.is-video-playing .nd7-hover-video { opacity: 1; }

.app-hero-slide .nd7-hero-video { z-index: 1; }
.game-card .nd7-hover-video { z-index: 4; }
.game-card.is-video-playing .game-img,
.game-card.is-video-playing .app-game-layer { opacity: 0; }
.game-card .game-img,
.game-card .app-game-layer { transition: opacity .32s ease, transform .55s cubic-bezier(.16, 1, .3, 1), filter .4s ease; }

@media (max-width: 767px) {
	html[data-theme="nd7"] .right-scroll { background: transparent; }
	html[data-theme="nd7"] table[data-transaction-table] .transaction-row { border-color: var(--nd7-line); }
	html[data-theme="nd7"] table[data-transaction-table] .transaction-amount { color: var(--nd7-ink) !important; }
	html[data-theme="nd7"] table[data-transaction-table] .transaction-sender,
	html[data-theme="nd7"] table[data-transaction-table] .transaction-date { color: var(--nd7-muted) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.nd7-hero-video,
	.nd7-hover-video { display: none !important; }

	html[data-theme="nd7"] .game-card:hover .app-game-hover > div {
		animation: none !important;
		transform: scale(1.08);
	}
}