/*
=======================================================================
EASY-EDIT GRADIENT COLORS
- Change the 5 hex codes below to customize the animated background.
=======================================================================
*/
:root {
  --gradient-color-1: #eeceaa; /* Magenta */
  --gradient-color-2: #ccab5f; /* Cyan */
  --gradient-color-3: #cbc3b0; /* Lime Green */
  --gradient-color-4: #a07e57; /* Dark Orange */
  --gradient-color-5: #d6a66e; /* Blue Violet */

  /* Original Theme Colors */
  --qr-size:       256px;
  --gold:          #b49e85;
  --gold-light:    #d9c0a1;
  --green:         #3e2f1b;
  --green-light:   #5a4025;
  --bg-start:      #f5efde;
  --bg-end:        #e8d6bb;
  --button-shadow: 0 4px 8px rgba(0,0,0,0.1);
  --card-shadow:   0 8px 16px rgba(0,0,0,0.1);
  --fade-duration: 300ms;
  --ease:          ease;
}

/* reset & base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body { 
  height: 100%; 
  overflow-x: hidden;
  overflow-y: auto; /* Prevent scrollbars from the animated shapes */
}
body {
  font-family: Arial, sans-serif;
  background-color: #68583e; /* Darker base for high-contrast colors */
  color: var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color var(--fade-duration) var(--ease); /* Added for smoothness */
}

/* -----------------------------------------------------------
   >>> DYNAMIC ANIMATED BACKGROUND <<<
   ----------------------------------------------------------- */
.background-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  filter: blur(20px); /* Blur the entire container for a softer feel */
}

@keyframes moveBlob1 {
  0% { transform: translate(10vw, -15vh) scale(1); }
  50% { transform: translate(-30vw, 60vh) scale(1.3); }
  100% { transform: translate(10vw, -15vh) scale(1); }
}
@keyframes moveBlob2 {
  0% { transform: translate(80vw, 10vh) scale(1); }
  50% { transform: translate(20vw, 70vh) scale(0.8); }
  100% { transform: translate(80vw, 10vh) scale(1); }
}
@keyframes moveBlob3 {
  0% { transform: translate(50vw, 90vh) scale(1.2); }
  50% { transform: translate(90vw, -10vh) scale(1); }
  100% { transform: translate(50vw, 90vh) scale(1.2); }
}
@keyframes moveBlob4 {
  0% { transform: translate(-10vw, 50vh) scale(1); }
  50% { transform: translate(70vw, 20vh) scale(1.4); }
  100% { transform: translate(-10vw, 50vh) scale(1); }
}
@keyframes moveBlob5 {
  0% { transform: translate(30vw, 20vh) scale(0.9); }
  50% { transform: translate(-10vw, -20vh) scale(1.1); }
  100% { transform: translate(30vw, 20vh) scale(0.9); }
}

.shape-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px); 
  opacity: 0.7;
}

.shape-blob:nth-child(1) {
  width: 450px;
  height: 450px;
  background: var(--gradient-color-1);
  animation: moveBlob1 30s infinite alternate;
}
.shape-blob:nth-child(2) {
  width: 350px;
  height: 350px;
  background: var(--gradient-color-2);
  animation: moveBlob2 35s infinite alternate-reverse;
}
.shape-blob:nth-child(3) {
  width: 300px;
  height: 300px;
  background: var(--gradient-color-3);
  animation: moveBlob3 28s infinite alternate;
}
.shape-blob:nth-child(4) {
  width: 400px;
  height: 400px;
  background: var(--gradient-color-4);
  animation: moveBlob4 40s infinite alternate-reverse;
}
.shape-blob:nth-child(5) {
  width: 250px;
  height: 250px;
  background: var(--gradient-color-5);
  animation: moveBlob5 25s infinite alternate;
}

main {
  width: 100%;
  max-width: 400px;
  padding: env(safe-area-inset-top) 1rem env(safe-area-inset-bottom) 1rem;
}

/* Phone entry overlay */
#phone-entry {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1099;
}
.phone-box {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  width: 90%;
  max-width: 320px;
}
.phone-box h2 {
  margin-bottom: 1rem;
  color: var(--green);
}
.phone-box input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--green-light);
  border-radius: 0.5rem;
}
.phone-box button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  background: var(--green);
  color: var(--gold);
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--button-shadow);
  transition: background-color 300ms ease;
}

