:root{
  --bg:#070A0F;
  --text:#EAF1FF;
  --muted:#9AA8C7;
  --line:rgba(255,255,255,.14);
  --r:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

.bg{min-height:100%; position:relative; overflow:hidden}

/* ✅ Moving background particles canvas */
#fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  z-index:0;
  opacity:1;
  pointer-events:none;
  mix-blend-mode: normal;
  filter: none;
}

.topbar{
  position:relative; z-index:2;
  padding:14px 14px 0;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.brand{display:flex; gap:10px; align-items:center}
.mark{
  overflow:hidden;
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(122,224,255,.18), rgba(169,123,255,.14));
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 20px 60px rgba(0,0,0,.35);
}
.mark img{width:100%;height:100%;object-fit:cover;display:block;}
.name{font-weight:700}
.tag{font-size:12px;color:var(--muted)}

.wrap{position:relative; z-index:2; padding:12px 14px 18px}

/* ✅ Scroll-to-toss cue (shows until coin is in view) */
.scrollCue{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,14,22,.72);
  color:var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  z-index:20;
  cursor:pointer;
}
.scrollCue .scrollCueLabel{ font-size:13px; letter-spacing:.2px; }
.scrollCue .scrollCueChev{
  font-size:16px;
  line-height:1;
  animation: cueBob 1.25s ease-in-out infinite;
}
@keyframes cueBob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(4px); }
}
.scrollCue[hidden]{ display:none !important; }

.hero{max-width:860px; margin:0 auto}

h1{
  margin:10px 0 10px;
  font-size:34px;
  line-height:1.06;
  letter-spacing:-.6px;
}
.muted{color:var(--muted)}
.small{font-size:12px}

.causebar{display:flex; align-items:center; gap:10px; margin:10px 0 14px}
.label{font-size:12px;color:var(--muted)}
.pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  font-size:13px;
}
.mini{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
}

.panel{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.20));
  box-shadow:0 20px 70px rgba(0,0,0,.38);
  overflow:hidden;
}
.row{padding:14px; display:grid; gap:12px}

.field span{display:block; font-size:12px; color:var(--muted); margin-bottom:8px}
.inputwrap{
  display:flex; align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(10,16,32,.70);
}
.prefix{color:var(--muted); margin-right:8px}
input{
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  font-size:18px;
}
.calc{
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(10,16,32,.62);
}
.calcLabel{font-size:12px;color:var(--muted)}
.calcValue{font-size:22px; font-weight:800; margin-top:4px}
.calcHint{font-size:12px;color:var(--muted); margin-top:6px}


.jumpLink{
  margin-top:10px;
  width:100%;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
}
.jumpLink:hover{ background:rgba(255,255,255,.06); }
.jumpLink:active{ transform: translateY(1px); }

.arena{
  position:relative;
  margin-top:14px;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(900px 900px at 50% 50%, rgba(255,255,255,.30), transparent 60%),
    rgba(8,12,20,.72);
  min-height:420px;
  overflow:hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  touch-action: none;
}


.arenaFx{
  position:absolute;
  mix-blend-mode: normal;
  filter: none;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0.95;
  pointer-events:none;
}

.arenaHud{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; gap:10px; justify-content:space-between;
  z-index:4;
}
.hudItem{
  flex:1;
  display:flex; align-items:baseline; justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.36);
  backdrop-filter: blur(8px);
}
.hudK{font-size:12px;color:var(--muted)}
.hudV{font-size:16px;font-weight:800}

.lanes{
  position:absolute; inset:60px 16px 120px 16px;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:10px;
  z-index:2;
  opacity:.22;
  pointer-events:none;
}
.lane{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
}
.lane::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,0) 14%,
      rgba(255,255,255,0) 86%,
      rgba(255,255,255,.14) 100%);
  opacity:.22;
  pointer-events:none;
}

.buckets{
  position:absolute;
  overflow: visible;
  left:12px; right:12px; top:88px; bottom:auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  z-index:3;
}

.bucket.full{
  opacity: .55;
  filter: grayscale(1);
}
.bucket.full .fill{
  opacity: .45;
}

/* Arc bucket layout (desktop/tablet): outer buckets slightly lower, inner slightly higher */
.buckets .bucket{ align-self:end; }

