:root{
  /* Shiba accent. Change --accent-rgb only — every warm glow derives from it. */
  --accent-rgb:245,164,78;
  --accent:rgb(var(--accent-rgb));
  --accent-soft:rgba(var(--accent-rgb),.30);
  --accent-glow:rgba(var(--accent-rgb),.55);

  --bg:#000000;
  --ink:#ffffff;
  --scene: min(94vw, 66vh);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  background:var(--bg);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}

body{
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  cursor:pointer;
  background-image:
    radial-gradient(72% 55% at 42% 52%, rgba(var(--accent-rgb),.12) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(100% 100% at 50% 50%, #0a0602 0%, #000000 100%);
}

/* ---------- starfield ---------- */
.stars{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.9;
  pointer-events:none;
  animation:drift 200s linear infinite alternate;
}
@keyframes drift{to{transform:translate3d(-26px,-16px,0)}}
@media (prefers-reduced-motion:reduce){.stars{animation:none}}

/* ---------- big brand mark, sits behind the planet ---------- */
.brandmark{
  position:absolute;
  left:29%;                           /* centred on the globe */
  top:56%;
  width:235%;                         /* big: the leaf fills well past the globe */
  aspect-ratio:1024 / 512;            /* the rh-logo.svg canvas */
  transform:translate(-50%,-50%);
  background:url("../assets/rh-logo.svg") center/contain no-repeat;
  opacity:.55;
  pointer-events:none;
  filter:drop-shadow(0 0 70px rgba(158,232,58,.28));
}

/* ---------- counter ---------- */
.top{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;
  justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 16px 0;
  pointer-events:none;
  z-index:3;
}
.count{
  font-size:clamp(34px, 11vw, 72px);
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--accent);
  text-shadow:0 0 22px var(--accent-glow), 0 0 60px var(--accent-soft);
  transition:transform .09s ease-out;
  will-change:transform;
}
.count.pop{transform:scale(1.06)}

/* ---------- scene ---------- */
.stage{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.scene{
  position:relative;
  width:var(--scene);
  aspect-ratio:1/1;
  overflow:visible;
  opacity:0;
  transition:opacity .5s ease;
}
.scene.ready{opacity:1}

.earth{
  position:absolute;
  left:4%;
  top:34%;
  width:46%;
  aspect-ratio:1/1;
  border-radius:50%;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),.16),
    0 0 26px 4px rgba(var(--accent-rgb),.26),
    0 0 90px 14px rgba(var(--accent-rgb),.14);
}
#globe{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
}

.dog{
  position:absolute;
  left:33%;
  top:24%;
  width:46%;
  aspect-ratio:50 / 51;               /* one frame of assets/character.webp */
  background-image:url("../assets/character.webp");
  background-repeat:no-repeat;
  background-size:900% 100%;           /* 9 frames across */
  background-position:0% 0;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));
  will-change:background-position;
}

/* ---------- footer: contract-address bar + socials ---------- */
.foot{
  position:fixed;
  left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:4;
  pointer-events:none;                /* only the controls take clicks */
}
.foot > *{pointer-events:auto}

.ca{
  display:inline-flex;
  align-items:center;
  gap:9px;
  max-width:92vw;
  margin:0;
  padding:7px 11px;
  border-radius:12px;
  font:12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color:#e9f2e6;
  background:rgba(10,13,10,.72);
  border:1px solid rgba(158,232,58,.30);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  transition:border-color .15s ease, transform .12s ease, background .15s ease;
}
.ca:hover{border-color:#9ee83a;background:rgba(158,232,58,.10)}
.ca:active{transform:scale(.98)}
.ca:focus-visible{outline:2px solid #9ee83a;outline-offset:2px}
.ca-tag{font-weight:800;letter-spacing:.08em;color:#9ee83a}
.ca-addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-act{font-weight:700;letter-spacing:.04em;color:#9ee83a;flex:none}
.ca.copied{border-color:#43d17a;background:rgba(67,209,122,.12)}
.ca.copied .ca-act,.ca.copied .ca-tag{color:#43d17a}

.links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.buy{
  display:inline-flex;
  align-items:center;
  height:52px;
  padding:0 24px;
  border-radius:16px;
  font:800 15px/1 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.02em;
  color:#0b1a04;
  background:#9ee83a;
  border:1px solid #9ee83a;
  box-shadow:0 8px 24px rgba(158,232,58,.34);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.buy:hover{
  transform:translateY(-3px);
  filter:brightness(1.06);
  box-shadow:0 12px 30px rgba(158,232,58,.46);
}
.buy:active{transform:translateY(-1px) scale(.97)}
.buy:focus-visible{outline:2px solid #fff;outline-offset:2px}
.link{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.link svg{
  width:24px;
  height:24px;
  display:block;
  pointer-events:none;
}
.link:hover{
  transform:translateY(-3px);
  background:rgba(var(--accent-rgb),.16);
  border-color:var(--accent);
}
.link:active{transform:translateY(-1px) scale(.96)}

/* ---------- live stock ticker (bottom-right) ---------- */
.ticker{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:5;
  width:252px;
  max-width:46vw;
  padding:10px 11px 8px;
  border-radius:14px;
  background:rgba(9,12,9,.74);
  border:1px solid rgba(158,232,58,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,0,0,.42);
  font:11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color:#e9f2e6;
  -webkit-user-select:none;
  user-select:none;
}
.tk-head{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.09em;
  color:#9ee83a;
}
.tk-dot{
  width:6px;height:6px;border-radius:50%;
  background:#9ee83a;
  box-shadow:0 0 8px #9ee83a;
  animation:tkpulse 1.6s ease-in-out infinite;
}
@keyframes tkpulse{50%{opacity:.3}}
.tk-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.tk-row{
  display:grid;
  grid-template-columns:44px 1fr 60px 54px;
  align-items:center;
  gap:7px;
}
.tk-sym{font-weight:700;color:#fff}
.tk-spark{width:100%;height:18px;overflow:visible}
.tk-spark path{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.tk-row.up .tk-spark path{stroke:#43d17a}
.tk-row.down .tk-spark path{stroke:#f0616d}
.tk-px{text-align:right;color:#dfe8dc}
.tk-ch{text-align:right;font-weight:700}
.tk-row.up .tk-ch{color:#43d17a}
.tk-row.down .tk-ch{color:#f0616d}
.tk-foot{
  margin-top:7px;
  font-size:8.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#7d8a78;
}
.tk-foot.stale{color:#c98a45}

@media (orientation:portrait){
  :root{--scene: min(98vw, 62vh)}
}
@media (max-width:560px){
  .ticker{
    width:172px;
    right:8px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 108px);   /* clear the footer */
    padding:8px 9px 7px;
  }
  .tk-row{grid-template-columns:38px 1fr 50px;gap:5px}
  .tk-spark{display:none}
  .ca{font-size:11px;padding:6px 9px;gap:7px}
}
@media (max-width:380px){
  .link{width:46px;height:46px;border-radius:14px}
  .link svg{width:21px;height:21px}
  .buy{height:46px;padding:0 20px;font-size:14px;border-radius:14px}
  .links{gap:10px}
}
@media (orientation:landscape) and (max-height:520px){
  :root{--scene: min(72vw, 76vh)}
  .count{font-size:clamp(24px,5vh,40px)}
  .ticker{bottom:8px;right:8px;transform:scale(.9);transform-origin:bottom right}
}