/* Header */
header {
  text-align: center;
  margin: 1.5rem 0 1rem;
}
#photos-title {
  color: var(--gold);
  font-size: 1.75rem;
  font-weight: bold;
}
#user-info-photos {
  color: var(--green);
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* Controls */
#controls-photos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
#controls-photos button {
  width: auto;
  min-width: 80px;
  margin: 0.25rem;
  padding: 1rem;
  font-size: 1.1rem;
  background: linear-gradient(45deg, var(--green), var(--green-light));
  color: var(--gold);
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--button-shadow);
  min-height: 3.25rem;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
#controls-photos button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(45deg, var(--green-light), var(--green));
}
#controls-photos button:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}
#controls-photos.multi-select-mode button {
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
}

/* Week divider spanning all columns */
.week-divider {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: bold;
  color: var(--green);
  margin: 0.5rem 0;
}

/* Load-more container */
#load-more-container {
  text-align: center;
  margin: 1rem 0;
}
#btn-load-more {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background: linear-gradient(45deg, var(--green), var(--green-light));
  color: var(--gold);
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
#btn-load-more:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(45deg, var(--green-light), var(--green));
}
#btn-load-more:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}

/* Gallery and Photo Cards */
#gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.photo-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: var(--card-shadow);
  transition: all 300ms ease;
}
.photo-card.video {
  background: #000;
}
.photo-card img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

/* Checkbox for multi-select (hidden by default) */
.photo-card input.photo-checkbox {
  position: absolute;
  top: 8px; left: 8px;
  width: 20px; height: 20px;
  display: none;
  z-index: 2;
}
.photo-card.select-mode input.photo-checkbox {
  display: none !important;
}

/* Loading overlay & progress bar inside each card */
.photo-card .loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.photo-card .loading-bar {
  width: 60%;
  height: 4px;
  background: rgba(255,255,255,0.6);
  overflow: hidden;
  border-radius: 2px;
}
.photo-card .loading-bar .progress {
  width: 0%;
  height: 100%;
  background: #fff;
  transition: width 0.3s ease;
}

/* Caption overlay (date + uploader) */
.photo-card .photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.25rem;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.3) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
}
.photo-card .photo-caption > div {
  line-height: 1rem;
}
.photo-card .photo-caption div:last-child {
  font-size: 0.65rem;
}

/* Heart‐like button */
.photo-like-btn {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 3;
  background: none;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  filter: drop-shadow(0 0 2px black);
  color: transparent;               /* initial: outline only */
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  transition: color 300ms ease;
}
.photo-like-btn.liked {
  color: red;                       /* filled red */
  -webkit-text-stroke: 0;
  text-stroke: 0;
}
/* Hide heart/count in select-mode */
.photo-card.select-mode .photo-like-btn {
  display: none !important;
}

/* Selected card styling */
.photo-card.selected {
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

/* New-upload slide-in animation */
.photo-card.new-upload {
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
}
.photo-card.new-upload.slide-in {
  transform: translateX(0);
  opacity: 1;
}

/* Video play-icon overlay */
.photo-card .play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  pointer-events: none;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
}

/* Upload progress inside card */
.photo-card .upload-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 4px;
  width: 0%;
  background: var(--gold-light);
  transition: width 0.2s linear;
  z-index: 5;
}

/* Points info under user name */
#points-info {
  text-align: center;
  font-size: 0.9rem;
  color: var(--green);
  margin-top: 0.5rem;
}
#points-info a {
  color: var(--green);
  text-decoration: underline;
  cursor: pointer;
}
#points-info a:hover {
  opacity: 0.8;
}

/* Points overlay modal */
#points-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#points-overlay .phone-box {
  position: relative;
}
#points-overlay .phone-box h2 {
  margin-bottom: 1rem;
}
#points-close {
  position: absolute;
  top:8px; right:8px;
  background:none;
  border:none;
  font-size:1rem;
  color: var(--green-light);
  cursor:pointer;
}
#points-close:hover {
  color: var(--green);
}

/* Image/Video modal overlay */
#modal-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#modal-image,
#modal-video {
  max-width: 100%;
  max-height: 100%;
  display: none;
}
#modal-close {
  position: absolute;
  top:0; right:0;
  width:2rem; height:2rem;
  background: rgba(0,0,0,0.7);
  border:none;
  border-radius:50%;
  color:#fff;
  font-size:1.25rem;
  cursor:pointer;
  text-align:center;
  line-height:2rem;
}
#modal-close:hover {
  background: rgba(0,0,0,0.9);
}
#modal-download {
  margin-top:0.5rem;
  color: var(--gold);
  background: var(--green);
  text-decoration: none;
  font-size:1rem;
  padding:0.5rem 1rem;
  border-radius:0.25rem;
}
#modal-download:hover {
  background: var(--green-light);
}