@media (max-width: 640px){
  /* Mobile: keep all 4 buckets same size, NOT stacked */
  .arena{ min-height: 720px; padding-bottom: 18px; }

  /* Lanes are decorative; remove to reduce overlap/touch confusion */
  .lanes{ display:none; }

  .buckets{
    left:12px; right:12px;
    top:100px;
    bottom:auto;
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 150px;
    gap:10px;
    align-content:start;
  }

  .buckets .bucket{ transform:none !important; }

  .bucket{
    position:relative;
    width:auto;
    min-height:150px;
    padding-top: 16px;
    justify-self: stretch;
  }

  /* Mouth sizing tuned for phones */
  .bucket .mouth{ height: 32px; width: 92%; }

  /* Typography tuned for narrow columns */
  .bucket .kicker{ font-size: 11px; }
  .bucket .name{ font-size: 13px; line-height: 1.12; }
  .bucket .amt{ font-size: 12px; }

  /* Helper text sits above the single-row buckets */
  /* Slightly bigger grab zone on phones */
  .coinWrap{ width: 168px; height: 168px; top:84%; }
}

.bucket{
  position:relative;
  padding:12px 12px 10px;
  border-radius:18px;
  border:1px solid var(--line);
background: linear-gradient(90deg, rgba(10,16,32,.35), rgba(10,16,32,.18));
  min-height:86px;
  overflow:hidden;
  color:var(--text);
}

/* Bucket "mouth" — makes it read like a container, not a button */
.bucket::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:10px;
  height:40px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 -10px 24px rgba(0,0,0,.28) inset;
  opacity:.95;
  pointer-events:none;
}
.bucket::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  top:14px;
  height:32px;
  border-radius:14px;
  background: radial-gradient(circle at 50% 30%, rgba(0,0,0,.55), rgba(0,0,0,.85) 70%);
  box-shadow: 0 12px 20px rgba(0,0,0,.35) inset, 0 0 0 1px rgba(255,255,255,.06) inset;
  pointer-events:none;
}

.bucket .k{font-size:12px;color:var(--muted);margin-top:34px; position:relative; z-index:1}
.bucket .v{position:relative; z-index:1}
.bucket .amt{position:relative; z-index:1}
.bucket .v{font-size:14px;font-weight:800;margin-top:4px}
.bucket .amt{font-size:12px;color:var(--muted);margin-top:6px}
.bucket .fill{
  position:absolute; left:0; right:0; bottom:0;
  height:0%;
  z-index:0;
background: linear-gradient(90deg, rgba(10,16,32,.35), rgba(10,16,32,.18));
  opacity:.9;
}
.bucket.active{
  border-color:rgba(122,224,255,.40);
  box-shadow:0 0 0 1px rgba(122,224,255,.10) inset, 0 25px 80px rgba(122,224,255,.08);
}

.bucket.locked{
  opacity:0.78;
  border-style:dashed;
}
.bucket.locked .amt{
  color:rgba(255,255,255,.65);
}

/* impact */
.bucket.impact{
  animation: bucketImpact 520ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes bucketImpact{
  0%{ transform: translateY(0); filter: brightness(1); }
  30%{ transform: translateY(3px) scale(0.985); filter: brightness(1.15); }
  55%{ transform: translateY(-1px) scale(1.01); filter: brightness(1.05); }
  100%{ transform: translateY(0) scale(1); filter: brightness(1); }
}

.coinWrap{
  position:absolute;
  left:50%;
  top:86%;
  transform: translate(-50%,-50%);
  /* Bigger hit area + above buckets on mobile */
  width: 148px;
  height: 148px;
  display:grid;
  place-items:center;
  z-index:6;
  will-change: transform;
  touch-action:none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  isolation:isolate;
}

.coinWrap.prompt::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%);
  opacity:.85;
  animation: coinHalo 1.35s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}
@keyframes coinHalo{
  0%,100%{ transform: scale(.98); opacity:.55; }
  50%{ transform: scale(1.08); opacity:.95; }
}


.coinWrap.dragging{ cursor: grabbing; }
.coinWrap.dragging .coin{ filter: brightness(1.06); }
.coinWrap.thrown .coinSub{ opacity:0; }

