:root{
  --bg:#0B110D; --surface:#141C16; --surface-hi:#1B251D; --border:rgba(255,255,255,0.08);
  --text:#EDF2EE; --text-dim:#8FA396; --text-faint:#5C6B60;
  --primary:#C97C4A; --primary-hi:#DB9663;
  --common:#6B8F71; --rare:#9B7FE0; --legendary:#E3B341;
  --radius:20px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:
    radial-gradient(circle at 20% -10%, rgba(201,124,74,0.10), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(155,127,224,0.06), transparent 45%),
    var(--bg);
  color:var(--text); font-family:'Inter',system-ui,sans-serif; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-display{font-family:'Sora',system-ui,sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
.app-shell{max-width:1180px; margin:0 auto; padding:0 16px 100px; position:relative;}
::-webkit-scrollbar{width:6px; height:6px;} ::-webkit-scrollbar-thumb{background:#2A362C; border-radius:4px;}

/* ---- Top bar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 4px 14px; position:sticky; top:0; z-index:40;
  background:linear-gradient(to bottom, var(--bg) 70%, transparent);}
.logo{display:flex; align-items:center; gap:10px;}
.logo-badge{width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--primary),#8B4A2A);
  display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:0 4px 16px rgba(201,124,74,0.35);}
.logo-text{font-weight:700; font-size:18px; letter-spacing:-0.01em;}
.logo-sub{font-size:11px; color:var(--text-dim); margin-top:-2px;}
.profile-chip{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  padding:7px 14px 7px 7px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:600; transition:.15s;}
.profile-chip:hover{border-color:rgba(255,255,255,0.18);}
.avatar-dot{width:26px; height:26px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}

/* ---- Cards / surfaces ---- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .15s, transform .15s;}
.card:hover{border-color:rgba(255,255,255,0.14);}
.tier-badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.tier-common{background:rgba(107,143,113,0.15); color:var(--common); border:1px solid rgba(107,143,113,0.3);}
.tier-rare{background:rgba(155,127,224,0.15); color:var(--rare); border:1px solid rgba(155,127,224,0.35);}
.tier-legendary{background:rgba(227,179,65,0.15); color:var(--legendary); border:1px solid rgba(227,179,65,0.4); box-shadow:0 0 12px rgba(227,179,65,0.15);}

.btn-primary{background:var(--primary); color:#1a0f08; font-weight:700; border:none; padding:12px 20px; border-radius:14px; font-size:14px; cursor:pointer; transition:.15s;}
.btn-primary:hover{background:var(--primary-hi); transform:translateY(-1px);}
.btn-ghost{background:var(--surface-hi); color:var(--text); border:1px solid var(--border); padding:11px 18px; border-radius:14px; font-size:14px; cursor:pointer; font-weight:600; transition:.15s;}
.btn-ghost:hover{border-color:rgba(255,255,255,0.2);}
.input{width:100%; background:var(--surface-hi); border:1px solid var(--border); border-radius:12px; padding:11px 14px; color:var(--text); font-size:14px; font-family:inherit;}
.input:focus{outline:none; border-color:var(--primary);}
label{font-size:12px; color:var(--text-dim); display:block; margin-bottom:5px; font-weight:600;}

/* ---- Tabs ---- */
.tab-panel{display:none;} .tab-panel.active{display:block;}
.section-title{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:28px 0 14px;}

/* ---- Hero ---- */
.hero{border-radius:28px; padding:32px 26px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(201,124,74,0.14), rgba(227,179,65,0.06) 60%, transparent), var(--surface);
  border:1px solid var(--border);}
.hero h1{font-size:clamp(26px,5vw,38px); margin:0 0 8px; font-weight:800; letter-spacing:-0.02em; line-height:1.1;}
.hero p{color:var(--text-dim); font-size:15px; max-width:480px; margin:0 0 20px; line-height:1.5;}

/* ---- Listing / species card grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.listing-card{padding:16px; display:flex; flex-direction:column; gap:10px;}
.listing-icon{font-size:30px; width:52px; height:52px; border-radius:14px; background:var(--surface-hi); display:flex; align-items:center; justify-content:center;}
.listing-price{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:17px;}
.filter-chip{padding:7px 15px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:13px; font-weight:600; cursor:pointer; color:var(--text-dim); transition:.15s;}
.filter-chip.active{background:var(--primary); border-color:var(--primary); color:#1a0f08;}

/* ---- Bottom nav ---- */
.bottom-nav{position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; justify-content:center; padding-bottom:14px; pointer-events:none;}
.nav-inner{pointer-events:auto; display:flex; align-items:center; gap:2px; background:rgba(20,28,22,0.9); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:24px; padding:8px 10px; box-shadow:0 10px 40px rgba(0,0,0,0.4);}
.nav-item{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 16px; border-radius:16px; cursor:pointer; color:var(--text-faint); font-size:10px; font-weight:600; transition:.15s; background:none; border:none;}
.nav-item.active{color:var(--primary);}
.nav-item i{font-size:17px;}
.fab-scan{width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#8B4A2A); display:flex; align-items:center; justify-content:center;
  margin:0 4px; box-shadow:0 6px 20px rgba(201,124,74,0.5); cursor:pointer; border:3px solid var(--bg); transform:translateY(-10px); transition:.2s;}
.fab-scan:hover{transform:translateY(-13px) scale(1.05);}
.fab-scan i{color:#1a0f08; font-size:20px;}

/* ---- Modal ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(4,6,5,0.75); backdrop-filter:blur(4px); z-index:100; display:none; align-items:center; justify-content:center; padding:16px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface); border:1px solid var(--border); border-radius:24px; max-width:440px; width:100%; max-height:88vh; overflow-y:auto; padding:24px; position:relative;}
.modal-close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background:var(--surface-hi); border:none; color:var(--text-dim); cursor:pointer; font-size:14px;}

/* ---- Scan flow ---- */
#scan-video{width:100%; border-radius:16px; background:#000; aspect-ratio:4/3; object-fit:cover;}
#scan-canvas{display:none;}
.scan-preview-img{width:100%; border-radius:16px; aspect-ratio:4/3; object-fit:cover;}

/* ---- Reveal card (the signature moment) ---- */
.reveal-stage{perspective:1200px; display:flex; align-items:center; justify-content:center; min-height:340px;}
.reveal-card{width:220px; height:300px; position:relative; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.34,1.56,.64,1);}
.reveal-card.flipped{transform:rotateY(180deg);}
.reveal-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px;}
.reveal-front{background:linear-gradient(135deg,#2A2018,#1B251D); border:2px solid var(--border);}
.reveal-front i{font-size:48px; color:var(--primary); animation:pulse-soft 1.6s ease-in-out infinite;}
.reveal-back{background:var(--surface-hi); border:2px solid var(--legendary); transform:rotateY(180deg); text-align:center; gap:6px;}
.reveal-back.tier-common-bg{border-color:var(--common); box-shadow:0 0 40px rgba(107,143,113,0.35);}
.reveal-back.tier-rare-bg{border-color:var(--rare); box-shadow:0 0 40px rgba(155,127,224,0.4);}
.reveal-back.tier-legendary-bg{border-color:var(--legendary); box-shadow:0 0 50px rgba(227,179,65,0.5);}
.reveal-icon{font-size:44px;}
.reveal-name{font-family:'Sora',sans-serif; font-weight:700; font-size:16px; margin-top:4px;}
.reveal-latin{font-size:11px; color:var(--text-dim); font-style:italic;}
@keyframes pulse-soft{0%,100%{opacity:1;} 50%{opacity:.45;}}
@keyframes pop-in{0%{transform:scale(0.5); opacity:0;} 70%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;}}
@keyframes spin-once{ to{ transform:rotate(360deg); } }
.spinning{ animation: spin-once 0.6s ease; }
.congrats-text{font-family:'Sora',sans-serif; font-weight:800; font-size:22px; text-align:center; margin-top:16px; animation:pop-in .5s cubic-bezier(.34,1.56,.64,1);}
.confetti{position:fixed; top:-10px; width:8px; height:8px; z-index:200; pointer-events:none; border-radius:2px;}

/* ---- Auth ---- */
.role-pick{display:flex; gap:8px;} .role-pick .input{cursor:pointer; text-align:center;}

/* ---- Map ---- */
#map{height:60vh; min-height:380px; border-radius:20px; overflow:hidden; border:1px solid var(--border);}

/* ---- Profile ---- */
.stat-box{background:var(--surface-hi); border-radius:14px; padding:14px; text-align:center;}
.stat-box .num{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:20px; color:var(--primary);}
.stat-box .lbl{font-size:11px; color:var(--text-dim); margin-top:2px;}

@media(max-width:640px){ .app-shell{padding:0 12px 100px;} }