/* QR Scanner & link-scan helpers */
#qr-wrapper {
  position: relative;
  display: none;
  width: calc(var(--qr-size)+32px);
  padding: 16px;
  background: rgba(180,158,133,1);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  margin: 0 auto 1.5rem;
  opacity: 0;
  z-index: 1001;
}
#qr-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display:none;
  z-index:999;
}
#qr-wrapper { /* force-centered modal */ }
#qr-wrapper {
  position: fixed!important;
  top:50%!important;
  left:50%!important;
  transform: translate(-50%,-50%)!important;
  z-index:1999;
}
#qr-close {
  position:absolute; top:8px; right:8px;
  display:none;
  width:20px; height:20px;
  background:rgba(255,255,255,0.9);
  border:none;
  border-radius:50%;
  color: var(--green);
  font-size:0.9rem;
  cursor:pointer;
}
#qr-close:hover { background:rgba(255,255,255,1); }
#qr-display canvas {
  width: var(--qr-size)!important;
  height: var(--qr-size)!important;
  background-color: var(--gold)!important;
  border-radius:0.5rem;
}

#scan-container {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
}
#scan-container #controls button {
  width: var(--qr-size);
  padding: 1rem;
  font-size:1.1rem;
  background:linear-gradient(45deg,var(--green),var(--green-light));
  color:var(--gold);
  border:none;border-radius:0.5rem;box-shadow:var(--button-shadow);
}
#qr-scanner {
  display:none;
  width: var(--qr-size);
  height: var(--qr-size);
  border-radius:0.5rem;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  margin-top:1rem;
}
#scan-popup {
  position:absolute;
  top:10%; left:50%;
  transform:translateX(-50%);
  background:#fff;
  padding:0.75rem 1rem;
  border-radius:0.5rem;
  box-shadow:var(--card-shadow);
  display:none;
  opacity:1;
  transition:opacity 300ms var(--ease);
  width:calc(var(--qr-size)*3);
  max-width:90vw;
}
#scan-popup-msg {
  color: var(--green);
  font-size:1rem;
  text-align:center;
}
#scan-popup-close {
  position:absolute; top:4px; right:6px;
  background:none; border:none;
  font-size:1rem; color:var(--green-light);
  cursor:pointer;
}
#scan-popup-close:hover { color: var(--green); }
#flash-overlay {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 300ms ease;
  z-index:1002;
}

/* Spinner for modal loading */
#modal-loading-overlay {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5);
  display:none;
  align-items:center;
  justify-content:center;
}
.spinner {
  width:40px; height:40px;
  border:5px solid rgba(255,255,255,0.2);
  border-top:5px solid #fff;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* -----------------------------------------------------------
   >>> RESTORED RULES FROM THE BACKUP INDEX.HTML <<<
   (app, header, controls, timers & scan results)
   ----------------------------------------------------------- */

/* Main app wrapper */
#app {
  z-index: 1; /* Make sure app content is above the background */
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 1rem env(safe-area-inset-bottom) 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* “Hey Stranger” title & user-name */
header #title {
  color: #FFF;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
header #user-name {
  color: #FFF;
  opacity: 0.9;
  font-size: 1.1rem;
  margin-top: 0.25rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* -----------------------------------------------------------
   >>> REVISED CONTROLS SECTION - LIQUID GLASS <<<
   ----------------------------------------------------------- */

#controls {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
  gap: 1.5rem 1rem; 
  margin-top: 1rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The Liquid Glass Square */
#controls button,
#controls a {
  width: 100%;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  
  /* LIQUID GLASS EFFECT */
  background: rgba(255, 255, 255, 0.1); /* Lighter, clearer base */
  backdrop-filter: blur(4px); /* Less blur for a clearer, liquid look */
  -webkit-backdrop-filter: blur(4px); /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Brighter edge */
  
  border-radius: 1.25rem; /* This will now NOT change on hover */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-decoration: none;
  
  /* REVISED TRANSITION */
  transition: transform 369ms ease, background-color 369ms ease;
}

#controls button:hover:not(:disabled),
#controls a:hover:not(:disabled) {
  /* REVISED HOVER STATE */
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2); /* Brighter on hover */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
}

#controls button:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Text label - make it stand out against the dynamic background */
.control-item span {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: #FFFFFF; /* White text for better contrast */
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Drop shadow for legibility */
}

/* Icon - make it white to match the new text color */
#controls .icon {
  width: 50%;
  height: 50%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* This trick turns a black icon white */
}
#controls #link-scan .icon {
  filter: brightness(100); /* Undo the double-inversion for the scan icon */
}


