/* Global theme */
:root{
	--gold-hex: #d4af37; /* classic gold */
	--gold-alpha-60: rgba(212,175,55,.60);
	--gold-alpha-45: rgba(212,175,55,.45);
	--gold-alpha-35: rgba(212,175,55,.35);
	--gold-alpha-25: rgba(212,175,55,.25);
	/* Make Bootstrap utilities that use --bs-border-color take gold */
	--bs-border-color: var(--gold-alpha-45);
}

body{background:#0b0d10;color:#e6e9ef}
.navbar{background:#0a0c0f!important}
.card{background:#12151a;color:#e6e9ef;border-color:var(--gold-alpha-45)}
.form-control,.form-select{background:#0f1216;border-color:var(--gold-alpha-45);color:#e6e9ef}
.form-control:focus,.form-select:focus{border-color:var(--gold-hex); box-shadow:0 0 0 .2rem var(--gold-alpha-25); outline:0}
.btn-primary{background:#7353e5;border-color:#7353e5}
.btn-outline-secondary{border-color:var(--gold-alpha-45);color:#e6e9ef}
.btn-outline-secondary:hover{border-color:var(--gold-hex);}
.btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:focus-visible{
	border-color: var(--gold-hex);
	box-shadow:0 0 0 .2rem var(--gold-alpha-25);
	outline:0;
}
footer{color:#ffffff}
img{background:#0f1216}
/* Ensure article content images are responsive and contained */
.article-body img{display:block;max-width:100%;height:auto;border-radius:.5rem;margin:.5rem auto;background:#000}
.article-body figure{margin:0;}
.article-body iframe{max-width:100%}
/* Clickable helper */
.clickable{cursor:pointer}
/* Modal card image */
.modal-card-img{object-fit:contain;max-height:70vh;background:#000;border-color:var(--gold-alpha-45)!important}

/* Card modal enhancements */
.dl-compact dt{margin-bottom:.25rem}
.dl-compact dd{margin-bottom:.25rem}
.details-panel{background:linear-gradient(180deg,#0f1216,#0d1117);border:1px solid var(--gold-alpha-45);border-radius:.75rem;padding:.75rem}
.section-title{font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.section-title-wrap{border-bottom:1px solid var(--gold-alpha-35)}
.card-desc{color:#d8dbe2;line-height:1.6}
.dl-compact{margin-top:.25rem}
.dl-compact > dt,.dl-compact > dd{padding-top:.35rem}
.dl-compact > dt{color:#fff;opacity:.9;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.dl-compact > dd{color:#e6e9ef}
.dl-compact > dt+dd{border-top:1px solid rgba(255,255,255,0.06)}
.dl-compact > dt:not(:first-of-type){border-top:1px solid rgba(255,255,255,0.06)}
.stat-chips .stat-chip{
	width:50px;height:50px;border-radius:50%;
	background:#0f1216;border:1px solid var(--gold-alpha-35);color:#fff;
	display:flex;align-items:center;justify-content:center; font-weight:800;
	box-shadow: inset 0 0 18px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
}
.stat-chips .stat-chip.might{border-color:#3f6b3f;background:#102015}
.stat-chips .stat-chip.cost{border-color:#6b4f3f;background:#1f1610}
.badge-soft{background:rgba(115,83,229,.15); color:#c8bcff; border:1px solid rgba(115,83,229,.35)}
.badge-soft-green{background:rgba(56,142,60,.18); color:#b9e4be; border:1px solid rgba(56,142,60,.35)}
.badge-soft-blue{background:rgba(100,181,246,.18); color:#cfe9ff; border:1px solid rgba(100,181,246,.35)}
.badge-soft-gray{background:rgba(170,178,189,.15); color:#e6e9ef; border:1px solid rgba(170,178,189,.3)}

/* Landing */
.hero{min-height:420px;background:#0f1216 url('../img/hero-banner.php') center/cover no-repeat}
.hero-overlay{backdrop-filter:saturate(110%)}
.hero .hero-inner{position:relative;z-index:2}
.hero .hero-carousel{z-index:1;filter:saturate(105%)}
.object-fit-cover{object-fit:cover}
.feature.card{border-color:var(--gold-alpha-45);background:#141820}
.feature .h5{color:#e6e9ef}
.feature p{color:#ffffff!important}
.feature.card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.feature.card:hover{transform:translateY(-2px);border-color:var(--gold-hex);box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* New enhanced hero (opt-in) */
.hero-lux{position:relative;min-height:480px;display:flex;align-items:center;isolation:isolate;
	background:
		radial-gradient(circle at 35% 40%, rgba(115,83,229,.35) 0%, rgba(115,83,229,.15) 18%, rgba(115,83,229,0) 42%),
		radial-gradient(circle at 70% 60%, rgba(212,175,55,.35) 0%, rgba(212,175,55,.12) 22%, rgba(212,175,55,0) 48%),
		linear-gradient(135deg,#12161d 0%,#0c0f13 55%,#090b0e 100%);
	border:1px solid var(--gold-alpha-45);
	box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 4px 28px rgba(0,0,0,.55);
	overflow:hidden;
}
.hero-lux::before{content:"";position:absolute;inset:0;pointer-events:none;
	background:
		repeating-linear-gradient(105deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 17px),
		repeating-linear-gradient(15deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 21px);
	mix-blend-mode:overlay;opacity:.55;
	animation: heroGridShift 32s linear infinite;
}
.hero-lux::after{content:"";position:absolute;inset:0;background:
	radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.85) 100%);
	pointer-events:none;
}
@keyframes heroGridShift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-320px,-220px,0)}}
.hero-stars{position:absolute;inset:0;z-index:1;filter:brightness(1.3) contrast(1.15);opacity:.85}
.hero-inner{position:relative;z-index:2}
.hero-lux .hero-inner{padding-top:4.5rem;padding-bottom:4.5rem}
@media (max-width: 767px){.hero-lux{min-height:520px}.hero-lux .hero-inner{padding-top:3.75rem;padding-bottom:3.75rem}}

.hero-tagline{font-size:1.15rem;line-height:1.5;color:#d8dbe2;font-weight:500;max-width:640px;text-shadow:0 2px 12px rgba(0,0,0,.65)}
.hero-actions .btn{position:relative;overflow:hidden}
.hero-actions .btn-primary{box-shadow:0 4px 18px -4px rgba(115,83,229,.55), 0 2px 4px rgba(0,0,0,.55)}
.hero-actions .btn-outline-secondary{background:rgba(0,0,0,.35);backdrop-filter:saturate(130%)}
.hero-actions .btn:hover{transform:translateY(-2px);transition:transform .25s ease}
.hero-actions .btn:active{transform:translateY(0)}

/* Decorative hero art (logo with glow) */
.hero-art{position:relative;max-width:460px;margin-left:auto}
.hero-art .art-wrap{position:relative;padding:2.25rem;border:1px solid var(--gold-alpha-45);border-radius:1.25rem;background:linear-gradient(140deg,rgba(115,83,229,.12),rgba(0,0,0,.55));
	backdrop-filter:saturate(140%) brightness(1.05);box-shadow:0 0 0 1px rgba(115,83,229,.35),0 18px 42px -12px rgba(0,0,0,.6),0 4px 18px -6px rgba(115,83,229,.55);
}
.hero-art .art-wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;
	background:
		radial-gradient(circle at 65% 35%, rgba(115,83,229,.55) 0%, rgba(115,83,229,.08) 38%, rgba(115,83,229,0) 68%),
		radial-gradient(circle at 35% 65%, rgba(212,175,55,.55) 0%, rgba(212,175,55,.08) 40%, rgba(212,175,55,0) 72%);
	mix-blend-mode:screen;opacity:.75;pointer-events:none;
	animation: heroGlowPulse 9.5s ease-in-out infinite;
}
@keyframes heroGlowPulse{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.15)}}
.hero-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 28px rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(115,83,229,.55));
	animation: heroLogoFloat 8.5s ease-in-out infinite;
}
@keyframes heroLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Optional subtle divider accent below hero */
.hero-divider{height:2px;background:linear-gradient(90deg,rgba(115,83,229,0) 0%,rgba(115,83,229,.55) 12%,rgba(212,175,55,.6) 50%,rgba(115,83,229,.55) 88%,rgba(115,83,229,0) 100%);border-radius:999px;opacity:.85;margin-top:-2px}

/* Card slider replacing hero image */
.hero-card-slider{position:relative}
.hero-card-slider .slider-viewport{position:relative;overflow:hidden;border:none;border-radius:1.25rem;background:transparent;backdrop-filter:none;min-height:340px;display:flex;align-items:center;justify-content:center}
.hero-card-slider .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.92);transition:opacity .8s ease, transform .8s ease}
.hero-card-slider .slide.active{opacity:1;transform:scale(1)}
.hero-card-slider .slide img{width:auto;max-width:90%;max-height:calc(100% - 56px);height:auto;display:block;filter:drop-shadow(0 12px 28px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(115,83,229,.35));border-radius:.5rem;border:1px solid rgba(255,255,255,.08);background:#000}
.hero-card-slider .slide .card-id{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.45);padding:.35rem .65rem;border:1px solid rgba(255,255,255,.12);border-radius:.5rem;font-size:.75rem;color:#fff;font-weight:600;letter-spacing:.05em}
.hero-card-slider .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:5}
.hero-card-slider .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.25);cursor:pointer;transition:background .3s ease, transform .3s ease}
.hero-card-slider .dot.active{background:#7353e5;transform:scale(1.25);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 14px rgba(115,83,229,.55)}
@media (max-width: 767px){
	.hero-card-slider .slide img{width:82%;max-width:260px}
	.hero-card-slider .slider-viewport{min-height:300px}
}

/* Navbar brand logo */
.navbar-brand #brandLogo{height:32px;width:auto;display:block}
@media (min-width: 992px){
	.navbar-brand #brandLogo{height:36px}
}

/* Scan overlay (camera watermark & frame) */
.scan-cam-wrap{position:relative}
.scan-cam-wrap video{display:block}
.scan-overlay{position:absolute;inset:0;}
.scan-overlay .frame{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:min(80%, 90vmin);
	aspect-ratio: 2.5 / 3.5; /* typical TCG card ratio */
	/* Dashed card-shaped rectangle */
	border:3px dashed rgba(255,255,255,0.8);
	border-radius:10px;
	/* No dimming outside the frame */
	box-shadow:none;
}

/* Scanning animation: golden glow and moving dot along the border */
.scan-overlay .frame.scanning{
	border-color: rgba(212, 175, 55, 0.95);
	box-shadow: 0 0 12px rgba(212, 175, 55, 0.35), inset 0 0 10px rgba(212, 175, 55, 0.22);
	animation: scanPulse 1.1s ease-in-out infinite;
}
.scan-overlay .frame.scanning::before{
	content:"";
	position:absolute;
	width:10px;height:10px;border-radius:50%;
	background: radial-gradient(circle at 50% 50%, #ffd700 40%, #ffb400 70%, rgba(255, 184, 0, 0) 75%);
	filter: drop-shadow(0 0 8px #ffd700);
	/* Move along the inner perimeter */
	animation: scanDot 2.4s linear infinite;
}
@keyframes scanPulse{
	0%,100%{ box-shadow: 0 0 10px rgba(212, 175, 55, 0.28), inset 0 0 8px rgba(212, 175, 55, 0.18); }
	50%{ box-shadow: 0 0 16px rgba(212, 175, 55, 0.48), inset 0 0 12px rgba(212, 175, 55, 0.32); }
}
@keyframes scanDot{
	0%{ left:4px; top:4px; }
	25%{ left: calc(100% - 14px); top:4px; }
	50%{ left: calc(100% - 14px); top: calc(100% - 14px); }
	75%{ left:4px; top: calc(100% - 14px); }
	100%{ left:4px; top:4px; }
}

/* Mini rectangle (ID area hint) at bottom-left inside the frame */
.scan-overlay .frame::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:22%;
	height:6%;
	border:2px dashed rgba(255,255,255,0.85);
	border-radius:6px;
	box-sizing:border-box;
	pointer-events:none;
}
.scan-overlay .wm{
	position:absolute;color:#ffffff;opacity:.18;font-weight:700;
	text-transform:uppercase;letter-spacing:.2em;pointer-events:none;
	font-size: clamp(10px, 2.2vw, 16px);
}
.scan-overlay .wm-top{top:6px;left:0;right:0;text-align:center}
.scan-overlay .wm-bottom{bottom:6px;left:0;right:0;text-align:center}
.scan-overlay .wm-left{left:6px;top:0;bottom:0;writing-mode:vertical-rl;text-orientation:upright}
.scan-overlay .wm-right{right:6px;top:0;bottom:0;writing-mode:vertical-rl;text-orientation:upright}

/* OCR result badge overlay */
.scan-ocr-badge{
	position:absolute;
	left:6%;
	bottom:8%;
	background: rgba(0,0,0,0.6);
	border:1px solid var(--gold-alpha-45);
	border-radius:.5rem;
	padding:.35rem .5rem;
	color:#fff;
	display:flex;
	gap:.35rem;
	align-items:center;
	backdrop-filter: saturate(110%);
}
.scan-ocr-badge .label{opacity:.8; font-size:.85rem}
.scan-ocr-chip{
	background:#7353e5;
	color:#fff;
	border:1px solid rgba(255,255,255,.25);
	border-radius:.35rem;
	padding:.15rem .45rem;
	font-size:.85rem;
	cursor:pointer;
}
.scan-ocr-chip:hover{ filter: brightness(1.1); }

/* Owned card highlight (gold + subtle shine) */
.owned-body{
	position: relative;
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(255, 215, 0, 0.06));
	border: 1px solid rgba(212, 175, 55, 0.55) !important;
	box-shadow: inset 0 0 18px rgba(212, 175, 55, 0.25), 0 0 10px rgba(212, 175, 55, 0.15);
	color: #fff3c2;
}
.owned-shine{position:relative;overflow:hidden}
.owned-shine::after{
	content:""; position:absolute; top:-120%; left:-150%; width:60%; height:340%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
	transform: rotate(18deg);
	animation: ownedShineMove 3.8s linear infinite;
	animation-play-state: paused;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease-in-out;
}
.card:hover .owned-shine::after{
	opacity: 1;
	animation-play-state: running;
}

/* Corner trash button on collection cards */
.corner-trash{
	position:absolute; top:6px; right:6px; z-index:3;
	background: rgba(0,0,0,0.6); color:#ffd166;
	border:1px solid rgba(255, 209, 102, 0.5);
	border-radius: 6px;
	padding: 4px 6px; line-height:1; cursor:pointer;
	transition: transform .12s ease-out, background .12s ease-out;
}
.corner-trash:hover{ transform: scale(1.05); background: rgba(0,0,0,0.75); }
.corner-trash svg{ display:block; width:16px; height:16px; }
@keyframes ownedShineMove{
	0% { left: -160%; }
	60% { left: 140%; }
	100% { left: 140%; }
}

/* New card tile styling inspired by mockup */
.card-tile{background:#12151a;border-color:#1a1f27}
.card-tile .card-img-wrapper{position:relative;overflow:hidden;border-top-left-radius:.5rem;border-top-right-radius:.5rem;background:#000}
.card-tile .card-img-wrapper img{display:block;width:100%;height:auto}
/* (Legacy) overlay kept for reference but not used now */
.card-tile .icon-overlay{position:absolute; top:6px; left:6px; display:flex; gap:6px; z-index:2}
.card-tile .icon-pill{width:26px; height:26px; border-radius:999px; background: rgba(0,0,0,0.55); border:1px solid var(--gold-alpha-35); display:inline-flex; align-items:center; justify-content:center; box-shadow: 0 2px 6px rgba(0,0,0,.4)}
.card-tile .icon-pill img{width:18px; height:18px; object-fit:contain; filter: drop-shadow(0 0 2px rgba(0,0,0,.3))}
.card-tile .top-icon-row{display:flex; gap:6px; padding:6px 6px 0 6px}
.card-footer-bar{
	margin-top:.5rem; background:#0f1216; border:1px solid var(--gold-alpha-45); color:#e6e9ef;
	border-radius:.75rem; padding:.4rem .6rem; display:flex; align-items:center; justify-content:space-between;
	flex-wrap: wrap; gap:.4rem;
}
.card-id-badge{font-weight:600;color:#ffffff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qty-ctrl{display:flex;align-items:center; gap:.3rem}
/* Make the number input compact and avoid layout overflow */
.qty-ctrl input{width:48px; max-width:56px; text-align:center; background:#0f1216; color:#e6e9ef; border:1px solid var(--gold-alpha-45); border-radius:.375rem; padding:.2rem .3rem}
.qty-ctrl .btn{padding:.2rem .45rem}
/* Hide number input spinners to save horizontal space */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
input[type=number]{ appearance: textfield; -moz-appearance:textfield; }
/* When wrapping occurs, ensure controls align nicely */
.card-footer-bar .qty-ctrl{ margin-left:auto; }
@media (max-width: 576px){
	.card-footer-bar{ padding:.35rem .5rem; gap:.35rem; }
	.qty-ctrl input{ width:42px; }
	.card-footer-bar .qty-ctrl{ margin-left:0; width:100%; justify-content:space-between; }
}

/* Generic borders (liserai) */
.border,.border-top,.border-end,.border-bottom,.border-start{border-color:var(--gold-alpha-45)!important}
.modal-content{border-color:var(--gold-alpha-45)}
.dropdown-menu{
	/* Dark theme dropdown matching inputs/buttons */
	--bs-dropdown-bg: #0f1216;
	--bs-dropdown-link-color: #e6e9ef;
	--bs-dropdown-link-hover-color: #ffffff;
	--bs-dropdown-link-hover-bg: rgba(212,175,55,.12);
	--bs-dropdown-link-active-bg: rgba(212,175,55,.25);
	--bs-dropdown-border-color: var(--gold-alpha-45);

	background:#0f1216;
	color:#e6e9ef;
	border-color:var(--gold-alpha-45);
	border-radius:.75rem;
	padding:.35rem;
	min-width:220px;
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.dropdown-item{color:#e6e9ef; border-radius:.5rem; padding:.5rem .75rem}
.dropdown-item:hover,.dropdown-item:focus{color:#fff; background: rgba(212,175,55,.12)}
.dropdown-item.active,.dropdown-item:active{background: rgba(212,175,55,.25); color:#fff}
.dropdown-divider{border-top-color: var(--gold-alpha-25)}

/* Optional: subtle offset below navbar */
.navbar .dropdown-menu{ margin-top:.4rem; }
.table,.table>:not(caption)>*>*{border-color:var(--gold-alpha-35)}

/* Placeholder color to white across inputs */
::placeholder{ color:#ffffff; opacity:0.75; }
input::placeholder{ color:#ffffff; opacity:0.75; }
textarea::placeholder{ color:#ffffff; opacity:0.75; }
.form-control::placeholder{ color:#ffffff; opacity:0.75; }
/* Vendor prefixed for broader support */
::-webkit-input-placeholder{ color:#ffffff; opacity:0.75; }
:-ms-input-placeholder{ color:#ffffff; opacity:1; }
::-ms-input-placeholder{ color:#ffffff; opacity:1; }
::-moz-placeholder{ color:#ffffff; opacity:0.75; }

/* Force muted text to white */
.text-muted{ color:#ffffff !important; }
/* Uniformiser les autres nuances Bootstrap vers blanc pour cohérence thème sombre */
.text-secondary,
.text-body-secondary,
.text-light,
.text-body,
.link-secondary:focus,
.link-secondary:hover{ color:#ffffff !important; }
/* Option: petits textes (classe .small utilisée dans les layouts) légèrement atténués sans gris froid */
.small, small{ color: rgba(255,255,255,0.88); }

/* Iconography for color/type */
.icon{display:inline-block; vertical-align:middle;}
.icon-sm{width:18px; height:18px; object-fit:contain; filter: drop-shadow(0 0 2px rgba(0,0,0,.3));}
.icon-md{width:22px; height:22px; object-fit:contain; filter: drop-shadow(0 0 2px rgba(0,0,0,.3));}
.icon-row{display:flex; align-items:center; gap:.35rem;}
.icon-badge{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid var(--gold-alpha-35);}
.icon-badge .label{font-size:.8rem; color:#e6e9ef}

/* Adjust footer to fit icons + id */
.card-footer-bar .card-id-badge{display:flex; align-items:center; gap:.4rem}

/* Utility: 5 columns on lg and up (Bootstrap 5ths) */
@media (min-width: 992px){
	.col-lg-5ths{ flex: 0 0 20%; max-width: 20%; }
}

/* Active navigation highlight (doré souligné) */
.navbar .nav-link.active, .navbar .nav-link.nav-active-gold {
	color: var(--gold-hex) !important;
	text-decoration: underline;
	text-decoration-color: var(--gold-hex);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
/* Dropdown items inside Guide etc */
.navbar .dropdown-item.active {
	color: var(--gold-hex) !important;
	background: transparent; /* remove background for cleaner underline */
	text-decoration: underline;
	text-decoration-color: var(--gold-hex);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
/* Download app button style in navbar */
.navbar .nav-download-btn {
	position: relative;
	background: linear-gradient(135deg,#12151a,#0d1116);
	border:1px solid var(--gold-alpha-45);
	border-radius:.65rem;
	padding:.55rem 1rem!important;
	margin:.25rem .35rem;
	font-weight:600;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 4px 14px -4px rgba(0,0,0,.6);
	transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.navbar .nav-download-btn:hover {
	background: linear-gradient(135deg,#171d24,#12161d);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px -4px rgba(0,0,0,.65);
	transform: translateY(-2px);
	color:#fff;
}
.navbar .nav-download-btn:active {
	transform: translateY(0);
}
.navbar .nav-download-btn::after {
	content:""; position:absolute; inset:0; pointer-events:none; border-radius:.65rem;
	background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.35) 0%, rgba(212,175,55,0) 60%), radial-gradient(circle at 70% 70%, rgba(115,83,229,.35) 0%, rgba(115,83,229,0) 55%);
	mix-blend-mode: overlay; opacity:.55;
}
.navbar .nav-download-btn.active {
	color:#fff !important; text-decoration:none; border-color: var(--gold-hex); box-shadow:0 0 0 2px rgba(212,175,55,.35), 0 4px 18px -4px rgba(212,175,55,.55);
}

/* Environment-based visibility helpers */
.only-in-app{ display:none !important; }
.only-in-webview{ display:none !important; }
/* By default we assume browser; hide app-only blocks and webview-only blocks. */
.env-pwa-installed .only-in-app{ display:block !important; }
.env-android-webview .only-in-webview{ display:block !important; }
/* In app (PWA installed or WebView), hide browser-only things */
.env-pwa-installed .only-in-browser{ display:none !important; }
.env-android-webview .only-in-browser{ display:none !important; }

/* --- Virtual Museum (3D shelves) --- */
.museum-stage{perspective:1400px;perspective-origin:50% 20%;min-height:60vh;padding-top:1.5rem;position:relative;overflow-x:hidden;z-index:1}
.museum-camera{transform-style:preserve-3d;transition:transform .9s ease;position:relative}
.museum-shelf{position:relative;transform-style:preserve-3d;display:flex;gap:1.25rem;justify-content:flex-start;align-items:flex-end;padding:1.25rem 2rem;margin:0 auto 3.5rem auto;min-height:160px;max-width:1400px;box-sizing:border-box}
.museum-shelf::before{content:"";position:absolute;inset:0 0 0 0;background:linear-gradient(180deg,#181d26,#101418);border:1px solid var(--gold-alpha-45);border-radius:1.1rem;box-shadow:0 18px 48px -12px rgba(0,0,0,.65),inset 0 0 42px -8px rgba(212,175,55,.25);transform:translateZ(-60px);}
.museum-shelf::after{content:"";position:absolute;left:0;right:0;bottom:-32px;height:32px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));filter:blur(2px);pointer-events:none;}
.museum-card{width:110px;flex:0 0 auto;position:relative;transform-style:preserve-3d;transition:transform .5s ease, filter .5s ease;cursor:pointer}
.museum-card img{display:block;width:100%;height:auto;border-radius:.65rem;border:1px solid rgba(255,255,255,.12);background:#000;filter:drop-shadow(0 10px 18px rgba(0,0,0,.65))}
.museum-card .info-badge{position:absolute;left:4px;top:4px;font-size:.55rem;padding:.15rem .35rem;border-radius:.35rem;background:rgba(0,0,0,.55);border:1px solid var(--gold-alpha-35);color:#fff;font-weight:600;letter-spacing:.05em}
.museum-card.epic img,.museum-card.legendary img,.museum-card.overnumbered img{border-color:var(--gold-hex);box-shadow:0 0 0 1px rgba(212,175,55,.55),0 0 22px -2px rgba(212,175,55,.55),0 10px 22px -6px rgba(0,0,0,.65)}
.museum-card.epic{transform:translateZ(30px) scale(1.1)}
.museum-card.legendary{transform:translateZ(40px) scale(1.18)}
.museum-card.overnumbered{transform:translateZ(55px) scale(1.26)}
.museum-shelf[data-rarity="overnumbered"]{gap:2rem}
.museum-card.overnumbered{margin-inline:.35rem}
.museum-card:hover{filter:brightness(1.15)}
.museum-card:hover img{filter:drop-shadow(0 14px 28px rgba(0,0,0,.75))}
.museum-rarity-title{position:absolute;left:1.25rem;top:-1.75rem;font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:.35rem .65rem;border:1px solid var(--gold-alpha-35);border-radius:.5rem}
.museum-empty{font-size:1.1rem;color:#ffffff;opacity:.8;margin-top:2rem}
.museum-controls{background:linear-gradient(180deg,#0b0d10,#0b0d10e6);backdrop-filter:saturate(140%);padding:.75rem 1rem;border:1px solid var(--gold-alpha-45);border-radius:.75rem;margin-bottom:1rem;position:relative;z-index:100}
.museum-controls .dropdown-menu{z-index:3000}
.museum-controls .row{align-items:center}
.museum-controls .form-select,.museum-controls .form-control{background:#12151a}
.museum-legend{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.7rem}
.museum-legend .leg-item{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .5rem;border:1px solid var(--gold-alpha-35);border-radius:.5rem;background:#12151a;color:#fff;letter-spacing:.05em}
@media (max-width: 768px){
	.museum-card{width:82px}
	.museum-shelf{gap:.85rem;padding:.9rem 1.1rem;min-height:120px;margin-bottom:2.75rem}
	.museum-rarity-title{font-size:.75rem;top:-1.25rem}
}
@keyframes museumIntroShelf{0%{opacity:0;transform:translateY(24px) scale(.95)}60%{opacity:1}100%{transform:translateY(0) scale(1)}}
.museum-shelf{animation:museumIntroShelf .85s ease both}