/* ─────────── CSS VARIABLES ─────────── */
:root {
  /* day */
  --sky: #87ceeb;
  --ground: #55a630;
  --ground-dark: #3f7d20;
  --text: #ffffff;
  --shadow: rgba(0,0,0,.6);
  --sun: #fff176;
  --sun-border:#fce156;
}
body.night {
  /* night overrides */
  --sky: #0c1445;
  --ground: #235021;
  --ground-dark: #142d11;
  --text: #f0f8ff;
  --sun: #f2f4f6; /* moon */
  --sun-border:#d5d7da;
}

/* ─────────── RESET ─────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

/* ─────────── BACKGROUND ─────────── */
body{
  font-family:'VT323',monospace;
  color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;
  background:linear-gradient(var(--sky) 60%,var(--ground) 60%);
  overflow-x:hidden;
  padding:20px 20px 120px;
}
body::before{/* scrolling clouds */
  content:'';position:fixed;top:0;left:-200%;width:400%;height:60vh;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50" viewBox="0 0 200 50" fill="%23ffffff"><rect x="10" y="20" width="40" height="20" rx="5"/><rect x="50" y="10" width="70" height="30" rx="6"/><rect x="120" y="20" width="50" height="20" rx="5"/></svg>') repeat-x;
  opacity:.4;animation:clouds 60s linear infinite;pointer-events:none;z-index:2;
}
@keyframes clouds{to{transform:translateX(50%);}}

/* ─────────── MINECRAFT SUN / MOON ─────────── */
#orb{
  position:fixed;top:8vh;right:8vw;
  width:80px;height:80px;
  background:var(--sun);
  border-radius:12px;
  box-shadow:
    /* Stronger, page-wide glow layers */
    0 0 150px 80px rgba(252, 225, 86, 0.4),
    0 0 300px 150px rgba(255, 241, 118, 0.3),
    0 0 500px 250px rgba(255, 241, 118, 0.2),
    0 0 800px 400px rgba(255, 241, 118, 0.15),
    0 0 1200px 600px rgba(255, 241, 118, 0.1);
  image-rendering:pixelated;
  pointer-events:none;z-index:1;
  overflow:visible;
}

/* ─────────── HEADER ─────────── */
header{margin:0 0 2rem;font-size:clamp(1rem,4vw,2.5rem);
  font-family:'Press Start 2P',monospace;text-shadow:3px 3px var(--ground-dark);
  text-align:center;filter:drop-shadow(0 0 4px var(--shadow));position:relative;z-index:5;
  line-height:1.3;word-break:break-word;}

/* ─────────── GALLERY ─────────── */
#gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;width:100%;max-width:700px;padding:0;}

.card{position:relative;perspective:1000px;overflow:visible;border-radius:16px;transform-style:preserve-3d;transition:transform .15s ease-out;width:100%;display:flex;flex-direction:column;border:4px solid var(--ground-dark);background:#fff;}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px 12px 0 0;
  cursor:pointer;display:block;}


.card-label{
  background:var(--ground-dark);color:#fff;padding:8px 16px;font-size:20px;
  font-family:'Press Start 2P',monospace;
  text-align:center;border-radius:0 0 12px 12px;}

/* ─────────── LIGHTBOX ─────────── */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:9;}
#overlay.active{opacity:1;pointer-events:all;}
#overlay img{max-width:90%;max-height:90%;border:10px solid #fff;border-radius:12px;box-shadow:0 0 25px #000;animation:pop .3s ease-out;image-rendering:pixelated;}
@keyframes pop{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ─────────── TOGGLE BUTTON ─────────── */
#modeToggle{position:fixed;top:1rem;left:1rem;background:var(--ground-dark);color:var(--text);
  font-size:1.5rem;border:3px solid #fff;padding:.5rem .8rem;border-radius:8px;cursor:pointer;user-select:none;transition:transform .2s;z-index:99;}
#modeToggle:hover{transform:translateY(-3px);}

/* ─────────── MOBILE RESPONSIVE ─────────── */
@media (max-width: 768px) {
  body{padding:60px 15px 120px;justify-content:flex-start;}
  header{font-size:clamp(0.8rem,5vw,1.5rem);margin:1rem 0 1.5rem;}
  #gallery{grid-template-columns:1fr;gap:1.5rem;max-width:350px;}
  .card{max-width:100%;}
  .card-label{font-size:14px;padding:6px 12px;}
  #orb{width:56px;height:56px;top:5vh;right:5vw;border-radius:8px;}
  #orb{box-shadow:
    /* Stronger, wider glow */
    0 0 100px 50px rgba(252, 225, 86, 0.4),
    0 0 200px 100px rgba(255, 241, 118, 0.3),
    0 0 400px 200px rgba(255, 241, 118, 0.2),
    0 0 600px 300px rgba(255, 241, 118, 0.1);}
  body.night #orb{box-shadow:
    /* Mobile moon glow */
    0 0 100px 50px rgba(213, 215, 218, 0.3),
    0 0 200px 100px rgba(242, 244, 246, 0.2),
    0 0 400px 200px rgba(242, 244, 246, 0.15),
    0 0 600px 300px rgba(242, 244, 246, 0.05);}
  #modeToggle{font-size:1.2rem;padding:.4rem .6rem;}
  .ground{height:40px;}
  .cars{bottom:40px;height:40px;}
  .car{width:90px;height:45px;}
}  

/* ─────────── GROUND & CARS ─────────── */
.ground{position:fixed;bottom:0;left:0;width:100%;height:60px;background:repeating-linear-gradient(-45deg,var(--ground-dark) 0 12px,var(--ground) 12px 24px);z-index:90;}
.cars{position:fixed;bottom:60px;left:0;width:100%;height:60px;overflow:visible;pointer-events:none;z-index:91;}
.car{position:absolute;bottom:0;width:120px;height:60px;}
.car svg{width:100%;height:100%;image-rendering:pixelated;shape-rendering:crispEdges;}

/* Sun/Moon glow effect */
#orb::before{
  content:'';
  position:absolute;
  top:-500px;left:-500px;
  width:1080px;height:1080px;
  background:radial-gradient(circle, rgba(255, 241, 118, 0.8) 0%, rgba(255, 241, 118, 0.4) 20%, rgba(255, 241, 118, 0.2) 40%, transparent 70%);
  opacity:0.5;
  filter:blur(50px);
  border-radius:50%;
  z-index:-1;
  pointer-events:none;
}

/* Night mode moon glow */
body.night #orb::before{
  background:radial-gradient(circle, rgba(242, 244, 246, 0.6) 0%, rgba(213, 215, 218, 0.3) 20%, rgba(213, 215, 218, 0.15) 40%, transparent 70%);
  opacity:0.3;
}

body.night #orb{
  box-shadow:
    /* Softer, blue-white moon glow */
    0 0 150px 80px rgba(213, 215, 218, 0.3),
    0 0 300px 150px rgba(242, 244, 246, 0.2),
    0 0 500px 250px rgba(242, 244, 246, 0.15),
    0 0 800px 400px rgba(242, 244, 246, 0.1),
    0 0 1200px 600px rgba(242, 244, 246, 0.05);
}

/* Car animations */
@keyframes car-drive-right{
  from{left:-100px;}
  to{left:110%;}
}

@keyframes car-drive-left{
  from{right:-100px;}
  to{right:110%;}
}