/* QR countdown timer */
#qr-timer {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--green);
  font-size: 0.9rem;
}

/* Scan result message */
#scan-result {
  margin-top: 1rem;
  text-align: center;
  color: var(--green);
  font-size: 1rem;
}
/* back arrow in photos header */
.back-arrow {
  font-size: 1.8rem;          /* make it easy to tap */
  line-height: 1;             /* align nicely */
  text-decoration: none;      /* no underline */
  margin-right: .75rem;       /* little spacing before title */
  color: var(--green);        /* match your palette */
}
.back-arrow:hover,
.back-arrow:focus {
  color: var(--gold);         /* optional hover effect */
}

#sign-out {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  font-size: 0.5rem;
  background: var(--green);
  color: var(--gold);
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--button-shadow);
  cursor: pointer;
  z-index: 1500;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}

#sign-out:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--green-light);
}

.main-logo {
  width: 50px;
  height: auto;
}
/* Ensure the photos page header is positioned relative */
#photos-app header {
  position: relative;
}

/* Pin the back arrow to the top‐left corner */
#photos-app .back-arrow {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* Center the logo horizontally without affecting the back arrow */
#photos-app .main-logo {
  display: block;
  margin: 1rem auto;
}

/* Original :root variables moved here for reference if needed, but overridden above */
/*
:root {
  --gold-light:  #d4b38c;
  --gold-dark:   #b4976e;
  --silver-light:#d3d3d3;
  --silver-dark: #a8a8a8;
  --bronze-light:#c09964;
  --bronze-dark: #996f44;
  --noise-opacity: 0.03;
}
*/

/* center the page title */
#leaderboard-title {
  text-align: center;
}

/* container gets a soft drop-shadow instead of a hard border */
#leaderboard-list {
  background: #f9f7f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* each row with a gentle inner separator, no hard borders */
.leaderboard-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: #fff;
  box-shadow: inset 0 -1px rgba(0,0,0,0.05);
}

/* remove any leftover bottom-border rules */
.leaderboard-item:last-child {
  box-shadow: inset 0 0 rgba(0,0,0,0); 
}

/* noise overlay pseudo-element (optional) */

.leaderboard-item::before {
  content: '';
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  background: url('path/to/noise.png') repeat;
  opacity: var(--noise-opacity, 0.03);
  pointer-events: none;
}


/* 3D gradient + highlight + shadow on top 3 rows */
.leaderboard-item.first {
  background: linear-gradient(
    145deg,
    var(--gold-light, #d4b38c),
    var(--gold-dark, #b4976e)
  );
  box-shadow:
    0 4px 8px rgba(0,0,0,0.15),        /* drop shadow */
    inset 0 1px 0 rgba(255,255,255,0.4) /* inner highlight */
  ;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.leaderboard-item.second {
  background: linear-gradient(
    145deg,
    var(--silver-light, #d3d3d3),
    var(--silver-dark, #a8a8a8)
  );
  box-shadow:
    0 4px 8px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4)
  ;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.leaderboard-item.third {
  background: linear-gradient(
    145deg,
    var(--bronze-light, #c09964),
    var(--bronze-dark, #996f44)
  );
  box-shadow:
    0 4px 8px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4)
  ;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

/* keep the “…” placeholder simple */
.leaderboard-item.placeholder span:first-child {
  font-style: italic;
  color: var(--green-light);
}

/* --- For Gallery Animations --- */
.photo-card {
  /* Add transition to all properties that might change */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
              opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s ease;
}

#gallery.select-mode .photo-card:not(:hover) {
    opacity: 0.8;
}

#gallery.select-mode .photo-card.selected {
    transform: scale(1.05);
    opacity: 1;
    box-shadow: 0 0 0 3px var(--gold), 0 8px 20px rgba(0,0,0,0.2);
}


/* --- For Upload Placeholders --- */
.photo-card.new-upload {
    position: relative;
}

.upload-progress-container {
    position: absolute;
    bottom: 0;
    left: 5%; /* Indent slightly */
    right: 5%;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress {
    width: 0%;
    height: 100%;
    background-color: var(--gold);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.photo-card.upload-failed {
    border: 2px solid red;
    opacity: 0.7;
}

/* --- For Selection Mode UI --- */
.photo-checkbox {
    display: none; /* Hide by default */
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    z-index: 10;
}

.select-mode .photo-checkbox {
    display: block; /* Show in select mode */
}

/* Make space for checkbox when in select mode */
.select-mode .photo-card img {
    cursor: pointer;
}
/* somewhere in your styles */
.leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* …existing styles… */
}

.leaderboard-item span {
  display: flex;
  align-items: center;
}