:root{
	--accent:#f0872b; /* warm orange */
	--accent-deep:#d96b1a;
	--muted:#6b7280;
	--bg:#fbf6f2; /* pale beige */
	--card-bg:#ffffff;
	--nav-text:#3b3f45;
	--nav-active-bg: linear-gradient(90deg,#ff944d,#f07b2a);
	--footer-bg:#152A4A; /* deep navy */
}
*{box-sizing:border-box}
body{font-family: 'Georgia', 'Times New Roman', serif; margin:0;color:#1f2937;background:var(--bg);-webkit-font-smoothing:antialiased}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:#fff;color:var(--nav-text);box-shadow:0 6px 18px rgba(16,24,40,0.06);position:sticky;top:0;z-index:40}
.brand{font-weight:700;font-size:1.15rem;color:#0f172a}
.nav .nav-btn{background:transparent;border:0;color:var(--nav-text);padding:10px 12px;cursor:pointer;border-radius:18px;font-family:inherit;font-weight:600}
.nav .nav-btn.active{background:var(--nav-active-bg);color:#fff;box-shadow:0 6px 18px rgba(240,123,42,0.18)}
.container{max-width:1180px;margin:28px auto;padding:0 22px}
.controls{margin-bottom:22px}
#search{width:100%;padding:14px 18px;border-radius:40px;border:1px solid rgba(20,30,40,0.06);box-shadow:0 10px 30px rgba(16,24,40,0.04);background:#fff;font-family:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card-wrapper{perspective:1200px}
.card{width:100%;height:100%;border-radius:14px}

/* Hero banner (scrolling thumbnails) */
.banner{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;margin-bottom:22px;padding:0}
.banner::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, rgba(240,120,50,0.06), rgba(255,255,255,0.02));backdrop-filter:blur(2px);}
.banner-track{display:flex;gap:0;align-items:center;will-change:transform;filter:contrast(1.02) saturate(1.05)}
.banner-item{flex:0 0 calc(100% / 5)}
.banner-item img{width:100%;height:160px;object-fit:cover;display:block;border-radius:0;box-shadow:none;border:0;opacity:0.96}

/* continuous scroll animation - duplicated track is used for loop */
.banner-track.scrolling{animation:scroll-left 28s linear infinite}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Responsive: fewer items visible on narrow screens */
@media (max-width:800px){
	.banner-item{flex:0 0 calc(100% / 3)}
	.banner-item img{height:120px}
}
@media (max-width:420px){
	.banner-item{flex:0 0 calc(100% / 2)}
	.banner-item img{height:100px}
}

/* Scanner view */
.scanner-panel{display:flex;gap:18px;background:var(--card-bg);padding:14px;border-radius:12px;box-shadow:0 12px 28px rgba(16,24,40,0.06)}

/* Directory full-bleed background (rich visual behind the directory section) */
#directory-view.directory-bg{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;padding:48px 0 64px;background-image:linear-gradient(180deg, rgba(6,10,20,0.36), rgba(6,10,20,0.12)), url('https://thumbs.dreamstime.com/b/ancient-mosaic-marble-india-decorative-53650867.jpg');background-repeat:repeat-x;background-size:auto 240px;background-position:center top;}
#directory-view.directory-bg .container{max-width:1180px;margin:0 auto;padding:0 22px}
#directory-view.directory-bg .controls{display:flex;justify-content:center;margin-bottom:22px}
#directory-view.directory-bg #search{width:82%;max-width:980px;background:rgba(255,255,255,0.98);box-shadow:0 20px 48px rgba(12,16,28,0.34);border:0;padding:16px 20px}
#directory-view.directory-bg .banner{margin-bottom:20px}
#directory-view.directory-bg .grid{max-width:1180px;margin:0 auto;padding:0 22px}

/* Make cards pop on the darkened photo - slight lift */
#directory-view.directory-bg .card-face{box-shadow:0 24px 50px rgba(8,12,20,0.18)}

@media (max-width:1100px){
	#directory-view.directory-bg #search{width:90%;max-width:820px}
}
@media (max-width:900px){
	#directory-view.directory-bg #search{width:94%;max-width:none;padding:12px 14px}
	#directory-view.directory-bg{padding:28px 0}
}
.scanner-left{flex:1;min-width:260px}
.scanner-right{flex:1;min-width:260px}
.scanner-left input[type=file]{width:100%}
.scanner-left #scanner-preview img{max-width:100%;border-radius:8px}
.scanner-right #scanner-results{min-height:120px}

/* 3D flip card structure */
.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.7s cubic-bezier(.2,.9,.2,1)}
.card-wrapper.hover .card-inner{transform:rotateY(180deg)}

.card-face{position:relative;backface-visibility:hidden;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(16,24,40,0.08)}
.card-front{background:var(--card-bg, #fff);color:var(--card-fg,#111);display:flex;flex-direction:column;min-height:340px;border:1px solid rgba(12,18,28,0.02)}
.card-front img{width:100%;height:200px;object-fit:cover}
.card-back{position:absolute;inset:0;transform:rotateY(180deg);background:var(--card-back-bg,#fff);color:var(--card-back-fg,#111);padding:18px;display:flex;flex-direction:column;gap:10px}

/* favorite star on flipped card */
.fav-star{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(0,0,0,0.18);background:rgba(255,255,255,0.98);border-radius:12px;cursor:pointer;transition:all 180ms}
.fav-star:hover{transform:translateY(-3px)}
.fav-star.active{color:var(--accent);background:linear-gradient(180deg, rgba(255,245,238,0.98), rgba(255,236,218,0.98));box-shadow:0 6px 18px rgba(240,123,42,0.12)}

.card-body{padding:18px;flex:1;display:flex;flex-direction:column}
.card h4{margin:0 0 10px;font-size:1.05rem;font-family:inherit;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.4}
.card .meta{margin-top:10px;display:flex;gap:8px;align-items:center}
.card .meta{margin-top:10px;display:flex;gap:8px}

/* theme variations by position - adjust or add more */
.grid > .card-wrapper:nth-child(1) { --card-bg: linear-gradient(135deg,#fff5f0,#fff2e6); --card-fg:#1f2937; --card-back-bg:#fff7ed }
.grid > .card-wrapper:nth-child(2) { --card-bg: linear-gradient(135deg,#e0f2fe,#dbeafe); --card-fg:#022c43; --card-back-bg:#eef2ff }
.grid > .card-wrapper:nth-child(3) { --card-bg: linear-gradient(135deg,#ecfeff,#e6fffa); --card-fg:#064e3b; --card-back-bg:#ecfdf5 }
.grid > .card-wrapper:nth-child(4) { --card-bg: linear-gradient(135deg,#fff7ed,#fff1f2); --card-fg:#4b2545; --card-back-bg:#fff1f2 }
.grid > .card-wrapper:nth-child(5) { --card-bg: linear-gradient(135deg,#eef2ff,#e9d5ff); --card-fg:#3f075f; --card-back-bg:#f8f0ff }
.grid > .card-wrapper:nth-child(6) { --card-bg: linear-gradient(135deg,#fef3c7,#fde68a); --card-fg:#744210; --card-back-bg:#fffbe6 }
.grid > .card-wrapper:nth-child(7) { --card-bg: linear-gradient(135deg,#fff1f2,#ffe4e6); --card-fg:#652d2d; --card-back-bg:#fff6f7 }
.grid > .card-wrapper:nth-child(8) { --card-bg: linear-gradient(135deg,#f0fdf4,#dcfce7); --card-fg:#064e3b; --card-back-bg:#ecfdf5 }
.grid > .card-wrapper:nth-child(9) { --card-bg: linear-gradient(135deg,#fff7ed,#ffedd5); --card-fg:#92400e; --card-back-bg:#fff7ed }
.grid > .card-wrapper:nth-child(10) { --card-bg: linear-gradient(135deg,#eef2ff,#f0f9ff); --card-fg:#0f172a; --card-back-bg:#eef2ff }
.grid > .card-wrapper:nth-child(11) { --card-bg: linear-gradient(135deg,#fef3c7,#fff7ed); --card-fg:#6b3e00; --card-back-bg:#fffbe6 }
.grid > .card-wrapper:nth-child(12) { --card-bg: linear-gradient(135deg,#f5f3ff,#eef2ff); --card-fg:#2b075f; --card-back-bg:#f8f0ff }

/* responsive adjustments */
@media (max-width:600px){ .card-front img{height:140px} .card-wrapper{height:auto} }
.btn{background:var(--accent);color:#fff;border:0;padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:700;box-shadow:0 10px 20px rgba(240,123,42,0.12)}
.btn.secondary{background:transparent;color:var(--nav-text);border:1px solid rgba(20,24,30,0.06);border-radius:10px;padding:8px 12px}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(12,16,24,0.45);padding:18px}
.modal.hidden{display:none}
.modal-content{background:#fff;border-radius:10px;max-width:900px;width:100%;max-height:90vh;overflow:auto;position:relative;padding:18px}
.close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:22px;cursor:pointer}
.profile-top{display:flex;gap:18px}
.profile-top img{width:320px;height:220px;object-fit:cover;border-radius:10px}
.exhibits{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:12px}
.exhibit{background:#fafafa;padding:8px;border-radius:8px}
.exhibit img{width:100%;height:90px;object-fit:cover;border-radius:6px}
.dashboard{display:flex;gap:16px}
.dash-column{flex:1;background:var(--card-bg);Padding:14px;border-radius:12px;box-shadow:0 12px 28px rgba(16,24,40,0.06)}
.dash-list{list-style:none;padding:0;margin:0}
.dash-list li{display:flex;justify-content:space-between;padding:8px 6px;border-bottom:1px dashed #eef3fb}
.dash-list li:last-child{border-bottom:0}
.site-footer{text-align:left;padding:36px;color:#cbd5e1;font-size:0.95rem;background:var(--footer-bg);margin-top:36px;border-top-left-radius:12px;border-top-right-radius:12px}
.site-footer a{color:rgba(255,255,255,0.9)}
.site-footer .brand{color:#fff}
.hidden{display:none}
@media (max-width:800px){.profile-top{flex-direction:column}.profile-top img{width:100%}}

/* Rectangle overlay used instead of browser prompt/alert */
.rect-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:1200}
.rect-overlay.hidden{display:none}
.rect-box{width:min(720px,92%);background:var(--card-bg);padding:18px;border-radius:12px;box-shadow:0 18px 40px rgba(16,24,40,0.08);border:1px solid rgba(12,18,28,0.04)}
.rect-box h3{margin:0 0 8px 0;font-size:1.15rem}
.rect-msg{margin-bottom:12px;color:var(--nav-text)}
.rect-input{display:block;width:100%;padding:12px;border-radius:10px;border:1px solid rgba(12,18,28,0.06);margin-bottom:8px}
.rect-actions{display:flex;justify-content:flex-end;gap:8px}
.rect-actions .btn{min-width:88px}

/* Improved profile layout */
.profile-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.profile-left img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.profile-right h2{margin:0 0 6px}
.profile-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.badge{background:rgba(0,0,0,0.06);padding:6px 8px;border-radius:6px;font-size:0.85rem}
.profile-section{background:#fff;padding:12px;border-radius:8px;box-shadow:0 6px 14px rgba(12,20,30,0.04);margin-top:12px}

/* Badges view */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.badge-card{background:var(--card-bg);padding:12px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 28px rgba(16,24,40,0.06)}
.badge-card img{width:92px;height:92px;object-fit:contain;border-radius:8px}
.badge-card .title{margin-top:8px;font-weight:700;text-align:center}
.badge-card.locked{opacity:0.45;filter:grayscale(0.7)}
.badge-card .lock-overlay{position:absolute;inset:8px;border-radius:8px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font-weight:700;color:rgba(0,0,0,0.5)}

/* Badge unlock animation: floating badge that scales and fades */
.badge-unlock-anim{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(0.3);z-index:1400;pointer-events:none;transition:transform 700ms cubic-bezier(.2,.9,.2,1),opacity 900ms;opacity:1}
.badge-unlock-anim.hide{opacity:0;transform:translate(-50%,-50%) scale(1.6)}

/* Collection modal tweaks to make cards match directory */
#collection-title{margin:0;padding:0 2px 8px 0}
#collection-grid .card-front img{height:140px}
#collection-grid .card-body{padding:10px}
#collection-grid .card-front{min-height:220px}
#collection-grid .card-wrapper{height:100%}

@media (max-width:900px){.profile-grid{grid-template-columns:1fr;grid-auto-rows:auto}}

/* Auth & scanner styles */
.auth-actions{display:flex;align-items:center;gap:8px}
.auth-actions .nav-btn{padding:6px 8px}
.auth-actions #btn-login{background:linear-gradient(90deg,var(--accent),var(--accent-deep));color:#fff;padding:8px 12px;border-radius:14px;border:0;box-shadow:0 8px 20px rgba(240,123,42,0.18);font-weight:700}
.auth-actions #btn-login:hover{transform:translateY(-2px)}
/* Logout, reset and delete account buttons styling */
.auth-actions #btn-logout{background:transparent;color:var(--nav-text);border:1px solid rgba(20,24,30,0.06);padding:8px 10px;border-radius:10px}
.auth-actions #btn-reset-journey{background:transparent;color:var(--nav-text);border:1px solid rgba(20,24,30,0.06);padding:8px 10px;border-radius:10px}
.auth-actions #btn-delete-account{background:transparent;color:#7f1d1d;border:1px solid rgba(127,29,29,0.12);padding:8px 10px;border-radius:10px}
.auth-actions #btn-delete-account:hover{background:rgba(127,29,29,0.04)}
.star{font-size:22px;color:#ddd;cursor:pointer;margin-right:6px}
.star.selected{color:#ffb020}
#scan-result img{max-width:140px;border-radius:6px;margin-right:8px}
#scanner-video{border-radius:6px}