*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#000;
  --gold:#d4af37;
  --green:#00ffcc;
  --text:#fff;
  --muted:#888;
}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100%;
  overscroll-behavior:none;
}
body{padding-bottom:32px}
body.splash-on,body.lang-on{overflow:hidden}
body.splash-on .top-stats,
body.splash-on main,
body.lang-on .top-stats,
body.lang-on main{visibility:hidden}

#splash{
  position:fixed;inset:0;z-index:100;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1s ease;
}
#splash.fade-out{opacity:0;pointer-events:none}
#splash h1{
  text-align:center;font-weight:300;letter-spacing:6px;font-size:14px;line-height:2.1;color:var(--gold);
}
#splash .sw{
  display:inline-block;
  margin:0 .35em;
  opacity:0;
  animation:splashWordIn .7s ease forwards;
  animation-delay:calc(var(--i) * .55s);
}
@keyframes splashWordIn{
  from{opacity:0}
  to{opacity:1}
}

#lang{
  position:fixed;inset:0;z-index:90;
  background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  opacity:0;pointer-events:none;
  transition:opacity 1s ease;
}
#lang.visible{opacity:1;pointer-events:auto}
#lang.fade-out{opacity:0;pointer-events:none}
.lang-title{
  color:var(--gold);font-weight:300;letter-spacing:6px;font-size:14px;margin-bottom:10px;
}
.lang-btn{
  min-width:240px;padding:14px 28px;border-radius:50px;cursor:pointer;
  background:transparent;color:var(--gold);border:1px solid rgba(212,175,55,.55);
  font-size:14px;font-weight:700;letter-spacing:3px;
}
.lang-btn:hover,.lang-btn:focus{
  background:var(--gold);color:#000;
}

@keyframes pageFadeIn{
  from{opacity:0}
  to{opacity:1}
}
body.home-in .top-stats,
body.home-in main{
  animation:pageFadeIn 1s ease;
}

.top-stats{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-around;
  padding:12px 10px;
  background:rgba(0,0,0,.85);
  border-bottom:1px solid rgba(212,175,55,.25);
  backdrop-filter:blur(10px);
}
.top-stats div{text-align:center}
.top-stats span{display:block;color:var(--gold);font-size:16px;font-weight:600}
.top-stats small{color:#777;font-size:9px;letter-spacing:1.5px}

.screen{display:none;padding:20px 18px 40px;max-width:480px;margin:0 auto}
.screen.active{display:block}
#home.active{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:28px;
}