.coin{
  pointer-events:none;
  z-index:1;
  width:clamp(82px, 14vw, 112px); height:clamp(82px, 14vw, 112px);
  border-radius:999px;
  border:2px solid rgba(255, 220, 140, .55);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 38%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,.22), transparent 45%),
    radial-gradient(circle at 50% 55%, rgba(255, 210, 110, .95) 0%, rgba(215, 155, 55, .95) 55%, rgba(160, 105, 25, .95) 100%);
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 -10px 18px rgba(0,0,0,.22) inset;
  position:relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.coin::before{
  content:"";
  position:absolute; inset:9px;
  border-radius:999px;
  border:2px dashed rgba(255,255,255,.18);
  opacity:.55;
}
.coinFace{
  width:100%; height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:10px;
}
.coinAmt{font-weight:900;font-size:18px; text-shadow:0 2px 10px rgba(0,0,0,.35)}
.coinSub{font-size:12px;color:rgba(255,255,255,.85); margin-top:2px}


.coach{
  position:absolute;
  left:50%;
  top: calc(86% - 132px);
  transform: translate(-50%,-50%);
  z-index:7;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  font-size:13px;
  color:var(--text);
  pointer-events:none;
}
.coachArrow{
  font-size:16px;
  opacity:.9;
  animation: coachBounce 900ms ease-in-out infinite;
}
@keyframes coachBounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(4px); }
}
@media (max-width: 640px){
  .coach{ top: calc(84% - 120px); font-size:12px; padding:9px 11px; }
}

.tip{
  position:absolute;
  left:12px; right:12px;
  top: var(--tipTop, 240px);
  bottom:auto;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  z-index:3;
  pointer-events:none;
}


.result{
  position:absolute;
  left:12px; right:12px;
  bottom:112px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  z-index:4;
  pointer-events:none;
}
.result.show{
  opacity:1;
  transform: translateY(0);
}

/* particles */
.p{
  position:absolute;
  width:6px; height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 18px rgba(122,224,255,.22);
  transform: translate(-50%, -50%);
  pointer-events:none;
  z-index:6;
}

.arena.shake{ animation: arenaShake 280ms ease-out both; }
@keyframes arenaShake{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-2px); }
  40%{ transform: translateX(2px); }
  60%{ transform: translateX(-1px); }
  80%{ transform: translateX(1px); }
  100%{ transform: translateX(0); }
}

.ghost{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
}

.modal{
  border:1px solid var(--line);
  border-radius:18px;
  padding:0;
  background:rgba(10,14,22,.92);
  color:var(--text);
  width:min(560px, 92vw);
}
.modal::backdrop{background:rgba(0,0,0,.55)}
.modalHead{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px;
  border-bottom:1px solid var(--line);
}
.modalTitle{font-weight:900}
.modalBody{padding:14px}

.foot{
  margin-top:14px;
  display:flex; gap:14px;
  justify-content:center;
  padding-bottom:12px;
}
.link{color:var(--muted); text-decoration:none; font-size:13px}
.link:hover{color:var(--text)}


@media (max-width: 380px){
  .buckets{ grid-auto-rows: 138px; gap:8px; }
  .bucket{ min-height:138px; }
  .bucket .name{ font-size: 12px; }
  .bucket .kicker{ font-size: 10px; }
  .coinWrap{ width: 176px; height: 176px; }
}


/* Try again button under result */
.tryagain{
  margin:10px auto 0;
  display:block;
  padding:10px 14px;
  font-weight:600;
  letter-spacing:.2px;
}



/* Cashout modal */
.primary{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.16);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.primary:hover{ background:rgba(255,255,255,.20); }
.primary:active{ transform: translateY(1px); }

.cashRow{ display:flex; gap:10px; }
.cashRow > *{ flex:1; }

.cashAmounts{ margin-top:12px; }
.cashHint{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.cashBtns{ display:flex; gap:10px; }
.cashBtns .cashAmt{ flex:1; }
#cashBack{ width:100%; margin-top:10px; }

/* ---------- Content pages (About/Legal/Impact) ---------- */
.page{ max-width:860px; margin:0 auto; }
.pageCard{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(10,16,32,.62);
  box-shadow:0 20px 70px rgba(0,0,0,.38);
  padding:16px;
}
.pageCard h2{ margin:0 0 8px; font-size:18px; letter-spacing:-.2px; }
.pageCard p, .pageCard li{ line-height:1.55; }

.kvGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.kv{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.06);
}
.kv .k{ font-size:12px; color:var(--muted); }
.kv .v{ font-size:22px; font-weight:800; margin-top:4px; }
@media (max-width:640px){ .kvGrid{ grid-template-columns:1fr; } }

.impactList{ display:grid; gap:10px; margin-top:10px; }
.impactItem{
  display:flex; justify-content:space-between; gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.04);
}
.impactName{ font-weight:800; }
.impactUrl a{ color:var(--text); text-decoration:none; }
.impactUrl a:hover{ text-decoration:underline; }
.impactBadge{
  font-size:12px; color:var(--muted);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  white-space:nowrap;
}

.impactGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:10px; }
@media (max-width:640px){ .impactGrid{ grid-template-columns:1fr; } }
.impactCard{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.04);
}
.impactCardName{ font-weight:800; margin-bottom:6px; }
.impactCardSmall{ font-size:12px; color:var(--muted); }
.impactCardValue{ font-size:18px; font-weight:800; margin-top:2px; }

/* Impact top layout */
.impactTopGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
@media (max-width: 900px){
  .impactTopGrid{ grid-template-columns:1fr; }
}

/* Small helper so the impact rows align nicely */
.impactLeft{ display:flex; flex-direction:column; gap:2px; }
.impactRight{ display:flex; align-items:center; }

/* ===== Impact layout polish ===== */
.impactTopGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}

/* Make both cards the same height and distribute content nicely */
.impactPanel{
  display:flex;
  flex-direction:column;
}

.impactPanelBody{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0; /* prevents flex overflow issues */
}

/* Push the list section to fill the remaining space */
.impactSection{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
}

/* Make lists feel tighter and more consistent */
.impactList{
  display:grid;
  gap:10px;
}

.impactItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px;
  background:rgba(255,255,255,.04);
}

.impactName{
  font-weight:800;
  font-size:18px;
  letter-spacing:-.2px;
}

.impactUrl a{
  color:var(--text);
  text-decoration:none;
  opacity:.9;
}
.impactUrl a:hover{ text-decoration:underline; }

.impactBadge{
  font-size:13px;
  color:var(--muted);
  border:1px solid var(--line);
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  white-space:nowrap;
}

/* Make the big header behave better on mobile */
@media (max-width: 900px){
  .impactTopGrid{ grid-template-columns:1fr; gap:12px; }
}

@media (max-width: 640px){
  .hero.page h1{
    font-size:34px;
    line-height:1.05;
  }
  .hero.page .muted{
    font-size:18px;
    line-height:1.2;
  }

  .pageCard{ padding:14px; }

  .kvGrid{ grid-template-columns:1fr !important; gap:10px; }
  .kv .v{ font-size:20px; }

  .impactItem{
    padding:12px;
    border-radius:14px;
  }
  .impactName{ font-size:16px; }
  .impactBadge{ font-size:12px; padding:6px 10px; }
}

/* Remove default h/p margins inside impact sections so both columns align */
.impactSection h3,
.impactSection h4,
.impactSection p{
  margin: 0;
}

/* Contact form */
.field{ margin-top:12px; }
.field label{ display:block; font-weight:700; margin-bottom:6px; color:var(--text); }
.field input,
.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
}
.field textarea{ resize:vertical; min-height:140px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.55); }
.field input:focus,
.field textarea:focus{ border-color:rgba(255,255,255,.35); }

/* Make <button class="ghost"> match <a class="ghost"> */
a.ghost{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

button.ghost{
  appearance:none;
  -webkit-appearance:none;
  font: inherit;
  cursor:pointer;
}

.ghost:hover{ background:rgba(255,255,255,.09); }
.ghost:active{ transform: translateY(1px); }

/* Floating Back to Top button */
.backToTop{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  display: none;            /* JS toggles this */
  padding: 10px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* Show on touch devices a bit higher so it doesn't overlap browser UI */
@media (max-width: 640px){
  .backToTop{ bottom: 18px; right: 12px; }
}

.impactPanelFull {
  width: 100%;
}

.impactPanelFull .impactPanelBody {
  padding-top: 6px; /* optional */
}

#allGivingHistoryList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}