.logo-wrap{
  position:relative;width:280px;height:280px;border:0;background:transparent;cursor:pointer;margin-bottom:28px;
  overflow:hidden;
}
.retina{
  position:absolute;
  top:50%;
  left:50%;
  /* Fit the outer copper ring of the A-EYE center circle */
  width:43.7%;
  height:43.7%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#00ffcc;
  opacity:1;
  animation:hueRotate 8s infinite linear;
  z-index:1;
  pointer-events:none;
  box-shadow:none;
}
.logo-wrap img{
  position:relative;width:100%;height:100%;object-fit:contain;z-index:2;
  pointer-events:none;
}
@keyframes hueRotate{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

.slogan{
  font-size:13px;letter-spacing:4px;margin-bottom:22px;font-weight:300;
  background:linear-gradient(90deg,#7a6418 0%,#d4af37 45%,#f5e7a1 50%,#d4af37 55%,#7a6418 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:sloganGlow 4.5s ease-in-out infinite;
  cursor:pointer;
}
@keyframes sloganGlow{
  0%,100%{opacity:.42;filter:brightness(.9)}
  50%{opacity:1;filter:brightness(1.45)}
}
.home-copy{
  color:#fff;font-size:14px;line-height:1.65;max-width:360px;margin:0 auto;font-weight:300;
}
.home-copy-strong{
  display:inline-block;margin-top:8px;letter-spacing:1px;font-size:12px;font-weight:500;
}
.no-login{
  margin-top:18px;color:#fff;font-size:12px;letter-spacing:3px;font-weight:600;
}
.archive-link{margin-top:22px}
.archive-link a{
  color:var(--gold);font-size:11px;letter-spacing:2px;text-decoration:none;opacity:.75;
}

.btn-primary,.btn-gold,.btn-ghost{
  border:0;cursor:pointer;border-radius:50px;font-size:14px;font-weight:700;letter-spacing:.5px;
}
.btn-primary{
  background:var(--gold);color:#000;padding:14px 28px;min-width:200px;
}
.btn-gold{background:var(--gold);color:#000;padding:8px 16px}
.btn-ghost{background:transparent;color:var(--gold);padding:8px 16px;border:1px solid rgba(212,175,55,.35)}
.back{background:transparent;border:0;color:var(--gold);font-size:14px;cursor:pointer;margin-bottom:10px}

.scan-title{text-align:center;color:var(--gold);font-size:20px;letter-spacing:2px;margin:10px 0 24px;font-weight:300}
.tap-scan{
  width:200px;height:200px;margin:0 auto;border-radius:50%;
  border:3px solid var(--gold);background:rgba(212,175,55,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--gold);cursor:pointer;animation:pulse 2s infinite;
}
.tap-scan span{font-size:14px;letter-spacing:2px}
@keyframes pulse{
  0%,100%{box-shadow:0 0 20px rgba(212,175,55,.3)}
  50%{box-shadow:0 0 40px rgba(212,175,55,.6)}
}
.hint{text-align:center;color:#777;font-size:13px;margin:20px 12px}
#preview.screen{text-align:center;padding-top:24px}
.preview-img{
  display:block;width:90%;max-width:320px;max-height:55vh;margin:12px auto 18px;
  object-fit:contain;border-radius:20px;border:2px solid var(--gold);
}
.error{
  background:rgba(255,0,0,.1);border:1px solid #c44;color:#ff8a8a;
  padding:12px;border-radius:12px;margin:12px auto;max-width:360px;font-size:13px;
}
.consent{
  display:flex;gap:10px;align-items:flex-start;
  max-width:360px;margin:8px auto 16px;text-align:left;
  color:#bbb;font-size:12px;line-height:1.45;font-weight:400;
}
.consent input{margin-top:3px;accent-color:var(--gold);flex-shrink:0}

#loading{text-align:center;padding-top:30vh}
.spinner{
  width:60px;height:60px;margin:0 auto 18px;
  border:3px solid rgba(212,175,55,.2);border-top-color:var(--gold);
  border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{color:var(--gold);letter-spacing:2px;font-size:12px}

.results-bar{display:flex;justify-content:space-between;margin-bottom:14px}
.saved-banner{
  text-align:center;color:#0d3b20;background:#d4f5df;border:1px solid #8fd6a8;
  border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:16px;
}
.saved-banner.warn{background:#3a2f12;color:#f0d878;border-color:#8a7428}
.result-img{
  display:block;width:90%;max-width:300px;margin:0 auto 18px;
  border-radius:20px;border:2px solid var(--gold);
}
.result-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.3);
  border-radius:18px;padding:16px;margin:0 auto 12px;max-width:400px;
}
.result-label{color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.result-value{color:var(--gold);font-size:18px;font-weight:600}
.result-value.green{color:var(--green)}
.result-desc{color:#ccc;font-size:14px;line-height:1.5}
.contribute-note{
  max-width:400px;margin:18px auto 0;text-align:center;color:#999;font-size:12px;line-height:1.5;
}
.share-row{
  display:flex;gap:10px;justify-content:center;margin:0 auto 16px;max-width:400px;
}
.btn-share{
  flex:1;border:0;cursor:pointer;border-radius:50px;
  background:var(--gold);color:#000;padding:12px 16px;font-size:14px;font-weight:700;letter-spacing:1px;
}
.share-row .btn-ghost{flex:1}

@media print{
  body{background:#000;color:#fff;padding:0}
  body.splash-on .top-stats,body.splash-on main{visibility:visible}
  #splash,#lang,.top-stats,#home,#preview,#loading,.results-bar,.share-row,.no-print{display:none !important}
  #results.screen,#results.screen.active{
    display:block !important;padding:24px;max-width:100%;
  }
  .saved-banner{break-inside:avoid}
  .result-img{max-width:280px;border-color:#d4af37}
  .result-card{break-inside:avoid;border-color:#d4af37}
}

@media (max-width:380px){
  .logo-wrap{width:230px;height:230px}
}